fix: tolerate offline nodes when controlling forward services and editing tunnels

- controlForwardServices: skip offline nodes instead of failing entire operation,
  so forward pause/resume/delete works when some entry nodes are offline
- onNodeOnline: always sync forward state on node reconnect (not just post-upgrade),
  so forwards that changed status while a node was offline get synced
- add ListForwardIDsByNode repo method to sync all forwards (including paused)
- tunnel edit UI: allow deselecting already-selected offline nodes in
  entry/chain/exit selectors, matching the backend's existing tolerance

go-backend/internal/http/client/federation.go

@@ -71,10 +71,11 @@ type RuntimeReleaseRoleRequest struct {
 }
 
 type RuntimeDiagnoseRequest struct {
-	IP      string `json:"ip"`
-	Port    int    `json:"port"`
-	Count   int    `json:"count"`
-	Timeout int    `json:"timeout"`
+	IP       string `json:"ip"`
+	Port     int    `json:"port"`
+	Count    int    `json:"count"`
+	Timeout  int    `json:"timeout"`
+	Protocol string `json:"protocol"`
 }
 
 type RuntimeNodeCommandRequest struct {

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

@@ -42,6 +42,7 @@ type diagnosisWorkItem struct {
 	toNode       chainNodeRecord
 	hasChainHop  bool
 	ipPreference string
+	protocol     string
 }
 
 type diagnosisExecOptions struct {
@@ -473,6 +474,9 @@ func (h *Handler) controlForwardServices(forward *forwardRecord, commandType str
 
 		nodeHandled, lastNotFoundErr, err := h.controlForwardServicesOnNode(fp.NodeID, bases, commandType)
 		if err != nil {
+			if isNodeOfflineOrTimeoutError(err) {
+				continue
+			}
 			return err
 		}
 
@@ -692,6 +696,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 	}
 
 	ipPreference := h.repo.GetTunnelIPPreference(forward.TunnelID)
+	protocol := strings.ToLower(strings.TrimSpace(tunnel.Protocol))
 
 	inNodes, chainHops, outNodes := splitChainNodeGroups(chainRows)
 	workItems := make([]diagnosisWorkItem, 0, len(chainRows)*2+len(targets))
@@ -706,6 +711,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 					targetIP:    target.IP,
 					targetPort:  target.Port,
 					description: description,
+					protocol:    protocol,
 					metadata: map[string]interface{}{
 						"fromChainType": 1,
 					},
@@ -723,6 +729,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 						hasChainHop:  true,
 						ipPreference: ipPreference,
 						description:  description,
+						protocol:     protocol,
 						metadata: map[string]interface{}{
 							"fromChainType": 1,
 							"toChainType":   2,
@@ -739,6 +746,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 						hasChainHop:  true,
 						ipPreference: ipPreference,
 						description:  description,
+						protocol:     protocol,
 						metadata: map[string]interface{}{
 							"fromChainType": 1,
 							"toChainType":   3,
@@ -759,6 +767,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 							hasChainHop:  true,
 							ipPreference: ipPreference,
 							description:  description,
+							protocol:     protocol,
 							metadata: map[string]interface{}{
 								"fromChainType": 2,
 								"fromInx":       currentNode.Inx,
@@ -776,6 +785,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 							hasChainHop:  true,
 							ipPreference: ipPreference,
 							description:  description,
+							protocol:     protocol,
 							metadata: map[string]interface{}{
 								"fromChainType": 2,
 								"fromInx":       currentNode.Inx,
@@ -795,6 +805,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 					targetIP:    target.IP,
 					targetPort:  target.Port,
 					description: description,
+					protocol:    protocol,
 					metadata: map[string]interface{}{
 						"fromChainType": 3,
 					},
@@ -810,6 +821,7 @@ func (h *Handler) prepareForwardDiagnosis(forward *forwardRecord) (string, []dia
 					targetIP:    target.IP,
 					targetPort:  target.Port,
 					description: description,
+					protocol:    protocol,
 					metadata: map[string]interface{}{
 						"fromChainType": 1,
 					},
@@ -864,6 +876,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 	}
 
 	ipPreference := h.repo.GetTunnelIPPreference(tunnelID)
+	protocol := strings.ToLower(strings.TrimSpace(tunnel.Protocol))
 	inNodes, chainHops, outNodes := splitChainNodeGroups(chainRows)
 	workItems := make([]diagnosisWorkItem, 0, len(chainRows)*2)
 
@@ -876,6 +889,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 				targetIP:    "www.bing.com",
 				targetPort:  443,
 				description: description,
+				protocol:    protocol,
 				metadata: map[string]interface{}{
 					"fromChainType": 1,
 				},
@@ -892,6 +906,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 						hasChainHop:  true,
 						ipPreference: ipPreference,
 						description:  description,
+						protocol:     protocol,
 						metadata: map[string]interface{}{
 							"fromChainType": 1,
 							"toChainType":   2,
@@ -908,6 +923,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 						hasChainHop:  true,
 						ipPreference: ipPreference,
 						description:  description,
+						protocol:     protocol,
 						metadata: map[string]interface{}{
 							"fromChainType": 1,
 							"toChainType":   3,
@@ -928,6 +944,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 							hasChainHop:  true,
 							ipPreference: ipPreference,
 							description:  description,
+							protocol:     protocol,
 							metadata: map[string]interface{}{
 								"fromChainType": 2,
 								"fromInx":       currentNode.Inx,
@@ -945,6 +962,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 							hasChainHop:  true,
 							ipPreference: ipPreference,
 							description:  description,
+							protocol:     protocol,
 							metadata: map[string]interface{}{
 								"fromChainType": 2,
 								"fromInx":       currentNode.Inx,
@@ -963,6 +981,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 				targetIP:    "www.bing.com",
 				targetPort:  443,
 				description: description,
+				protocol:    protocol,
 				metadata: map[string]interface{}{
 					"fromChainType": 3,
 				},
@@ -976,6 +995,7 @@ func (h *Handler) prepareTunnelDiagnosis(tunnelID int64) (string, string, []diag
 				targetIP:    "www.bing.com",
 				targetPort:  443,
 				description: description,
+				protocol:    protocol,
 				metadata: map[string]interface{}{
 					"fromChainType": 1,
 				},
@@ -1095,9 +1115,9 @@ func (h *Handler) executeDiagnosisWorkItem(workItem diagnosisWorkItem, options d
 	single := make([]map[string]interface{}, 0, 1)
 	nodeCache := map[int64]*nodeRecord{}
 	if workItem.hasChainHop {
-		h.appendChainHopDiagnosis(&single, nodeCache, workItem.fromNodeID, workItem.toNode, workItem.description, workItem.metadata, workItem.ipPreference, options)
+		h.appendChainHopDiagnosis(&single, nodeCache, workItem.fromNodeID, workItem.toNode, workItem.description, workItem.metadata, workItem.ipPreference, workItem.protocol, options)
 	} else {
-		h.appendPathDiagnosis(&single, nodeCache, workItem.fromNodeID, workItem.targetIP, workItem.targetPort, workItem.description, workItem.metadata, options)
+		h.appendPathDiagnosis(&single, nodeCache, workItem.fromNodeID, workItem.targetIP, workItem.targetPort, workItem.description, workItem.metadata, workItem.protocol, options)
 	}
 
 	if len(single) == 0 {
@@ -1223,14 +1243,14 @@ func (h *Handler) appendFailedDiagnosis(results *[]map[string]interface{}, nodeC
 		item["nodeName"] = node.Name
 	}
 	if strings.TrimSpace(message) == "" {
-		message = "TCP连接失败"
+		message = "连接失败"
 	}
 	item["success"] = false
 	item["message"] = message
 	*results = append(*results, item)
 }
 
-func (h *Handler) appendPathDiagnosis(results *[]map[string]interface{}, nodeCache map[int64]*nodeRecord, fromNodeID int64, targetIP string, targetPort int, description string, metadata map[string]interface{}, options diagnosisExecOptions) {
+func (h *Handler) appendPathDiagnosis(results *[]map[string]interface{}, nodeCache map[int64]*nodeRecord, fromNodeID int64, targetIP string, targetPort int, description string, metadata map[string]interface{}, protocol string, options diagnosisExecOptions) {
 	item := newDiagnosisResultItem(fromNodeID, targetIP, targetPort, description, metadata)
 
 	fromNode, err := h.cachedNode(nodeCache, fromNodeID)
@@ -1247,9 +1267,9 @@ func (h *Handler) appendPathDiagnosis(results *[]map[string]interface{}, nodeCac
 		pingErr  error
 	)
 	if fromNode.IsRemote == 1 {
-		pingData, pingErr = h.tcpPingViaRemoteNode(fromNode, targetIP, targetPort, options)
+		pingData, pingErr = h.pingViaRemoteNode(fromNode, targetIP, targetPort, protocol, options)
 	} else {
-		pingData, pingErr = h.tcpPingViaNode(fromNodeID, targetIP, targetPort, options)
+		pingData, pingErr = h.pingViaNode(fromNodeID, targetIP, targetPort, protocol, options)
 	}
 	if pingErr != nil {
 		item["success"] = false
@@ -1266,21 +1286,21 @@ func (h *Handler) appendPathDiagnosis(results *[]map[string]interface{}, nodeCac
 	message := strings.TrimSpace(asString(pingData["message"]))
 	if success {
 		if message == "" {
-			message = "TCP连接成功"
+			message = "连接成功"
 		}
 	} else {
 		if message == "" {
 			message = strings.TrimSpace(asString(pingData["errorMessage"]))
 		}
 		if message == "" {
-			message = "TCP连接失败"
+			message = "连接失败"
 		}
 	}
 	item["message"] = message
 	*results = append(*results, item)
 }
 
-func (h *Handler) appendChainHopDiagnosis(results *[]map[string]interface{}, nodeCache map[int64]*nodeRecord, fromNodeID int64, toNode chainNodeRecord, description string, metadata map[string]interface{}, ipPreference string, options diagnosisExecOptions) {
+func (h *Handler) appendChainHopDiagnosis(results *[]map[string]interface{}, nodeCache map[int64]*nodeRecord, fromNodeID int64, toNode chainNodeRecord, description string, metadata map[string]interface{}, ipPreference string, protocol string, options diagnosisExecOptions) {
 	fromNode, _ := h.cachedNode(nodeCache, fromNodeID)
 	targetNode, err := h.cachedNode(nodeCache, toNode.NodeID)
 	if err != nil {
@@ -1292,7 +1312,7 @@ func (h *Handler) appendChainHopDiagnosis(results *[]map[string]interface{}, nod
 		h.appendFailedDiagnosis(results, nodeCache, fromNodeID, strings.Trim(strings.TrimSpace(targetNode.ServerIP), "[]"), toNode.Port, description, metadata, err.Error())
 		return
 	}
-	h.appendPathDiagnosis(results, nodeCache, fromNodeID, targetIP, targetPort, description, metadata, options)
+	h.appendPathDiagnosis(results, nodeCache, fromNodeID, targetIP, targetPort, description, metadata, protocol, options)
 }
 
 func resolveChainProbeTarget(fromNode, targetNode *nodeRecord, preferredPort int, ipPreference string, connectIp string) (string, int, error) {
@@ -1385,13 +1405,81 @@ func (h *Handler) tcpPingViaRemoteNode(node *nodeRecord, ip string, port int, op
 
 	fc := client.NewFederationClientWithTimeout(options.commandTimeout)
 	return fc.Diagnose(remoteURL, remoteToken, h.federationLocalDomain(), client.RuntimeDiagnoseRequest{
-		IP:      strings.TrimSpace(ip),
-		Port:    port,
-		Count:   4,
-		Timeout: options.pingTimeoutMS,
+		IP:       strings.TrimSpace(ip),
+		Port:     port,
+		Count:    4,
+		Timeout:  options.pingTimeoutMS,
+		Protocol: "tcp",
 	})
 }
 
+func (h *Handler) udpPingViaRemoteNode(node *nodeRecord, ip string, port int, options diagnosisExecOptions) (map[string]interface{}, error) {
+	if node == nil {
+		return nil, errors.New("节点不存在")
+	}
+	remoteURL := strings.TrimSpace(node.RemoteURL)
+	remoteToken := strings.TrimSpace(node.RemoteToken)
+	if remoteURL == "" || remoteToken == "" {
+		return nil, errors.New("远程节点缺少共享配置")
+	}
+	if options.commandTimeout <= 0 {
+		options.commandTimeout = diagnosisCommandTimeout
+	}
+	if options.pingTimeoutMS <= 0 {
+		options.pingTimeoutMS = int(diagnosisCommandTimeout / time.Millisecond)
+	}
+
+	fc := client.NewFederationClientWithTimeout(options.commandTimeout)
+	return fc.Diagnose(remoteURL, remoteToken, h.federationLocalDomain(), client.RuntimeDiagnoseRequest{
+		IP:       strings.TrimSpace(ip),
+		Port:     port,
+		Count:    4,
+		Timeout:  options.pingTimeoutMS,
+		Protocol: "udp",
+	})
+}
+
+func isUDPBasedProtocol(protocol string) bool {
+	p := strings.ToLower(strings.TrimSpace(protocol))
+	return p == "kcp" || p == "udp" || p == "quic"
+}
+
+func (h *Handler) pingViaNode(nodeID int64, ip string, port int, protocol string, options diagnosisExecOptions) (map[string]interface{}, error) {
+	if isUDPBasedProtocol(protocol) {
+		return h.udpPingViaNode(nodeID, ip, port, options)
+	}
+	return h.tcpPingViaNode(nodeID, ip, port, options)
+}
+
+func (h *Handler) pingViaRemoteNode(node *nodeRecord, ip string, port int, protocol string, options diagnosisExecOptions) (map[string]interface{}, error) {
+	if isUDPBasedProtocol(protocol) {
+		return h.udpPingViaRemoteNode(node, ip, port, options)
+	}
+	return h.tcpPingViaRemoteNode(node, ip, port, options)
+}
+
+func (h *Handler) udpPingViaNode(nodeID int64, ip string, port int, options diagnosisExecOptions) (map[string]interface{}, error) {
+	if options.commandTimeout <= 0 {
+		options.commandTimeout = diagnosisCommandTimeout
+	}
+	if options.pingTimeoutMS <= 0 {
+		options.pingTimeoutMS = int(diagnosisCommandTimeout / time.Millisecond)
+	}
+	res, err := h.sendNodeCommandWithTimeout(nodeID, "UdpPing", map[string]interface{}{
+		"ip":      ip,
+		"port":    port,
+		"count":   4,
+		"timeout": options.pingTimeoutMS,
+	}, options.commandTimeout, false, false)
+	if err != nil {
+		return nil, err
+	}
+	if res.Data == nil {
+		return nil, errors.New("节点未返回诊断数据")
+	}
+	return res.Data, nil
+}
+
 func splitRemoteTargets(remoteAddr string) []string {
 	parts := strings.Split(remoteAddr, ",")
 	out := make([]string, 0, len(parts))

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

@@ -86,10 +86,11 @@ type federationRuntimeReleaseRoleRequest struct {
 }
 
 type federationRuntimeDiagnoseRequest struct {
-	IP      string `json:"ip"`
-	Port    int    `json:"port"`
-	Count   int    `json:"count"`
-	Timeout int    `json:"timeout"`
+	IP       string `json:"ip"`
+	Port     int    `json:"port"`
+	Count    int    `json:"count"`
+	Timeout  int    `json:"timeout"`
+	Protocol string `json:"protocol"`
 }
 
 type federationRuntimeCommandRequest struct {
@@ -1281,7 +1282,12 @@ func (h *Handler) federationRuntimeDiagnose(w http.ResponseWriter, r *http.Reque
 		commandTimeout = diagnosisCommandTimeout
 	}
 
-	res, err := h.sendNodeCommandWithTimeout(share.NodeID, "TcpPing", map[string]interface{}{
+	commandType := "TcpPing"
+	if isUDPBasedProtocol(req.Protocol) {
+		commandType = "UdpPing"
+	}
+
+	res, err := h.sendNodeCommandWithTimeout(share.NodeID, commandType, map[string]interface{}{
 		"ip":      req.IP,
 		"port":    req.Port,
 		"count":   req.Count,

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

@@ -43,16 +43,19 @@ func (h *Handler) processFlowItem(nodeID int64, item flowItem) {
 
 	forwardID, userID, userTunnelID, ok := parseFlowServiceIDs(serviceName)
 	if ok {
-		inFlow, outFlow := h.scaleFlowByTunnel(forwardID, item.D, item.U)
-		_ = h.repo.AddFlow(forwardID, userID, userTunnelID, inFlow, outFlow)
-		if quota, quotaErr := h.repo.AddUserQuotaUsage(userID, inFlow+outFlow, time.Now()); quotaErr == nil {
-			h.enforceUserQuotaIfNeeded(userID, quota)
+		if h.forwardExists(forwardID) {
+			inFlow, outFlow := h.scaleFlowByTunnel(forwardID, item.D, item.U)
+			_ = h.repo.AddFlow(forwardID, userID, userTunnelID, inFlow, outFlow)
+			if quota, quotaErr := h.repo.AddUserQuotaUsage(userID, inFlow+outFlow, time.Now()); quotaErr == nil {
+				h.enforceUserQuotaIfNeeded(userID, quota)
+			}
+			if userTunnelID > 0 {
+				h.enforceFlowPolicies(userID, userTunnelID)
+			}
+		} else if nodeID > 0 {
+			h.sendDeleteOrphanedForwardService(nodeID, serviceName)
 		}
 		h.processPeerShareFlowFromForward(forwardID, nodeID, serviceName, item)
-
-		if userTunnelID > 0 {
-			h.enforceFlowPolicies(userID, userTunnelID)
-		}
 		return
 	}
 
@@ -628,6 +631,21 @@ func (h *Handler) forwardExists(forwardID int64) bool {
 	return ok
 }
 
+func (h *Handler) sendDeleteOrphanedForwardService(nodeID int64, serviceName string) {
+	parts := strings.Split(serviceName, "_")
+	if len(parts) < 3 {
+		return
+	}
+	forwardID, err := strconv.ParseInt(parts[0], 10, 64)
+	if err != nil || forwardID <= 0 {
+		return
+	}
+	base := parts[0] + "_" + parts[1] + "_" + parts[2]
+	_, _ = h.sendNodeCommand(nodeID, "DeleteService", map[string]interface{}{
+		"services": []string{base + "_tcp", base + "_udp"},
+	}, false, true)
+}
+
 func (h *Handler) speedLimiterExists(name string) bool {
 	if name == "" {
 		return false

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

@@ -3457,9 +3457,15 @@ func buildTunnelChainConfig(tunnelID int64, fromNodeID int64, targets []tunnelRu
 			connectorMetadata["nodelay"] = true
 			connectorMetadata["mux.keepaliveInterval"] = "15s"
 			connectorMetadata["mux.keepaliveTimeout"] = "45s"
+			connectorMetadata["mux.maxFrameSize"] = 32768
+			connectorMetadata["mux.maxStreamBuffer"] = 2097152
 		}
 		if isKCPTunnelProtocol(protocol) {
 			connectorMetadata["connectTimeout"] = "30s"
+			connectorMetadata["mux.keepaliveInterval"] = "15s"
+			connectorMetadata["mux.keepaliveTimeout"] = "45s"
+			connectorMetadata["mux.maxFrameSize"] = 32768
+			connectorMetadata["mux.maxStreamBuffer"] = 2097152
 		}
 		if len(connectorMetadata) > 0 {
 			connector["metadata"] = connectorMetadata
@@ -3505,9 +3511,15 @@ func buildTunnelChainServiceConfig(tunnelID int64, chainNode tunnelRuntimeNode,
 		handlerMetadata["nodelay"] = true
 		handlerMetadata["mux.keepaliveInterval"] = "15s"
 		handlerMetadata["mux.keepaliveTimeout"] = "45s"
+		handlerMetadata["mux.maxFrameSize"] = 32768
+		handlerMetadata["mux.maxStreamBuffer"] = 2097152
 	}
 	if isKCPTunnelProtocol(protocol) {
 		handlerMetadata["connectTimeout"] = "30s"
+		handlerMetadata["mux.keepaliveInterval"] = "15s"
+		handlerMetadata["mux.keepaliveTimeout"] = "45s"
+		handlerMetadata["mux.maxFrameSize"] = 32768
+		handlerMetadata["mux.maxStreamBuffer"] = 2097152
 	}
 	if len(handlerMetadata) > 0 {
 		handlerCfg["metadata"] = handlerMetadata
@@ -3621,8 +3633,16 @@ func buildTunnelDialerConfig(protocol string) map[string]interface{} {
 	}
 	if isKCPTunnelProtocol(protocol) {
 		dialer["metadata"] = map[string]interface{}{
-			"kcp.keepalive": 10,
-			"kcp.tcp":       false,
+			"kcp.keepalive":   10,
+			"kcp.tcp":         false,
+			"kcp.mode":        "fast2",
+			"kcp.sndwnd":      2048,
+			"kcp.rcvwnd":      2048,
+			"kcp.mtu":         1400,
+			"kcp.datashard":   10,
+			"kcp.parityshard": 3,
+			"kcp.nocomp":      true,
+			"kcp.nc":          0,
 		}
 	}
 	return dialer
@@ -3634,8 +3654,16 @@ func buildTunnelListenerConfig(protocol string) map[string]interface{} {
 	}
 	if isKCPTunnelProtocol(protocol) {
 		listener["metadata"] = map[string]interface{}{
-			"kcp.keepalive": 10,
-			"kcp.tcp":       false,
+			"kcp.keepalive":   10,
+			"kcp.tcp":         false,
+			"kcp.mode":        "fast2",
+			"kcp.sndwnd":      2048,
+			"kcp.rcvwnd":      2048,
+			"kcp.mtu":         1400,
+			"kcp.datashard":   10,
+			"kcp.parityshard": 3,
+			"kcp.nocomp":      true,
+			"kcp.nc":          0,
 		}
 	}
 	return listener

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

@@ -389,9 +389,7 @@ func (h *Handler) consumeNodePendingUpgradeRedeploy(nodeID int64) bool {
 }
 
 func (h *Handler) onNodeOnline(nodeID int64) {
-	if !h.consumeNodePendingUpgradeRedeploy(nodeID) {
-		return
-	}
+	h.consumeNodePendingUpgradeRedeploy(nodeID)
 	h.redeployNodeRuntimeAfterUpgrade(nodeID)
 }
 
@@ -401,7 +399,7 @@ func (h *Handler) redeployNodeRuntimeAfterUpgrade(nodeID int64) {
 		fmt.Printf("post-upgrade redeploy: list tunnels for node %d failed: %v\n", nodeID, err)
 		return
 	}
-	forwardIDs, err := h.repo.ListActiveForwardIDsByNode(nodeID)
+	forwardIDs, err := h.repo.ListForwardIDsByNode(nodeID)
 	if err != nil {
 		fmt.Printf("post-upgrade redeploy: list forwards for node %d failed: %v\n", nodeID, err)
 		return

go-backend/internal/store/model/model.go

@@ -546,6 +546,7 @@ type TunnelRecord struct {
 	Status       int
 	Flow         int64
 	TrafficRatio float64
+	Protocol     string
 }
 
 type UserQuotaView struct {

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

@@ -99,6 +99,22 @@ func (r *Repository) ListActiveForwardIDsByNode(nodeID int64) ([]int64, error) {
 	return ids, nil
 }
 
+func (r *Repository) ListForwardIDsByNode(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{}).
+		Where("forward_port.node_id = ?", 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/store/repo/repository_flow.go

@@ -158,6 +158,7 @@ func (r *Repository) GetTunnelRecord(tunnelID int64) (*model.TunnelRecord, error
 		Status:       t.Status,
 		Flow:         t.Flow,
 		TrafficRatio: t.TrafficRatio,
+		Protocol:     t.Protocol,
 	}
 	if tr.Flow <= 0 {
 		tr.Flow = 1

go-gost/x/dialer/kcp/dialer.go

@@ -11,6 +11,7 @@ import (
 	"github.com/go-gost/core/logger"
 	md "github.com/go-gost/core/metadata"
 	kcp_util "github.com/go-gost/x/internal/util/kcp"
+	mdutil "github.com/go-gost/x/metadata/util"
 	"github.com/go-gost/x/registry"
 	"github.com/xtaci/kcp-go/v5"
 	"github.com/xtaci/smux"
@@ -48,6 +49,9 @@ func (d *kcpDialer) Init(md md.Metadata) (err error) {
 	}
 
 	d.md.config.Init()
+	if md != nil && md.IsExists("kcp.nc") {
+		d.md.config.NoCongestion = mdutil.GetInt(md, "kcp.nc")
+	}
 
 	return nil
 }

go-gost/x/dialer/kcp/metadata.go

@@ -85,6 +85,12 @@ func (d *kcpDialer) parseMetadata(md mdata.Metadata) (err error) {
 		if md.IsExists("kcp.nocomp") {
 			d.md.config.NoComp = mdutil.GetBool(md, "kcp.nocomp")
 		}
+		if md.IsExists("kcp.datashard") {
+			d.md.config.DataShard = mdutil.GetInt(md, "kcp.datashard")
+		}
+		if md.IsExists("kcp.parityshard") {
+			d.md.config.ParityShard = mdutil.GetInt(md, "kcp.parityshard")
+		}
 	}
 
 	d.md.handshakeTimeout = mdutil.GetDuration(md, handshakeTimeout)

go-gost/x/listener/kcp/listener.go

@@ -15,6 +15,7 @@ import (
 	limiter_wrapper "github.com/go-gost/x/limiter/traffic/wrapper"
 	metrics "github.com/go-gost/x/metrics/wrapper"
 	stats "github.com/go-gost/x/observer/stats/wrapper"
+	mdutil "github.com/go-gost/x/metadata/util"
 	"github.com/go-gost/x/registry"
 	"github.com/xtaci/kcp-go/v5"
 	"github.com/xtaci/smux"
@@ -53,6 +54,9 @@ func (l *kcpListener) Init(md md.Metadata) (err error) {
 
 	config := l.md.config
 	config.Init()
+	if md != nil && md.IsExists("kcp.nc") {
+		config.NoCongestion = mdutil.GetInt(md, "kcp.nc")
+	}
 
 	var conn net.PacketConn
 	if config.TCP {

go-gost/x/listener/kcp/metadata.go

@@ -88,6 +88,12 @@ func (l *kcpListener) parseMetadata(md mdata.Metadata) (err error) {
 		if md.IsExists("kcp.nocomp") {
 			l.md.config.NoComp = mdutil.GetBool(md, "kcp.nocomp")
 		}
+		if md.IsExists("kcp.datashard") {
+			l.md.config.DataShard = mdutil.GetInt(md, "kcp.datashard")
+		}
+		if md.IsExists("kcp.parityshard") {
+			l.md.config.ParityShard = mdutil.GetInt(md, "kcp.parityshard")
+		}
 	}
 
 	l.md.backlog = mdutil.GetInt(md, backlog)

go-gost/x/service/global_traffic_manager.go

@@ -88,56 +88,45 @@ func (m *GlobalTrafficManager) startReporting() {
 // collectAndReport 收集所有服务流量并合并上报
 func (m *GlobalTrafficManager) collectAndReport() {
 	m.mu.Lock()
-	
-	// 如果没有流量，直接返回
+
 	if len(m.serviceTraffic) == 0 {
 		m.mu.Unlock()
 		return
 	}
 
-	// 复制当前所有流量数据（避免长时间持锁）
-	trafficSnapshot := make(map[string]*ServiceTraffic)
-	reportData := make(map[string]struct {
-		up   int64
-		down int64
-	})
+	reportItems := make([]TrafficReportItem, 0, len(m.serviceTraffic))
 
 	for name, traffic := range m.serviceTraffic {
 		traffic.mu.Lock()
-		if traffic.UpBytes > 0 || traffic.DownBytes > 0 {
-			trafficSnapshot[name] = traffic
-			reportData[name] = struct {
-				up   int64
-				down int64
-			}{
-				up:   traffic.UpBytes,
-				down: traffic.DownBytes,
-			}
+		up := traffic.UpBytes
+		down := traffic.DownBytes
+		if up > 0 || down > 0 {
+			traffic.UpBytes = 0
+			traffic.DownBytes = 0
 		}
 		traffic.mu.Unlock()
+
+		if up > 0 || down > 0 {
+			reportItems = append(reportItems, TrafficReportItem{
+				N: name,
+				U: up,
+				D: down,
+			})
+		}
 	}
+
 	m.mu.Unlock()
 
-	// 如果没有需要上报的流量，返回
-	if len(reportData) == 0 {
+	if len(reportItems) == 0 {
 		return
 	}
 
-	// 构建上报数据数组（保持每个服务独立）
-	reportItems := make([]TrafficReportItem, 0, len(reportData))
 	var totalUp, totalDown int64
-	
-	for serviceName, data := range reportData {
-		reportItems = append(reportItems, TrafficReportItem{
-			N: serviceName, // 保持服务名不变
-			U: data.up,
-			D: data.down,
-		})
-		totalUp += data.up
-		totalDown += data.down
+	for _, item := range reportItems {
+		totalUp += item.U
+		totalDown += item.D
 	}
 
-	// 批量发送上报请求（一次HTTP请求包含所有服务）
 	success, err := sendBatchTrafficReport(m.ctx, reportItems)
 	if err != nil {
 		fmt.Printf("❌ 全局流量上报失败: %v (总流量: ↑%d ↓%d, %d个服务)\n", err, totalUp, totalDown, len(reportItems))
@@ -146,36 +135,6 @@ func (m *GlobalTrafficManager) collectAndReport() {
 
 	if !success {
 		fmt.Printf("⚠️ 全局流量上报未成功 (总流量: ↑%d ↓%d, %d个服务)\n", totalUp, totalDown, len(reportItems))
-		return
-	}
-
-	// 上报成功，清空已上报的流量
-	m.clearReportedTraffic(reportData)
-}
-
-// clearReportedTraffic 清空已成功上报的流量
-func (m *GlobalTrafficManager) clearReportedTraffic(reportedData map[string]struct {
-	up   int64
-	down int64
-}) {
-	m.mu.Lock()
-	defer m.mu.Unlock()
-
-	for serviceName, reported := range reportedData {
-		if traffic, exists := m.serviceTraffic[serviceName]; exists {
-			traffic.mu.Lock()
-			// 减去已上报的流量
-			traffic.UpBytes -= reported.up
-			traffic.DownBytes -= reported.down
-
-			// 如果流量归零，从map中删除该服务记录（避免内存泄漏）
-			if traffic.UpBytes <= 0 && traffic.DownBytes <= 0 {
-				traffic.mu.Unlock()
-				delete(m.serviceTraffic, serviceName)
-			} else {
-				traffic.mu.Unlock()
-			}
-		}
 	}
 }
 

go-gost/x/socket/websocket_reporter.go

@@ -845,6 +845,13 @@ func (w *WebSocketReporter) routeCommand(cmd CommandMessage) {
 		response.Data = tcpPingResult
 		// needSaveConfig = false (默认值)
 
+	// UDP Ping 诊断命令（只读，不需要保存配置）
+	case "UdpPing":
+		var udpPingResult TcpPingResponse
+		udpPingResult, err = w.handleUdpPing(cmd.Data)
+		response.Type = "UdpPingResponse"
+		response.Data = udpPingResult
+
 	// Service monitor check (read-only)
 	case "ServiceMonitorCheck":
 		var checkResult ServiceMonitorCheckResult
@@ -1673,6 +1680,64 @@ func (w *WebSocketReporter) handleTcpPing(data interface{}) (TcpPingResponse, er
 	return response, nil
 }
 
+func (w *WebSocketReporter) handleUdpPing(data interface{}) (TcpPingResponse, error) {
+	jsonData, err := json.Marshal(data)
+	if err != nil {
+		return TcpPingResponse{}, fmt.Errorf("序列化UDP ping数据失败: %v", err)
+	}
+
+	var req TcpPingRequest
+	if err := json.Unmarshal(jsonData, &req); err != nil {
+		return TcpPingResponse{}, fmt.Errorf("解析UDP ping请求失败: %v", err)
+	}
+
+	if net.ParseIP(req.IP) == nil && !isValidHostname(req.IP) {
+		return TcpPingResponse{
+			IP:           req.IP,
+			Port:         req.Port,
+			Success:      false,
+			ErrorMessage: "无效的IP地址或主机名",
+			RequestId:    req.RequestId,
+		}, nil
+	}
+
+	if req.Port <= 0 || req.Port > 65535 {
+		return TcpPingResponse{
+			IP:           req.IP,
+			Port:         req.Port,
+			Success:      false,
+			ErrorMessage: "无效的端口号，范围应为1-65535",
+			RequestId:    req.RequestId,
+		}, nil
+	}
+
+	if req.Count <= 0 {
+		req.Count = 4
+	}
+	if req.Timeout <= 0 {
+		req.Timeout = 5000
+	}
+
+	avgTime, packetLoss, err := udpPingHost(req.IP, req.Port, req.Count, req.Timeout)
+
+	response := TcpPingResponse{
+		IP:        req.IP,
+		Port:      req.Port,
+		RequestId: req.RequestId,
+	}
+
+	if err != nil {
+		response.Success = false
+		response.ErrorMessage = err.Error()
+	} else {
+		response.Success = true
+		response.AverageTime = avgTime
+		response.PacketLoss = packetLoss
+	}
+
+	return response, nil
+}
+
 // handleServiceMonitorCheck executes a service monitor check on this node.
 // It always returns a result (command execution is considered successful even if the check fails).
 func (w *WebSocketReporter) handleServiceMonitorCheck(data interface{}) (ServiceMonitorCheckResult, error) {
@@ -1951,6 +2016,76 @@ func tcpPingHost(ip string, port int, count int, timeoutMs int) (float64, float6
 	return avgTime, packetLoss, nil
 }
 
+func udpPingHost(ip string, port int, count int, timeoutMs int) (float64, float64, error) {
+	var totalTime float64
+	var successCount int
+
+	timeout := time.Duration(timeoutMs) * time.Millisecond
+	target := net.JoinHostPort(ip, fmt.Sprintf("%d", port))
+
+	fmt.Printf("🔍 开始UDP ping测试: %s，次数: %d，超时: %dms\n", target, count, timeoutMs)
+
+	if net.ParseIP(ip) == nil {
+		fmt.Printf("🔍 检测到域名，正在解析DNS...\n")
+		dnsStart := time.Now()
+
+		addrs, err := net.LookupHost(ip)
+		dnsDuration := time.Since(dnsStart)
+
+		if err != nil {
+			return 0, 100.0, fmt.Errorf("DNS解析失败: %v", err)
+		}
+		if len(addrs) == 0 {
+			return 0, 100.0, fmt.Errorf("DNS解析未返回任何IP地址")
+		}
+
+		fmt.Printf("✅ DNS解析完成 (%.2fms)，解析到 %d 个IP: %v\n",
+			dnsDuration.Seconds()*1000, len(addrs), addrs)
+
+		target = net.JoinHostPort(addrs[0], fmt.Sprintf("%d", port))
+		fmt.Printf("🎯 使用IP地址进行测试: %s\n", target)
+	} else {
+		fmt.Printf("🎯 使用IP地址进行测试: %s\n", target)
+	}
+
+	addr, err := net.ResolveUDPAddr("udp", target)
+	if err != nil {
+		return 0, 100.0, fmt.Errorf("解析UDP地址失败: %v", err)
+	}
+
+	for i := 0; i < count; i++ {
+		start := time.Now()
+
+		conn, err := net.DialTimeout("udp", addr.String(), timeout)
+
+		elapsed := time.Since(start)
+
+		if err != nil {
+			fmt.Printf("  第%d次UDP连接失败: %v (%.2fms)\n", i+1, err, elapsed.Seconds()*1000)
+		} else {
+			fmt.Printf("  第%d次UDP连接成功: %.2fms\n", i+1, elapsed.Seconds()*1000)
+			conn.Close()
+			totalTime += elapsed.Seconds() * 1000
+			successCount++
+		}
+
+		if i < count-1 {
+			time.Sleep(100 * time.Millisecond)
+		}
+	}
+
+	if successCount == 0 {
+		return 0, 100.0, fmt.Errorf("所有UDP连接尝试都失败")
+	}
+
+	avgTime := totalTime / float64(successCount)
+	packetLoss := float64(count-successCount) / float64(count) * 100
+
+	fmt.Printf("✅ UDP ping完成: 平均连接时间 %.2fms，失败率 %.1f%%\n", avgTime, packetLoss)
+
+	return avgTime, packetLoss, nil
+}
+
 // isValidHostname 验证主机名格式
 func isValidHostname(hostname string) bool {
 	if len(hostname) == 0 || len(hostname) > 253 {

vite-frontend/src/App.tsx

@@ -1,5 +1,11 @@
-import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
-import { useEffect } from "react";
+import {
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+  Navigate,
+} from "react-router-dom";
+import { useEffect, useState } from "react";
 import { AnimatePresence } from "framer-motion";
 
 import IndexPage from "@/pages/index";
@@ -21,8 +27,8 @@ import H5SimpleLayout from "@/layouts/h5-simple";
 import { isLoggedIn } from "@/utils/auth";
 import { siteConfig, updateSiteConfig } from "@/config/site";
 import { useH5Mode } from "@/hooks/useH5Mode";
+import { SESSION_UPDATED_EVENT } from "@/utils/session";
 
-// 简化的路由保护组件 - 使用 React Router 导航避免循环
 const ProtectedRoute = ({
   children,
   useSimpleLayout = false,
@@ -32,13 +38,30 @@ const ProtectedRoute = ({
   useSimpleLayout?: boolean;
   skipLayout?: boolean;
 }) => {
-  const authenticated = isLoggedIn();
   const isH5 = useH5Mode();
   const navigate = useNavigate();
+  const [authenticated, setAuthenticated] = useState(() => isLoggedIn());
+
+  useEffect(() => {
+    const handleSessionChange = () => {
+      const loggedIn = isLoggedIn();
+
+      setAuthenticated(loggedIn);
+
+      if (!loggedIn) {
+        navigate("/", { replace: true });
+      }
+    };
+
+    window.addEventListener(SESSION_UPDATED_EVENT, handleSessionChange);
+
+    return () => {
+      window.removeEventListener(SESSION_UPDATED_EVENT, handleSessionChange);
+    };
+  }, [navigate]);
 
   useEffect(() => {
     if (!authenticated) {
-      // 使用 React Router 导航，避免无限跳转
       navigate("/", { replace: true });
     }
   }, [authenticated, navigate]);
@@ -85,21 +108,39 @@ function App() {
   useEffect(() => {
     const updateBg = () => {
       const customBg = siteConfig.app_bg_image;
+
       if (customBg) {
         if (customBg === "theme") {
           document.documentElement.style.removeProperty("--custom-bg-image");
           document.documentElement.style.removeProperty("--custom-bg-color");
           document.documentElement.classList.add("has-theme-bg");
           document.documentElement.classList.remove("has-custom-bg");
-        } else if (customBg.startsWith("http") || customBg.startsWith("data:") || customBg.startsWith("/") || customBg.startsWith("blob:")) {
-          document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
-          document.documentElement.style.setProperty("--custom-bg-color", "transparent");
+        } else if (
+          customBg.startsWith("http") ||
+          customBg.startsWith("data:") ||
+          customBg.startsWith("/") ||
+          customBg.startsWith("blob:")
+        ) {
+          document.documentElement.style.setProperty(
+            "--custom-bg-image",
+            `url(${customBg})`,
+          );
+          document.documentElement.style.setProperty(
+            "--custom-bg-color",
+            "transparent",
+          );
           document.documentElement.classList.add("has-custom-bg");
           document.documentElement.classList.remove("has-theme-bg");
         } else {
           // Assume solid color like "#ffffff", "white", etc.
-          document.documentElement.style.setProperty("--custom-bg-image", "none");
-          document.documentElement.style.setProperty("--custom-bg-color", customBg);
+          document.documentElement.style.setProperty(
+            "--custom-bg-image",
+            "none",
+          );
+          document.documentElement.style.setProperty(
+            "--custom-bg-color",
+            customBg,
+          );
           document.documentElement.classList.add("has-custom-bg");
           document.documentElement.classList.remove("has-theme-bg");
         }
@@ -110,8 +151,10 @@ function App() {
         document.documentElement.classList.remove("has-theme-bg");
       }
     };
+
     updateBg();
     window.addEventListener("site-config-updated", updateBg);
+
     return () => {
       window.removeEventListener("site-config-updated", updateBg);
     };

vite-frontend/src/api/index.ts

@@ -149,9 +149,12 @@ export const deleteTunnelWithForwards = (data: {
     data,
   );
 export const previewBatchTunnelDelete = (ids: number[]) =>
-  Network.post<TunnelBatchDeletePreviewApiData>("/tunnel/batch-delete-preview", {
-    ids,
-  });
+  Network.post<TunnelBatchDeletePreviewApiData>(
+    "/tunnel/batch-delete-preview",
+    {
+      ids,
+    },
+  );
 export const batchDeleteTunnelsWithForwards = (data: {
   ids: number[];
   action: "replace" | "delete_forwards";
@@ -496,12 +499,14 @@ export const getServiceMonitorResults = (
   options?: { limit?: number; start?: number; end?: number },
 ) => {
   const params: Record<string, string> = {};
+
   if (options?.start != null && options?.end != null) {
     params.start = String(options.start);
     params.end = String(options.end);
   } else if (options?.limit != null) {
     params.limit = String(options.limit);
   }
+
   return Network.get<ServiceMonitorResultApiItem[]>(
     `/monitor/services/${monitorId}/results`,
     params,

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

@@ -7,13 +7,14 @@
  *  • "Reset to default" option
  */
 
+import type { ThemeMode } from "@/themes/registry";
+
 import React from "react";
 import toast from "react-hot-toast";
 
 import { Card, CardBody } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { useThemeContext } from "@/themes/context";
-import type { ThemeMode } from "@/themes/registry";
 
 // ─── Constants ──────────────────────────────────────────────────────────────
 
@@ -39,12 +40,14 @@ export const ThemeSettings: React.FC = () => {
   const handleModeChange = (m: ThemeMode) => {
     setMode(m);
     const label = m === "light" ? "亮色" : m === "dark" ? "暗色" : "跟随系统";
+
     toast.success(`已切换为${label}模式`);
   };
 
   const handleThemeSelect = (id: string) => {
     switchTheme(id);
     const theme = themes.find((t) => t.id === id);
+
     toast.success(`已切换主题「${theme?.name ?? id}」`);
   };
 
@@ -125,7 +128,13 @@ export const ThemeSettings: React.FC = () => {
                     <div className="flex-1" style={{ background: secondary }} />
                     <div className="flex-1" style={{ background: success }} />
                     <div className="flex-1" style={{ background: danger }} />
-                    <div className="flex-1" style={{ background: bg, borderLeft: "1px solid rgba(0,0,0,0.06)" }} />
+                    <div
+                      className="flex-1"
+                      style={{
+                        background: bg,
+                        borderLeft: "1px solid rgba(0,0,0,0.06)",
+                      }}
+                    />
                   </div>
 
                   {/* Info */}

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+
 import { cn } from "@/lib/utils";
 
 function Card({ className, style, ...props }: React.ComponentProps<"div">) {
@@ -7,16 +8,18 @@ function Card({ className, style, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "relative flex flex-col transition-all duration-300",
         "rounded-[24px] text-card-foreground shadow-[0_12px_40px_rgba(0,0,0,0.12)] dark:shadow-[0_12px_40px_rgba(0,0,0,0.4)]",
-        className
+        className,
       )}
+      data-slot="card"
       style={{
         ...style,
-        background: "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.2) 100%)",
-        boxShadow: "inset 0 1px 1px rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.1), 0 12px 40px rgba(0,0,0,0.12)",
+        background:
+          "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.2) 100%)",
+        boxShadow:
+          "inset 0 1px 1px rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.1), 0 12px 40px rgba(0,0,0,0.12)",
         backdropFilter: "blur(24px) saturate(180%)",
         WebkitBackdropFilter: "blur(24px) saturate(180%)",
       }}
-      data-slot="card"
       {...props}
     />
   );
@@ -63,11 +66,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div
-      className={cn("p-6", className)}
-      data-slot="card-content"
-      {...props}
-    />
+    <div className={cn("p-6", className)} data-slot="card-content" {...props} />
   );
 }
 

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

@@ -62,13 +62,15 @@ function DialogContent({
           "rounded-[24px] text-foreground shadow-[0_20px_60px_rgba(0,0,0,0.2)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.5)] border border-white/80 dark:border-white/10",
           className,
         )}
+        data-slot="dialog-content"
         style={{
-          background: "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.2) 100%)",
-          boxShadow: "inset 0 1px 1px rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.1), 0 20px 60px rgba(0,0,0,0.2)",
+          background:
+            "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 40%, rgba(255,255,255,0.05) 60%, rgba(255,255,255,0.2) 100%)",
+          boxShadow:
+            "inset 0 1px 1px rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.1), 0 20px 60px rgba(0,0,0,0.2)",
           backdropFilter: "blur(24px) saturate(180%)",
           WebkitBackdropFilter: "blur(24px) saturate(180%)",
         }}
-        data-slot="dialog-content"
         {...props}
       >
         <div className="flex flex-col flex-1 min-h-0 gap-4 p-6 rounded-[inherit] overflow-hidden bg-white/40 dark:bg-zinc-900/40 w-full h-full relative z-10 pointer-events-auto">

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

@@ -85,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 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",
+        "z-50 min-w-32 overflow-y-auto rounded-md border border-default-200 bg-white p-1.5 text-foreground shadow-lg max-h-[--radix-dropdown-menu-content-available-height] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] 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"
@@ -103,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 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",
+          "z-50 min-w-32 overflow-y-auto rounded-md border border-default-200 bg-white p-1.5 text-foreground shadow-md max-h-[--radix-dropdown-menu-content-available-height] [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] 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"

vite-frontend/src/config/site.ts

@@ -32,8 +32,10 @@ const getInitialConfig = () => {
     localStorage.getItem(CACHE_PREFIX + "app_favicon") || "";
   const cachedAppBgImage =
     localStorage.getItem(CACHE_PREFIX + "app_bg_image") || "";
-  const isCommercial = localStorage.getItem(CACHE_PREFIX + "is_commercial") === "true";
-  const hideFooterBrand = localStorage.getItem(CACHE_PREFIX + "hide_footer_brand") === "true";
+  const isCommercial =
+    localStorage.getItem(CACHE_PREFIX + "is_commercial") === "true";
+  const hideFooterBrand =
+    localStorage.getItem(CACHE_PREFIX + "hide_footer_brand") === "true";
 
   if (cachedAppName) {
     return {

vite-frontend/src/layouts/admin.tsx

@@ -198,19 +198,23 @@ export default function AdminLayout({
     if (adminFlag) {
       setMonitorAllowed(true);
       setMonitorAccessReason(null);
+
       return;
     }
 
     let cancelled = false;
+
     (async () => {
       try {
         const res = await getMonitorAccess();
+
         if (cancelled) return;
         if (res.code === 0 && res.data) {
           setMonitorAllowed(Boolean(res.data.allowed));
           setMonitorAccessReason(
-            res.data.allowed ? null : (res.data.reason || null),
+            res.data.allowed ? null : res.data.reason || null,
           );
+
           return;
         }
         // Fail open to preserve legacy navigation behavior.
@@ -376,7 +380,7 @@ export default function AdminLayout({
         ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
         ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
         ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
-        bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl
+        bg-white/70 dark:bg-zinc-900/70 backdrop-blur-3xl
         shadow-[0_10px_30px_rgba(0,0,0,0.1)]
         border border-white/80 dark:border-white/10
         z-50
@@ -398,7 +402,7 @@ export default function AdminLayout({
         </div>
 
         {/* 菜单导航 */}
-        <nav className="flex-1 px-4 overflow-y-auto overflow-x-hidden [scrollbar-width:none]">
+        <nav className="flex-1 px-4 overflow-y-auto overflow-x-hidden scrollbar-hide">
           <ul className="space-y-2">
             {filteredMenuItems.map((item) => {
               const isActive = location.pathname === item.path;
@@ -408,6 +412,7 @@ export default function AdminLayout({
               return (
                 <li key={item.path}>
                   <motion.button
+                    aria-disabled={isMonitorBlocked}
                     className={`
                        w-full flex items-center p-3 rounded-2xl text-left
                        relative min-h-[48px] overflow-hidden transition-colors
@@ -415,12 +420,11 @@ export default function AdminLayout({
                        ${
                          isActive
                            ? "text-primary dark:text-primary-400 font-semibold"
-                            : isMonitorBlocked
-                              ? "text-gray-500 dark:text-gray-400 font-medium"
-                              : "text-gray-600 dark:text-gray-300 font-medium"
+                           : isMonitorBlocked
+                             ? "text-gray-500 dark:text-gray-400 font-medium"
+                             : "text-gray-600 dark:text-gray-300 font-medium"
                        }
                      `}
-                    aria-disabled={isMonitorBlocked}
                     title={
                       isCollapsed
                         ? isMonitorBlocked
@@ -551,7 +555,7 @@ export default function AdminLayout({
         )}
 
         {/* 主内容 */}
-        <main className="flex-1 overflow-y-auto [scrollbar-width:none]">
+        <main className="flex-1 overflow-y-auto scrollbar-hide">
           <AnimatePresence mode="wait">
             <motion.div
               key={location.pathname}

vite-frontend/src/layouts/h5.tsx

@@ -114,15 +114,18 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
     }
 
     let cancelled = false;
+
     (async () => {
       try {
         const res = await getMonitorAccess();
+
         if (cancelled) return;
         if (res.code === 0 && res.data) {
           setMonitorAllowed(Boolean(res.data.allowed));
           setMonitorAccessReason(
-            res.data.allowed ? null : (res.data.reason || null),
+            res.data.allowed ? null : res.data.reason || null,
           );
+
           return;
         }
         setMonitorAllowed(true);

vite-frontend/src/main.tsx

@@ -13,7 +13,9 @@ const updateSW = registerSW({
     toast(
       (t) => (
         <div className="flex flex-col gap-3">
-          <span className="text-sm font-medium text-foreground">发现新版本，是否立即刷新以应用更新？</span>
+          <span className="text-sm font-medium text-foreground">
+            发现新版本，是否立即刷新以应用更新？
+          </span>
           <div className="flex gap-2 justify-end">
             <button
               className="px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 rounded-md transition-colors"
@@ -33,7 +35,7 @@ const updateSW = registerSW({
           </div>
         </div>
       ),
-      { duration: Infinity, position: "bottom-right" }
+      { duration: Infinity, position: "bottom-right" },
     );
   },
 });

vite-frontend/src/pages/config.tsx

@@ -89,7 +89,8 @@ const CONFIG_ITEMS: ConfigItem[] = [
   {
     key: "app_bg_image",
     label: "自定义背景",
-    description: "上传自定义背景图片（建议使用深色/浅色均可看清的图片，或使用半透明模糊效果）",
+    description:
+      "上传自定义背景图片（建议使用深色/浅色均可看清的图片，或使用半透明模糊效果）",
     type: "bg_image",
   },
   {
@@ -141,7 +142,8 @@ const CONFIG_ITEMS: ConfigItem[] = [
   {
     key: "monitor_tunnel_quality_enabled",
     label: "实时隧道质量检测",
-    description: "关闭后，前端停止自动刷新，后端停止实时隧道质量探测（全局配置）",
+    description:
+      "关闭后，前端停止自动刷新，后端停止实时隧道质量探测（全局配置）",
     type: "switch",
   },
   {
@@ -388,11 +390,13 @@ export default function ConfigPage() {
   const handleActivateLicense = async () => {
     if (!licenseKeyInput.trim()) {
       toast.error("请输入有效的商业授权码");
+
       return;
     }
     setActivatingLicense(true);
     try {
       const res = await activateLicense(licenseKeyInput.trim());
+
       if (res.code === 0) {
         toast.success("商业版授权激活成功！");
         setLicenseKeyInput("");
@@ -479,7 +483,9 @@ export default function ConfigPage() {
         if (changedKeys.includes("monitor_tunnel_quality_enabled")) {
           window.dispatchEvent(
             new CustomEvent("monitorTunnelQualityEnabledChanged", {
-              detail: { enabled: configs["monitor_tunnel_quality_enabled"] === "true" },
+              detail: {
+                enabled: configs["monitor_tunnel_quality_enabled"] === "true",
+              },
             }),
           );
         }
@@ -496,7 +502,11 @@ export default function ConfigPage() {
   // 检查配置项是否应该显示（依赖检查）
   const shouldShowItem = (item: ConfigItem): boolean => {
     // 隐藏商业版专属的设置项，它们会在专门的卡片中展示
-    if (["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(item.key)) {
+    if (
+      ["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(
+        item.key,
+      )
+    ) {
       return false;
     }
 
@@ -555,12 +565,16 @@ export default function ConfigPage() {
     }
   };
 
-  const handleBgImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleBgImageUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const file = e.target.files?.[0];
+
     if (!file) return;
 
     if (!file.type.startsWith("image/")) {
       toast.error("只能上传图片文件");
+
       return;
     }
 
@@ -568,8 +582,10 @@ export default function ConfigPage() {
     try {
       const compressedImage = await new Promise<string>((resolve, reject) => {
         const reader = new FileReader();
+
         reader.onload = (event) => {
           const img = new Image();
+
           img.onload = () => {
             const canvas = document.createElement("canvas");
             let width = img.width;
@@ -592,14 +608,17 @@ export default function ConfigPage() {
             canvas.width = width;
             canvas.height = height;
             const ctx = canvas.getContext("2d");
+
             if (!ctx) {
               reject(new Error("Canvas context is null"));
+
               return;
             }
             ctx.drawImage(img, 0, 0, width, height);
-            
+
             // Output as webp for better compression
             const dataUrl = canvas.toDataURL("image/webp", 0.8);
+
             resolve(dataUrl);
           };
           img.onerror = () => reject(new Error("图片加载失败"));
@@ -621,62 +640,66 @@ export default function ConfigPage() {
 
   const renderBgImageUploader = () => {
     const bgImage = configs["app_bg_image"] || "";
-    const isImage = bgImage.startsWith("http") || bgImage.startsWith("data:") || bgImage.startsWith("/") || bgImage.startsWith("blob:");
+    const isImage =
+      bgImage.startsWith("http") ||
+      bgImage.startsWith("data:") ||
+      bgImage.startsWith("/") ||
+      bgImage.startsWith("blob:");
     const isTheme = bgImage === "theme";
     const isSolidColor = bgImage && !isImage && !isTheme;
-    
+
     return (
       <div className="flex flex-col gap-4 w-full">
         <div className="flex flex-wrap items-center gap-4">
           <input
-            type="file"
-            accept="image/*"
             ref={bgImageFileInputRef}
+            accept="image/*"
             className="hidden"
+            type="file"
             onChange={handleBgImageUpload}
           />
           <Button
             color="primary"
+            isLoading={bgImageUploading}
             variant="flat"
             onPress={() => bgImageFileInputRef.current?.click()}
-            isLoading={bgImageUploading}
           >
             上传图片
           </Button>
           <Button
             color="secondary"
+            isDisabled={bgImageUploading || isTheme}
             variant="flat"
             onPress={() => handleConfigChange("app_bg_image", "theme")}
-            isDisabled={bgImageUploading || isTheme}
           >
             自适应纯色 (跟随深色模式)
           </Button>
           <Button
             color="default"
+            isDisabled={bgImageUploading || bgImage === "#ffffff"}
             variant="flat"
             onPress={() => handleConfigChange("app_bg_image", "#ffffff")}
-            isDisabled={bgImageUploading || bgImage === "#ffffff"}
           >
             白色纯色
           </Button>
           {bgImage && (
             <Button
               color="danger"
+              isDisabled={bgImageUploading}
               variant="flat"
               onPress={() => handleConfigChange("app_bg_image", "")}
-              isDisabled={bgImageUploading}
             >
               恢复默认
             </Button>
           )}
         </div>
-        
+
         {bgImage && isImage && (
           <div className="relative rounded-xl overflow-hidden border border-divider">
             <img
-              src={bgImage}
               alt="背景预览"
               className="w-full max-h-48 object-cover opacity-80"
+              src={bgImage}
             />
             <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end p-4">
               <span className="text-white text-sm font-medium">预览效果</span>
@@ -686,13 +709,15 @@ export default function ConfigPage() {
 
         {bgImage && isTheme && (
           <div className="relative rounded-xl border border-divider bg-background h-32 flex items-center justify-center">
-            <span className="text-foreground text-sm font-medium">当前为自适应纯色背景</span>
+            <span className="text-foreground text-sm font-medium">
+              当前为自适应纯色背景
+            </span>
           </div>
         )}
 
         {bgImage && isSolidColor && (
-          <div 
-            className="relative rounded-xl border border-divider h-32 flex items-center justify-center" 
+          <div
+            className="relative rounded-xl border border-divider h-32 flex items-center justify-center"
             style={{ backgroundColor: bgImage }}
           >
             <span className="text-gray-500 bg-white/80 dark:bg-black/80 px-2 py-1 rounded text-sm font-medium border border-gray-200 dark:border-gray-800 shadow-sm">
@@ -811,8 +836,8 @@ export default function ConfigPage() {
         <div className="flex flex-wrap items-center gap-2">
           <Button
             color="primary"
-            isLoading={uploading}
             isDisabled={isCommercialDisabled}
+            isLoading={uploading}
             size="sm"
             variant="flat"
             onPress={() => triggerBrandFilePicker(key)}
@@ -853,7 +878,10 @@ export default function ConfigPage() {
   const renderConfigItem = (item: ConfigItem) => {
     const isChanged =
       hasChanges && configs[item.key] !== originalConfigs[item.key];
-    const isCommercialDisabled = ["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(item.key) && configs.is_commercial !== "true";
+    const isCommercialDisabled =
+      ["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(
+        item.key,
+      ) && configs.is_commercial !== "true";
 
     switch (item.type) {
       case "bg_image":
@@ -872,13 +900,15 @@ export default function ConfigPage() {
                 ? "border-warning-300 data-[hover=true]:border-warning-400"
                 : "",
             }}
+            description={
+              isCommercialDisabled ? "需商业版授权才能修改此项" : undefined
+            }
+            isDisabled={isCommercialDisabled}
             placeholder={item.placeholder}
             size="md"
             value={configs[item.key] || ""}
             variant="bordered"
             onChange={(e) => handleConfigChange(item.key, e.target.value)}
-            isDisabled={isCommercialDisabled}
-            description={isCommercialDisabled ? "需商业版授权才能修改此项" : undefined}
           />
         );
 
@@ -888,12 +918,12 @@ export default function ConfigPage() {
             classNames={{
               wrapper: isChanged ? "border-warning-300" : "",
             }}
+            isDisabled={isCommercialDisabled}
             isSelected={configs[item.key] === "true"}
             size="sm"
             onValueChange={(checked) =>
               handleConfigChange(item.key, checked ? "true" : "false")
             }
-            isDisabled={isCommercialDisabled}
           >
             <span className="text-sm text-gray-700 dark:text-gray-300">
               {configs[item.key] === "true" ? "已启用" : "已禁用"}
@@ -1126,7 +1156,8 @@ export default function ConfigPage() {
             <div>
               <h2 className="text-xl font-semibold">商业版授权</h2>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                激活商业版授权以解锁自定义品牌功能（替换 Logo、应用名称，移除底部版权信息等）
+                激活商业版授权以解锁自定义品牌功能（替换
+                Logo、应用名称，移除底部版权信息等）
               </p>
             </div>
           </div>
@@ -1135,30 +1166,47 @@ export default function ConfigPage() {
         <CardBody className="pt-8">
           <div className="flex items-end gap-3 max-w-lg mb-6">
             <Input
+              description={
+                configs.is_commercial === "true"
+                  ? configs.license_expiry && configs.license_expiry !== "never"
+                    ? `已激活商业版授权 (有效期至: ${new Date(configs.license_expiry).toLocaleDateString()})`
+                    : "已激活商业版授权 (永久有效)"
+                  : "需商业授权才能修改站名、图标并隐藏页脚品牌"
+              }
+              isDisabled={configs.is_commercial === "true"}
               label="授权激活码"
               placeholder="请输入 FLVX- 开头的商业授权码"
               value={licenseKeyInput}
               variant="bordered"
               onChange={(e) => setLicenseKeyInput(e.target.value)}
-              isDisabled={configs.is_commercial === "true"}
-              description={configs.is_commercial === "true" ? (configs.license_expiry && configs.license_expiry !== "never" ? `已激活商业版授权 (有效期至: ${new Date(configs.license_expiry).toLocaleDateString()})` : "已激活商业版授权 (永久有效)") : "需商业授权才能修改站名、图标并隐藏页脚品牌"}
             />
             <Button
-              color="primary"
               className="mb-6"
-              isDisabled={configs.is_commercial === "true" || !licenseKeyInput.trim()}
+              color="primary"
+              isDisabled={
+                configs.is_commercial === "true" || !licenseKeyInput.trim()
+              }
               isLoading={activatingLicense}
               onPress={handleActivateLicense}
             >
               {configs.is_commercial === "true" ? "已授权" : "激活授权"}
             </Button>
           </div>
-          
+
           {configs.is_commercial === "true" && (
             <div className="space-y-6">
               <Divider className="my-2" />
-              <h3 className="text-md font-medium text-default-700">白标与品牌设置</h3>
-              {CONFIG_ITEMS.filter(item => ["app_name", "app_logo", "app_favicon", "hide_footer_brand"].includes(item.key)).map((item, index) => (
+              <h3 className="text-md font-medium text-default-700">
+                白标与品牌设置
+              </h3>
+              {CONFIG_ITEMS.filter((item) =>
+                [
+                  "app_name",
+                  "app_logo",
+                  "app_favicon",
+                  "hide_footer_brand",
+                ].includes(item.key),
+              ).map((item, index) => (
                 <div key={item.key}>
                   <div className="grid grid-cols-1 gap-6 md:grid-cols-[1fr_2fr]">
                     <div className="space-y-1">
@@ -1511,18 +1559,18 @@ export default function ConfigPage() {
       <AnimatePresence>
         {hasChanges && (
           <motion.div
-            initial={{ y: 100, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
-            exit={{ y: 100, opacity: 0 }}
-            transition={{ type: "spring", damping: 20, stiffness: 300 }}
             className="fixed bottom-6 right-6 z-50"
+            exit={{ y: 100, opacity: 0 }}
+            initial={{ y: 100, opacity: 0 }}
+            transition={{ type: "spring", damping: 20, stiffness: 300 }}
           >
             <Button
               isIconOnly
-              color="primary"
-              size="lg"
               className="w-12 h-12 rounded-full shadow-lg"
+              color="primary"
               isLoading={saving}
+              size="lg"
               onPress={handleSave}
             >
               {!saving && <SaveIcon className="w-5 h-5" />}

vite-frontend/src/pages/dashboard.tsx

@@ -651,25 +651,44 @@ export default function DashboardPage() {
       {/* 顶部个人状态和下拉菜单 */}
       <div className="flex justify-between items-center mb-6">
         <div>
-          <h1 className="text-2xl lg:text-3xl font-bold text-foreground">Good morning, {username}</h1>
-          <p className="text-sm text-default-500 mt-1">Here's what's happening with your network today.</p>
+          <h1 className="text-2xl lg:text-3xl font-bold text-foreground">
+            Good morning, {username}
+          </h1>
+          <p className="text-sm text-default-500 mt-1">
+            Here&apos;s what&apos;s happening with your network today.
+          </p>
         </div>
         <div className="flex items-center gap-3">
           <Dropdown placement="bottom-end">
             <DropdownTrigger>
               <Button
-                className="rounded-full w-10 h-10 min-w-0 bg-primary text-white font-bold text-sm shadow-[0_4px_12px_rgba(0,122,255,0.3)]"
                 isIconOnly
+                className="rounded-full w-10 h-10 min-w-0 bg-primary text-white font-bold text-sm shadow-[0_4px_12px_rgba(0,122,255,0.3)]"
                 variant="solid"
               >
                 {username.slice(0, 2).toUpperCase()}
               </Button>
             </DropdownTrigger>
-            <DropdownMenu aria-label="用户菜单" className="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border border-white/50 dark:border-white/10 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)]">
+            <DropdownMenu
+              aria-label="用户菜单"
+              className="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl border border-white/50 dark:border-white/10 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)]"
+            >
               <DropdownItem
                 key="profile"
                 startContent={
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                    />
+                  </svg>
                 }
                 onPress={() => navigate("/profile")}
               >
@@ -680,7 +699,17 @@ export default function DashboardPage() {
                 className="text-danger"
                 color="danger"
                 startContent={
-                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd" /></svg>
+                  <svg
+                    className="w-4 h-4"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      clipRule="evenodd"
+                      d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
                 }
                 onPress={handleLogout}
               >
@@ -1176,7 +1205,7 @@ export default function DashboardPage() {
               </Button>
             </div>
 
-            <div className="space-y-2 max-h-60 overflow-y-auto">
+            <div className="space-y-2 max-h-60 overflow-y-auto scrollbar-hide">
               {addressList.map((item) => (
                 <div
                   key={item.id}

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

@@ -1,4 +1,8 @@
 import type { AnnouncementData } from "@/api";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
 import { Button } from "@/shadcn-bridge/heroui/button";
 import {
   Modal,
@@ -7,8 +11,6 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@/shadcn-bridge/heroui/modal";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 
 interface AnnouncementModalProps {
   announcement: AnnouncementData;
@@ -24,7 +26,11 @@ export const AnnouncementModal = ({
   onDontShowAgain,
 }: AnnouncementModalProps) => {
   return (
-    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} size="2xl">
+    <Modal
+      isOpen={isOpen}
+      size="2xl"
+      onOpenChange={(open) => !open && onClose()}
+    >
       <ModalContent>
         <ModalHeader className="flex flex-col gap-1">平台公告</ModalHeader>
         <ModalBody>

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

@@ -50,7 +50,10 @@ export const FlowChartCard = ({
         ) : (
           <div className="h-64 lg:h-80 w-full">
             <ResponsiveContainer height="100%" width="100%">
-              <LineChart data={chartData} margin={{ top: 20, right: 0, left: -20, bottom: 0 }}>
+              <LineChart
+                data={chartData}
+                margin={{ top: 20, right: 0, left: -20, bottom: 0 }}
+              >
                 <XAxis
                   axisLine={false}
                   dataKey="time"
@@ -106,11 +109,7 @@ export const FlowChartCard = ({
                   }}
                   cursor={{ fill: "rgba(0, 122, 255, 0.05)" }}
                 />
-                <Line
-                  dataKey="flow"
-                  stroke="#007aff"
-                  type="monotone"
-                />
+                <Line dataKey="flow" stroke="#007aff" type="monotone" />
               </LineChart>
             </ResponsiveContainer>
           </div>

vite-frontend/src/pages/dashboard/components/metric-card.tsx

@@ -25,9 +25,7 @@ export const MetricCard = ({
             <p className="text-sm font-medium text-default-600 truncate">
               {title}
             </p>
-            <div
-              className={`p-2 rounded-xl flex-shrink-0 ${iconClassName}`}
-            >
+            <div className={`p-2 rounded-xl flex-shrink-0 ${iconClassName}`}>
               {icon}
             </div>
           </div>
@@ -35,9 +33,7 @@ export const MetricCard = ({
             {value}
           </p>
         </div>
-        <div className="mt-auto pt-4">
-          {bottomContent}
-        </div>
+        <div className="mt-auto pt-4">{bottomContent}</div>
       </CardBody>
     </Card>
   );

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

@@ -349,17 +349,22 @@ export const useDashboardData = (): DashboardDataState => {
 
       if (res.code === 0 && res.data && res.data.enabled === 1) {
         setAnnouncement(res.data);
-        
+
         try {
-          const storedTimeStr = localStorage.getItem("flvx_announcement_seen_time");
+          const storedTimeStr = localStorage.getItem(
+            "flvx_announcement_seen_time",
+          );
           const storedTime = storedTimeStr ? parseInt(storedTimeStr, 10) : 0;
           const updateTime = res.data.update_time || 0;
-          
+
           if (updateTime > storedTime) {
             setIsAnnouncementModalOpen(true);
           }
         } catch (err) {
-          console.warn("Failed to read localStorage for announcement state", err);
+          console.warn(
+            "Failed to read localStorage for announcement state",
+            err,
+          );
           setIsAnnouncementModalOpen(true);
         }
       } else {
@@ -376,7 +381,10 @@ export const useDashboardData = (): DashboardDataState => {
     setIsAnnouncementModalOpen(false);
     if (announcement && announcement.update_time) {
       try {
-        localStorage.setItem("flvx_announcement_seen_time", announcement.update_time.toString());
+        localStorage.setItem(
+          "flvx_announcement_seen_time",
+          announcement.update_time.toString(),
+        );
       } catch (err) {
         console.warn("Failed to set localStorage for announcement state", err);
       }

vite-frontend/src/pages/forward.tsx

@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
                   {sortedForwards.length} 条规则
                 </span>
               </div>
-              <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
+              <Card className="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
                 <DndContext
                   collisionDetection={pointerWithin}
                   sensors={sensors}
@@ -4188,8 +4188,10 @@ export default function ForwardPage() {
                   >
                     <Table
                       aria-label="全部规则列表"
+                      className="table-fixed min-w-[1160px]"
                       classNames={{
-                        wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
+                        wrapper:
+                          "bg-transparent p-0 shadow-none border-none overflow-auto rounded-[24px]",
                         th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                         td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                         tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
@@ -4327,7 +4329,7 @@ export default function ForwardPage() {
               return (
                 <div
                   key={`grouped-table-${group.userId}-${group.userName}`}
-                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                  className="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                 >
                   <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-5 py-4">
                     <div className="flex items-center gap-2">
@@ -4418,7 +4420,7 @@ export default function ForwardPage() {
                               headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-4 py-2.5"
                               titleClassName="truncate text-sm font-semibold text-default-700"
                               tunnel={tunnel}
-                              wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                              wrapperClassName="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                               onToggleCollapsed={() =>
                                 toggleTunnelGroupCollapsed(
                                   group.userId,
@@ -4439,7 +4441,8 @@ export default function ForwardPage() {
                                     aria-label={`${group.userName}-${tunnel.tunnelName}规则列表`}
                                     className={`table-fixed ${FORWARD_GROUPED_TABLE_MIN_WIDTH_CLASS}`}
                                     classNames={{
-                                      wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                                      wrapper:
+                                        "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                                       th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                                       td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                                       tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -4976,7 +4979,7 @@ export default function ForwardPage() {
               </Button>
             </div>
 
-            <div className="space-y-2 max-h-60 overflow-y-auto">
+            <div className="space-y-2 max-h-60 overflow-y-auto scrollbar-hide">
               {addressList.map((item) => (
                 <div
                   key={item.id}
@@ -5281,7 +5284,7 @@ export default function ForwardPage() {
                   </div>
 
                   <div
-                    className="max-h-40 overflow-y-auto space-y-1"
+                    className="max-h-40 overflow-y-auto space-y-1 scrollbar-hide"
                     style={{
                       scrollbarWidth: "thin",
                       scrollbarColor: "rgb(156 163 175) transparent",
@@ -5447,7 +5450,7 @@ export default function ForwardPage() {
 
                     {/* 统计摘要 */}
                     <div className="grid grid-cols-3 gap-3">
-                      <div className="text-center p-3 bg-default-100 dark:bg-gray-800 rounded-lg border border-divider">
+                      <div className="text-center p-3 bg-default-100 rounded-lg border border-divider">
                         <div className="text-2xl font-bold text-foreground">
                           {diagnosisProgress.total > 0
                             ? diagnosisProgress.total
@@ -5519,7 +5522,7 @@ export default function ForwardPage() {
                           return (
                             <div
                               key={title}
-                              className="border border-divider rounded-lg overflow-hidden bg-white dark:bg-gray-800"
+                              className="border border-divider rounded-lg overflow-hidden"
                             >
                               <div className="bg-primary/10 dark:bg-primary/20 px-3 py-2 border-b border-divider">
                                 <h3 className="text-sm font-semibold text-primary">
@@ -5527,7 +5530,7 @@ export default function ForwardPage() {
                                 </h3>
                               </div>
                               <table className="w-full text-sm">
-                                <thead className="bg-default-100 dark:bg-gray-700">
+                                <thead className="bg-default-100">
                                   <tr>
                                     <th className="px-3 py-2 text-left font-semibold text-xs">
                                       路径
@@ -5546,7 +5549,7 @@ export default function ForwardPage() {
                                     </th>
                                   </tr>
                                 </thead>
-                                <tbody className="divide-y divide-divider bg-white dark:bg-gray-800">
+                                <tbody className="divide-y divide-divider bg-content1">
                                   {results.map((result, index) => {
                                     const isDiagnosing = Boolean(
                                       result.diagnosing,
@@ -5565,7 +5568,7 @@ export default function ForwardPage() {
                                           isDiagnosing
                                             ? "bg-warning-50 dark:bg-warning-900/20"
                                             : isSuccess
-                                              ? "bg-white dark:bg-gray-800"
+                                              ? "bg-content1"
                                               : "bg-danger-50 dark:bg-danger-900/30"
                                         }`}
                                       >
@@ -5752,7 +5755,7 @@ export default function ForwardPage() {
                                       isDiagnosing
                                         ? "border-warning-200 dark:border-warning-300/30 bg-warning-50 dark:bg-warning-900/20"
                                         : isSuccess
-                                          ? "border-divider bg-white dark:bg-gray-800"
+                                          ? "border-divider bg-content1"
                                           : "border-danger-200 dark:border-danger-300/30 bg-danger-50 dark:bg-danger-900/30"
                                     }`}
                                   >
@@ -5940,7 +5943,7 @@ export default function ForwardPage() {
                   </div>
                 )}
               </ModalBody>
-              <ModalFooter className="bg-transparent border-t border-white/20 dark:border-white/10">
+              <ModalFooter className="bg-transparent border-t border-divider">
                 <Button variant="light" onPress={onClose}>
                   关闭
                 </Button>

vite-frontend/src/pages/group.tsx

@@ -24,7 +24,6 @@ import {
   TableRow,
 } from "@/shadcn-bridge/heroui/table";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
-
 import {
   assignGroupPermission,
   assignTunnelsToGroup,
@@ -477,451 +476,454 @@ export default function GroupPage() {
       ) : (
         <>
           <Card>
-        <CardHeader className="flex flex-row items-center gap-3 pb-2">
-          <h3 className="text-lg font-semibold">隧道分组</h3>
-          <Button
-            className="h-7 px-3 text-xs font-medium min-w-0 shadow-sm"
-            color="primary"
-            size="sm"
-            onPress={openCreateTunnelGroup}
-          >
-            新建
-          </Button>
-        </CardHeader>
-        <CardBody>
-          <Table
-            aria-label="隧道分组列表"
+            <CardHeader className="flex flex-row items-center gap-3 pb-2">
+              <h3 className="text-lg font-semibold">隧道分组</h3>
+              <Button
+                className="h-7 px-3 text-xs font-medium min-w-0 shadow-sm"
+                color="primary"
+                size="sm"
+                onPress={openCreateTunnelGroup}
+              >
+                新建
+              </Button>
+            </CardHeader>
+            <CardBody>
+              <Table
+                aria-label="隧道分组列表"
+                classNames={{
+                  wrapper:
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
+                  th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
+                  td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                  tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+                }}
+              >
+                <TableHeader>
+                  <TableColumn>名称</TableColumn>
+                  <TableColumn>隧道</TableColumn>
+                  <TableColumn>状态</TableColumn>
+                  <TableColumn>创建时间</TableColumn>
+                  <TableColumn>操作</TableColumn>
+                </TableHeader>
+                <TableBody emptyContent="暂无隧道分组" items={tunnelGroups}>
+                  {(item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell>
+                        {item.tunnelNames.length > 0
+                          ? item.tunnelNames.join("、")
+                          : "-"}
+                      </TableCell>
+                      <TableCell>
+                        <Chip
+                          color={item.status === 1 ? "success" : "danger"}
+                          size="sm"
+                        >
+                          {item.status === 1 ? "启用" : "停用"}
+                        </Chip>
+                      </TableCell>
+                      <TableCell>{formatDate(item.createdTime)}</TableCell>
+                      <TableCell>
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            variant="flat"
+                            onPress={() => openAssignTunnels(item)}
+                          >
+                            分配隧道
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="light"
+                            onPress={() => openEditTunnelGroup(item)}
+                          >
+                            编辑
+                          </Button>
+                          <Button
+                            color="danger"
+                            size="sm"
+                            variant="light"
+                            onPress={() => handleDeleteTunnelGroup(item.id)}
+                          >
+                            删除
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </CardBody>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center gap-3 pb-2">
+              <h3 className="text-lg font-semibold">用户分组</h3>
+              <Button
+                className="h-7 px-3 text-xs font-medium min-w-0 shadow-sm"
+                color="primary"
+                size="sm"
+                onPress={openCreateUserGroup}
+              >
+                新建
+              </Button>
+            </CardHeader>
+            <CardBody>
+              <Table
+                aria-label="用户分组列表"
+                classNames={{
+                  wrapper:
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
+                  th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
+                  td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                  tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+                }}
+              >
+                <TableHeader>
+                  <TableColumn>名称</TableColumn>
+                  <TableColumn>用户</TableColumn>
+                  <TableColumn>状态</TableColumn>
+                  <TableColumn>创建时间</TableColumn>
+                  <TableColumn>操作</TableColumn>
+                </TableHeader>
+                <TableBody emptyContent="暂无用户分组" items={userGroups}>
+                  {(item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>{item.name}</TableCell>
+                      <TableCell>
+                        {item.userNames.length > 0
+                          ? item.userNames.join("、")
+                          : "-"}
+                      </TableCell>
+                      <TableCell>
+                        <Chip
+                          color={item.status === 1 ? "success" : "danger"}
+                          size="sm"
+                        >
+                          {item.status === 1 ? "启用" : "停用"}
+                        </Chip>
+                      </TableCell>
+                      <TableCell>{formatDate(item.createdTime)}</TableCell>
+                      <TableCell>
+                        <div className="flex gap-2">
+                          <Button
+                            size="sm"
+                            variant="flat"
+                            onPress={() => openAssignUsers(item)}
+                          >
+                            分配用户
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="light"
+                            onPress={() => openEditUserGroup(item)}
+                          >
+                            编辑
+                          </Button>
+                          <Button
+                            color="danger"
+                            size="sm"
+                            variant="light"
+                            onPress={() => handleDeleteUserGroup(item.id)}
+                          >
+                            删除
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </CardBody>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <h3 className="text-lg font-semibold">权限分配</h3>
+            </CardHeader>
+            <CardBody className="space-y-4">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:items-end">
+                <Select
+                  items={userGroups}
+                  label="用户分组"
+                  selectedKeys={
+                    selectedUserGroupId ? [String(selectedUserGroupId)] : []
+                  }
+                  onSelectionChange={(keys) => {
+                    const key = Array.from(keys as Set<React.Key>)[0];
+
+                    setSelectedUserGroupId(key ? Number(key) : null);
+                  }}
+                >
+                  {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
+                </Select>
+                <Select
+                  items={tunnelGroups}
+                  label="隧道分组"
+                  selectedKeys={
+                    selectedTunnelGroupId ? [String(selectedTunnelGroupId)] : []
+                  }
+                  onSelectionChange={(keys) => {
+                    const key = Array.from(keys as Set<React.Key>)[0];
+
+                    setSelectedTunnelGroupId(key ? Number(key) : null);
+                  }}
+                >
+                  {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
+                </Select>
+                <Button
+                  className="md:self-end md:justify-self-start whitespace-nowrap px-4"
+                  color="primary"
+                  isLoading={savingPermission}
+                  size="sm"
+                  onPress={handleAssignPermission}
+                >
+                  分配
+                </Button>
+              </div>
+
+              <Table
+                aria-label="分组权限列表"
+                classNames={{
+                  wrapper:
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
+                  th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
+                  td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                  tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+                }}
+              >
+                <TableHeader>
+                  <TableColumn>ID</TableColumn>
+                  <TableColumn>用户分组</TableColumn>
+                  <TableColumn>隧道分组</TableColumn>
+                  <TableColumn>创建时间</TableColumn>
+                  <TableColumn>操作</TableColumn>
+                </TableHeader>
+                <TableBody emptyContent="暂无权限分配记录" items={permissions}>
+                  {(item) => (
+                    <TableRow key={item.id}>
+                      <TableCell>{item.id}</TableCell>
+                      <TableCell>
+                        {item.userGroupName || item.userGroupId}
+                      </TableCell>
+                      <TableCell>
+                        {item.tunnelGroupName || item.tunnelGroupId}
+                      </TableCell>
+                      <TableCell>{formatDate(item.createdTime)}</TableCell>
+                      <TableCell>
+                        <Button
+                          color="danger"
+                          size="sm"
+                          variant="light"
+                          onPress={() => handleRemovePermission(item.id)}
+                        >
+                          回收
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </CardBody>
+          </Card>
+
+          <Modal
+            backdrop="blur"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
-              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
-              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
             }}
+            isOpen={tunnelGroupModalOpen}
+            onOpenChange={onTunnelGroupModalChange}
           >
-            <TableHeader>
-              <TableColumn>名称</TableColumn>
-              <TableColumn>隧道</TableColumn>
-              <TableColumn>状态</TableColumn>
-              <TableColumn>创建时间</TableColumn>
-              <TableColumn>操作</TableColumn>
-            </TableHeader>
-            <TableBody emptyContent="暂无隧道分组" items={tunnelGroups}>
-              {(item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.name}</TableCell>
-                  <TableCell>
-                    {item.tunnelNames.length > 0
-                      ? item.tunnelNames.join("、")
-                      : "-"}
-                  </TableCell>
-                  <TableCell>
-                    <Chip
-                      color={item.status === 1 ? "success" : "danger"}
-                      size="sm"
-                    >
-                      {item.status === 1 ? "启用" : "停用"}
-                    </Chip>
-                  </TableCell>
-                  <TableCell>{formatDate(item.createdTime)}</TableCell>
-                  <TableCell>
-                    <div className="flex gap-2">
-                      <Button
-                        size="sm"
-                        variant="flat"
-                        onPress={() => openAssignTunnels(item)}
-                      >
-                        分配隧道
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="light"
-                        onPress={() => openEditTunnelGroup(item)}
-                      >
-                        编辑
-                      </Button>
-                      <Button
-                        color="danger"
-                        size="sm"
-                        variant="light"
-                        onPress={() => handleDeleteTunnelGroup(item.id)}
-                      >
-                        删除
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardBody>
-      </Card>
+            <ModalContent>
+              <ModalHeader>
+                {editingTunnelGroup ? "编辑隧道分组" : "新建隧道分组"}
+              </ModalHeader>
+              <ModalBody className="space-y-3">
+                <Input
+                  label="分组名称"
+                  value={groupName}
+                  onChange={(e) => setGroupName(e.target.value)}
+                />
+                <Select
+                  label="状态"
+                  selectedKeys={[groupStatus]}
+                  onSelectionChange={(keys) => {
+                    const key = Array.from(keys as Set<React.Key>)[0];
 
-      <Card>
-        <CardHeader className="flex flex-row items-center gap-3 pb-2">
-          <h3 className="text-lg font-semibold">用户分组</h3>
-          <Button
-            className="h-7 px-3 text-xs font-medium min-w-0 shadow-sm"
-            color="primary"
-            size="sm"
-            onPress={openCreateUserGroup}
-          >
-            新建
-          </Button>
-        </CardHeader>
-        <CardBody>
-          <Table
-            aria-label="用户分组列表"
+                    if (key) {
+                      setGroupStatus(String(key));
+                    }
+                  }}
+                >
+                  <SelectItem key="1">启用</SelectItem>
+                  <SelectItem key="0">停用</SelectItem>
+                </Select>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onTunnelGroupModalClose}>
+                  取消
+                </Button>
+                <Button
+                  color="primary"
+                  isLoading={savingGroup}
+                  onPress={saveTunnelGroup}
+                >
+                  保存
+                </Button>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
+
+          <Modal
+            backdrop="blur"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
-              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
-              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
             }}
+            isOpen={userGroupModalOpen}
+            onOpenChange={onUserGroupModalChange}
           >
-            <TableHeader>
-              <TableColumn>名称</TableColumn>
-              <TableColumn>用户</TableColumn>
-              <TableColumn>状态</TableColumn>
-              <TableColumn>创建时间</TableColumn>
-              <TableColumn>操作</TableColumn>
-            </TableHeader>
-            <TableBody emptyContent="暂无用户分组" items={userGroups}>
-              {(item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.name}</TableCell>
-                  <TableCell>
-                    {item.userNames.length > 0
-                      ? item.userNames.join("、")
-                      : "-"}
-                  </TableCell>
-                  <TableCell>
-                    <Chip
-                      color={item.status === 1 ? "success" : "danger"}
-                      size="sm"
-                    >
-                      {item.status === 1 ? "启用" : "停用"}
-                    </Chip>
-                  </TableCell>
-                  <TableCell>{formatDate(item.createdTime)}</TableCell>
-                  <TableCell>
-                    <div className="flex gap-2">
-                      <Button
-                        size="sm"
-                        variant="flat"
-                        onPress={() => openAssignUsers(item)}
-                      >
-                        分配用户
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="light"
-                        onPress={() => openEditUserGroup(item)}
-                      >
-                        编辑
-                      </Button>
-                      <Button
-                        color="danger"
-                        size="sm"
-                        variant="light"
-                        onPress={() => handleDeleteUserGroup(item.id)}
-                      >
-                        删除
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardBody>
-      </Card>
+            <ModalContent>
+              <ModalHeader>
+                {editingUserGroup ? "编辑用户分组" : "新建用户分组"}
+              </ModalHeader>
+              <ModalBody className="space-y-3">
+                <Input
+                  label="分组名称"
+                  value={groupName}
+                  onChange={(e) => setGroupName(e.target.value)}
+                />
+                <Select
+                  label="状态"
+                  selectedKeys={[groupStatus]}
+                  onSelectionChange={(keys) => {
+                    const key = Array.from(keys as Set<React.Key>)[0];
 
-      <Card>
-        <CardHeader>
-          <h3 className="text-lg font-semibold">权限分配</h3>
-        </CardHeader>
-        <CardBody className="space-y-4">
-          <div className="grid grid-cols-1 gap-3 md:grid-cols-3 md:items-end">
-            <Select
-              items={userGroups}
-              label="用户分组"
-              selectedKeys={
-                selectedUserGroupId ? [String(selectedUserGroupId)] : []
-              }
-              onSelectionChange={(keys) => {
-                const key = Array.from(keys as Set<React.Key>)[0];
+                    if (key) {
+                      setGroupStatus(String(key));
+                    }
+                  }}
+                >
+                  <SelectItem key="1">启用</SelectItem>
+                  <SelectItem key="0">停用</SelectItem>
+                </Select>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onUserGroupModalClose}>
+                  取消
+                </Button>
+                <Button
+                  color="primary"
+                  isLoading={savingGroup}
+                  onPress={saveUserGroup}
+                >
+                  保存
+                </Button>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
 
-                setSelectedUserGroupId(key ? Number(key) : null);
-              }}
-            >
-              {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
-            </Select>
-            <Select
-              items={tunnelGroups}
-              label="隧道分组"
-              selectedKeys={
-                selectedTunnelGroupId ? [String(selectedTunnelGroupId)] : []
-              }
-              onSelectionChange={(keys) => {
-                const key = Array.from(keys as Set<React.Key>)[0];
-
-                setSelectedTunnelGroupId(key ? Number(key) : null);
-              }}
-            >
-              {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
-            </Select>
-            <Button
-              className="md:self-end md:justify-self-start whitespace-nowrap px-4"
-              color="primary"
-              isLoading={savingPermission}
-              size="sm"
-              onPress={handleAssignPermission}
-            >
-              分配
-            </Button>
-          </div>
-
-          <Table
-            aria-label="分组权限列表"
+          <Modal
+            backdrop="blur"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
-              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
-              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
             }}
+            isOpen={tunnelAssignModalOpen}
+            onOpenChange={onTunnelAssignModalChange}
           >
-            <TableHeader>
-              <TableColumn>ID</TableColumn>
-              <TableColumn>用户分组</TableColumn>
-              <TableColumn>隧道分组</TableColumn>
-              <TableColumn>创建时间</TableColumn>
-              <TableColumn>操作</TableColumn>
-            </TableHeader>
-            <TableBody emptyContent="暂无权限分配记录" items={permissions}>
-              {(item) => (
-                <TableRow key={item.id}>
-                  <TableCell>{item.id}</TableCell>
-                  <TableCell>
-                    {item.userGroupName || item.userGroupId}
-                  </TableCell>
-                  <TableCell>
-                    {item.tunnelGroupName || item.tunnelGroupId}
-                  </TableCell>
-                  <TableCell>{formatDate(item.createdTime)}</TableCell>
-                  <TableCell>
-                    <Button
-                      color="danger"
-                      size="sm"
-                      variant="light"
-                      onPress={() => handleRemovePermission(item.id)}
-                    >
-                      回收
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardBody>
-      </Card>
+            <ModalContent>
+              <ModalHeader>分配隧道 - {assignTunnelGroup?.name}</ModalHeader>
+              <ModalBody className="min-w-0">
+                <Select
+                  className="min-w-0"
+                  classNames={{ trigger: "max-w-full" }}
+                  items={tunnels}
+                  label="选择隧道"
+                  selectedKeys={selectedTunnelKeys}
+                  selectionMode="multiple"
+                  onSelectionChange={(keys) => {
+                    setSelectedTunnelKeys(
+                      new Set(Array.from(keys as Set<React.Key>).map(String)),
+                    );
+                  }}
+                >
+                  {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
+                </Select>
+                <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">
+                  不选择任何隧道并保存将清空该分组成员。
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onTunnelAssignModalClose}>
+                  取消
+                </Button>
+                <Button
+                  color="primary"
+                  isLoading={savingAssign}
+                  onPress={saveAssignTunnels}
+                >
+                  保存
+                </Button>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
 
-      <Modal
-        backdrop="blur"
-        classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
-        }}
-        isOpen={tunnelGroupModalOpen}
-        onOpenChange={onTunnelGroupModalChange}
-      >
-        <ModalContent>
-          <ModalHeader>
-            {editingTunnelGroup ? "编辑隧道分组" : "新建隧道分组"}
-          </ModalHeader>
-          <ModalBody className="space-y-3">
-            <Input
-              label="分组名称"
-              value={groupName}
-              onChange={(e) => setGroupName(e.target.value)}
-            />
-            <Select
-              label="状态"
-              selectedKeys={[groupStatus]}
-              onSelectionChange={(keys) => {
-                const key = Array.from(keys as Set<React.Key>)[0];
-
-                if (key) {
-                  setGroupStatus(String(key));
-                }
-              }}
-            >
-              <SelectItem key="1">启用</SelectItem>
-              <SelectItem key="0">停用</SelectItem>
-            </Select>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant="light" onPress={onTunnelGroupModalClose}>
-              取消
-            </Button>
-            <Button
-              color="primary"
-              isLoading={savingGroup}
-              onPress={saveTunnelGroup}
-            >
-              保存
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-
-      <Modal
-        backdrop="blur"
-        classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
-        }}
-        isOpen={userGroupModalOpen}
-        onOpenChange={onUserGroupModalChange}
-      >
-        <ModalContent>
-          <ModalHeader>
-            {editingUserGroup ? "编辑用户分组" : "新建用户分组"}
-          </ModalHeader>
-          <ModalBody className="space-y-3">
-            <Input
-              label="分组名称"
-              value={groupName}
-              onChange={(e) => setGroupName(e.target.value)}
-            />
-            <Select
-              label="状态"
-              selectedKeys={[groupStatus]}
-              onSelectionChange={(keys) => {
-                const key = Array.from(keys as Set<React.Key>)[0];
-
-                if (key) {
-                  setGroupStatus(String(key));
-                }
-              }}
-            >
-              <SelectItem key="1">启用</SelectItem>
-              <SelectItem key="0">停用</SelectItem>
-            </Select>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant="light" onPress={onUserGroupModalClose}>
-              取消
-            </Button>
-            <Button
-              color="primary"
-              isLoading={savingGroup}
-              onPress={saveUserGroup}
-            >
-              保存
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-
-      <Modal
-        backdrop="blur"
-        classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
-        }}
-        isOpen={tunnelAssignModalOpen}
-        onOpenChange={onTunnelAssignModalChange}
-      >
-        <ModalContent>
-          <ModalHeader>分配隧道 - {assignTunnelGroup?.name}</ModalHeader>
-          <ModalBody className="min-w-0">
-            <Select
-              className="min-w-0"
-              classNames={{ trigger: "max-w-full" }}
-              items={tunnels}
-              label="选择隧道"
-              selectedKeys={selectedTunnelKeys}
-              selectionMode="multiple"
-              onSelectionChange={(keys) => {
-                setSelectedTunnelKeys(
-                  new Set(Array.from(keys as Set<React.Key>).map(String)),
-                );
-              }}
-            >
-              {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
-            </Select>
-            <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">
-              不选择任何隧道并保存将清空该分组成员。
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant="light" onPress={onTunnelAssignModalClose}>
-              取消
-            </Button>
-            <Button
-              color="primary"
-              isLoading={savingAssign}
-              onPress={saveAssignTunnels}
-            >
-              保存
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-
-      <Modal
-        backdrop="blur"
-        classNames={{
-          base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
-        }}
-        isOpen={userAssignModalOpen}
-        onOpenChange={onUserAssignModalChange}
-      >
-        <ModalContent>
-          <ModalHeader>分配用户 - {assignUserGroup?.name}</ModalHeader>
-          <ModalBody className="min-w-0">
-            <Select
-              className="min-w-0"
-              classNames={{ trigger: "max-w-full" }}
-              items={users}
-              label="选择用户"
-              selectedKeys={selectedUserKeys}
-              selectionMode="multiple"
-              onSelectionChange={(keys) => {
-                setSelectedUserKeys(
-                  new Set(Array.from(keys as Set<React.Key>).map(String)),
-                );
-              }}
-            >
-              {(item) => <SelectItem key={item.id}>{item.user}</SelectItem>}
-            </Select>
-            <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">
-              不选择任何用户并保存将清空该分组成员。
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button variant="light" onPress={onUserAssignModalClose}>
-              取消
-            </Button>
-            <Button
-              color="primary"
-              isLoading={savingAssign}
-              onPress={saveAssignUsers}
-            >
-              保存
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+          <Modal
+            backdrop="blur"
+            classNames={{
+              base: "!w-[calc(100%-32px)] !mx-auto sm:!w-full rounded-2xl overflow-hidden",
+            }}
+            isOpen={userAssignModalOpen}
+            onOpenChange={onUserAssignModalChange}
+          >
+            <ModalContent>
+              <ModalHeader>分配用户 - {assignUserGroup?.name}</ModalHeader>
+              <ModalBody className="min-w-0">
+                <Select
+                  className="min-w-0"
+                  classNames={{ trigger: "max-w-full" }}
+                  items={users}
+                  label="选择用户"
+                  selectedKeys={selectedUserKeys}
+                  selectionMode="multiple"
+                  onSelectionChange={(keys) => {
+                    setSelectedUserKeys(
+                      new Set(Array.from(keys as Set<React.Key>).map(String)),
+                    );
+                  }}
+                >
+                  {(item) => <SelectItem key={item.id}>{item.user}</SelectItem>}
+                </Select>
+                <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">
+                  不选择任何用户并保存将清空该分组成员。
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button variant="light" onPress={onUserAssignModalClose}>
+                  取消
+                </Button>
+                <Button
+                  color="primary"
+                  isLoading={savingAssign}
+                  onPress={saveAssignUsers}
+                >
+                  保存
+                </Button>
+              </ModalFooter>
+            </ModalContent>
+          </Modal>
         </>
       )}
     </AnimatedPage>

vite-frontend/src/pages/index.tsx

@@ -162,7 +162,9 @@ export default function IndexPage() {
           <Card className="w-full bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
             <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
               <BrandLogo className="w-14 h-14 rounded-2xl mb-4" size={56} />
-              <h1 className="text-2xl font-bold tracking-tight text-foreground">{siteConfig.name}</h1>
+              <h1 className="text-2xl font-bold tracking-tight text-foreground">
+                {siteConfig.name}
+              </h1>
               <p className="text-sm text-default-500 mt-2 font-medium">
                 Sign in to manage your networks
               </p>
@@ -171,7 +173,8 @@ export default function IndexPage() {
               <div className="flex flex-col gap-5">
                 <Input
                   classNames={{
-                    inputWrapper: "bg-white/50 dark:bg-black/50 backdrop-blur-md border border-white/60 dark:border-white/10 h-12 shadow-sm rounded-xl",
+                    inputWrapper:
+                      "bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/30 dark:border-white/10 h-12 shadow-sm rounded-xl",
                     input: "text-base font-medium",
                   }}
                   errorMessage={errors.username}
@@ -189,7 +192,8 @@ export default function IndexPage() {
 
                 <Input
                   classNames={{
-                    inputWrapper: "bg-white/50 dark:bg-black/50 backdrop-blur-md border border-white/60 dark:border-white/10 h-12 shadow-sm rounded-xl",
+                    inputWrapper:
+                      "bg-white/10 dark:bg-white/5 backdrop-blur-md border border-white/30 dark:border-white/10 h-12 shadow-sm rounded-xl",
                     input: "text-base font-medium tracking-wider",
                   }}
                   isDisabled={loading}
@@ -211,7 +215,11 @@ export default function IndexPage() {
                   isLoading={loading}
                   onPress={handleLogin}
                 >
-                  {loading ? (showCaptcha ? "Verifying..." : "Signing in...") : "Sign In"}
+                  {loading
+                    ? showCaptcha
+                      ? "Verifying..."
+                      : "Signing in..."
+                    : "Sign In"}
                 </Button>
               </div>
             </CardBody>

vite-frontend/src/pages/limit.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
+import { LayoutGrid, List } from "lucide-react";
 
 import {
   AnimatedPage,
@@ -18,7 +19,6 @@ import {
   ModalFooter,
 } from "@/shadcn-bridge/heroui/modal";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
-import { LayoutGrid, List } from "lucide-react";
 import {
   Table,
   TableHeader,
@@ -251,7 +251,11 @@ export default function LimitPage() {
             variant="flat"
             onPress={() => setViewMode(viewMode === "list" ? "grid" : "list")}
           >
-            {viewMode === "list" ? <LayoutGrid className="w-4 h-4" /> : <List className="w-4 h-4" />}
+            {viewMode === "list" ? (
+              <LayoutGrid className="w-4 h-4" />
+            ) : (
+              <List className="w-4 h-4" />
+            )}
           </Button>
           <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
             新增
@@ -263,153 +267,154 @@ export default function LimitPage() {
       {filteredRules.length > 0 ? (
         viewMode === "list" ? (
           <Card>
-          <Table
-            aria-label="限速规则列表"
-            className="overflow-x-auto min-w-full"
-            classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
-              th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
-              td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
-            }}
-          >
-            <TableHeader>
-              <TableColumn>规则名称</TableColumn>
-              <TableColumn>速度限制</TableColumn>
-              <TableColumn>操作</TableColumn>
-            </TableHeader>
-            <TableBody items={filteredRules}>
-              {(rule) => (
-                <TableRow key={rule.id}>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                       <div
-                         className={`shrink-0 w-2 h-2 rounded-full ${
-                           rule.status === 1 ? "bg-success" : "bg-danger"
-                         }`}
-                       />
-                       <span className="font-medium text-foreground text-sm">
-                         {rule.name}
-                       </span>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-sm font-mono text-default-600">
-                      {rule.speed} Mbps
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex flex-wrap items-center gap-1.5 min-w-max">
-                      <Button
-                        className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
+            <Table
+              aria-label="限速规则列表"
+              className="overflow-x-auto min-w-full"
+              classNames={{
+                wrapper:
+                  "bg-transparent p-0 shadow-none border-none overflow-auto rounded-[24px]",
+                th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
+                td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
+                tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              }}
+            >
+              <TableHeader>
+                <TableColumn>规则名称</TableColumn>
+                <TableColumn>速度限制</TableColumn>
+                <TableColumn>操作</TableColumn>
+              </TableHeader>
+              <TableBody items={filteredRules}>
+                {(rule) => (
+                  <TableRow key={rule.id}>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <div
+                          className={`shrink-0 w-2 h-2 rounded-full ${
+                            rule.status === 1 ? "bg-success" : "bg-danger"
+                          }`}
+                        />
+                        <span className="font-medium text-foreground text-sm">
+                          {rule.name}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm font-mono text-default-600">
+                        {rule.speed} Mbps
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap items-center gap-1.5 min-w-max">
+                        <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
+                          size="sm"
+                          variant="flat"
+                          onPress={() => handleEdit(rule)}
+                        >
+                          编辑
+                        </Button>
+                        <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
+                          size="sm"
+                          variant="flat"
+                          onPress={() => handleDelete(rule)}
+                        >
+                          删除
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </Card>
+        ) : (
+          <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 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>
+                  </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>
+
+                    <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="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
+                        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>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-          </Card>
-        ) : (
-        <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 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>
-                </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>
-
-                  <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>
-          ))}
-        </StaggerList>
+                  </CardBody>
+                </Card>
+              </StaggerItem>
+            ))}
+          </StaggerList>
         )
       ) : (
         /* 空状态 */

vite-frontend/src/pages/monitor.tsx

@@ -2,7 +2,13 @@ import type { MonitorNodeApiItem } from "@/api/types";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
-import { RefreshCw, LayoutGrid, List, Server, ArrowRightLeft } from "lucide-react";
+import {
+  RefreshCw,
+  LayoutGrid,
+  List,
+  Server,
+  ArrowRightLeft,
+} from "lucide-react";
 
 import { AnimatedPage } from "@/components/animated-page";
 import { Button } from "@/shadcn-bridge/heroui/button";
@@ -38,11 +44,16 @@ export default function MonitorPage() {
   const [viewMode, setViewMode] = useState<"list" | "grid">("list");
   const [activeTab, setActiveTab] = useState<MonitorTab>("nodes");
 
-  const [realtimeNodeStatus, setRealtimeNodeStatus] = useState<Record<number, "online" | "offline">>({});
-  const [realtimeNodeMetrics, setRealtimeNodeMetrics] = useState<Record<number, any>>({});
+  const [realtimeNodeStatus, setRealtimeNodeStatus] = useState<
+    Record<number, "online" | "offline">
+  >({});
+  const [realtimeNodeMetrics, setRealtimeNodeMetrics] = useState<
+    Record<number, any>
+  >({});
 
   const handleRealtimeMessage = useCallback((message: any) => {
     const nodeId = Number(message?.id ?? 0);
+
     if (!nodeId || Number.isNaN(nodeId)) return;
 
     const type = String(message?.type ?? "");
@@ -50,15 +61,18 @@ export default function MonitorPage() {
 
     if (type === "status") {
       const status = Number(payload);
+
       setRealtimeNodeStatus((prev) => ({
         ...prev,
         [nodeId]: status === 1 ? "online" : "offline",
       }));
+
       return;
     }
 
     if (type === "metric") {
       let raw = payload;
+
       if (typeof raw === "string") {
         try {
           raw = JSON.parse(raw);
@@ -77,7 +91,7 @@ export default function MonitorPage() {
           netOutSpeed: Number(metric.netOutSpeed ?? metric.net_out_speed ?? 0),
           tcpConns: Number(metric.tcpConns ?? metric.tcp_conns ?? 0),
           udpConns: Number(metric.udpConns ?? metric.udp_conns ?? 0),
-        }
+        },
       }));
     }
   }, []);
@@ -89,6 +103,7 @@ export default function MonitorPage() {
 
   const loadNodes = useCallback(async (options?: { silent?: boolean }) => {
     const silent = options?.silent ?? false;
+
     if (!silent) setNodesLoading(true);
     try {
       const response = await getMonitorNodes();
@@ -133,7 +148,9 @@ export default function MonitorPage() {
       .map((n) => ({
         id: Number(n.id),
         name: String(n.name ?? ""),
-        connectionStatus: realtimeNodeStatus[Number(n.id)] || (n.status === 1 ? "online" : "offline"),
+        connectionStatus:
+          realtimeNodeStatus[Number(n.id)] ||
+          (n.status === 1 ? "online" : "offline"),
         version: n.version,
       }));
 
@@ -151,6 +168,7 @@ export default function MonitorPage() {
       if (node.connectionStatus === "online") {
         onlineCount++;
         const metric = realtimeNodeMetrics[node.id];
+
         if (metric) {
           totalCpu += metric.cpuUsage;
           totalConns += metric.tcpConns + metric.udpConns;
@@ -161,6 +179,7 @@ export default function MonitorPage() {
     });
 
     const avgCpu = onlineCount > 0 ? totalCpu / onlineCount : 0;
+
     return {
       avgCpu,
       totalConns,
@@ -174,10 +193,14 @@ export default function MonitorPage() {
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
         <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
-            <span className="text-default-600 font-medium text-sm">System Load</span>
+            <span className="text-default-600 font-medium text-sm">
+              System Load
+            </span>
           </div>
           <div className="z-10 relative">
-            <span className="text-4xl font-bold text-foreground">{aggregateMetrics.avgCpu.toFixed(1)}%</span>
+            <span className="text-4xl font-bold text-foreground">
+              {aggregateMetrics.avgCpu.toFixed(1)}%
+            </span>
           </div>
           <div className="absolute bottom-0 left-0 right-0 h-12 flex items-end gap-1 px-6 pb-4 opacity-50 z-0">
             <div className="w-full bg-primary/40 h-2 rounded-t-sm" />
@@ -191,10 +214,14 @@ export default function MonitorPage() {
 
         <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
-            <span className="text-default-600 font-medium text-sm">Active Connections</span>
+            <span className="text-default-600 font-medium text-sm">
+              Active Connections
+            </span>
           </div>
           <div className="z-10 relative">
-            <span className="text-4xl font-bold text-foreground">{aggregateMetrics.totalConns}</span>
+            <span className="text-4xl font-bold text-foreground">
+              {aggregateMetrics.totalConns}
+            </span>
           </div>
           <div className="absolute bottom-0 left-0 right-0 h-12 flex items-end gap-1 px-6 pb-4 opacity-50 z-0">
             <div className="w-full bg-success/40 h-3.5 rounded-t-sm" />
@@ -208,10 +235,14 @@ export default function MonitorPage() {
 
         <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
-            <span className="text-default-600 font-medium text-sm">Bandwidth</span>
+            <span className="text-default-600 font-medium text-sm">
+              Bandwidth
+            </span>
           </div>
           <div className="z-10 relative">
-            <span className="text-4xl font-bold text-foreground">{formatBytesPerSecond(aggregateMetrics.totalBandwidth)}</span>
+            <span className="text-4xl font-bold text-foreground">
+              {formatBytesPerSecond(aggregateMetrics.totalBandwidth)}
+            </span>
           </div>
           <div className="absolute bottom-0 left-0 right-0 h-12 flex items-end gap-1 px-6 pb-4 opacity-50 z-0">
             <div className="w-full bg-secondary/40 h-2 rounded-t-sm" />
@@ -236,7 +267,11 @@ export default function MonitorPage() {
               variant="flat"
               onPress={() => setViewMode(viewMode === "list" ? "grid" : "list")}
             >
-              {viewMode === "list" ? <LayoutGrid className="w-4 h-4" /> : <List className="w-4 h-4" />}
+              {viewMode === "list" ? (
+                <LayoutGrid className="w-4 h-4" />
+              ) : (
+                <List className="w-4 h-4" />
+              )}
             </Button>
             {activeTab === "nodes" && (
               <Button

vite-frontend/src/pages/node.tsx

@@ -17,10 +17,10 @@ import {
   useSortable,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { LayoutGrid, List } from "lucide-react";
 
 import { SearchBar } from "@/components/search-bar";
 import { AnimatedPage } from "@/components/animated-page";
-import { LayoutGrid, List } from "lucide-react";
 import {
   Table,
   TableHeader,
@@ -699,7 +699,6 @@ export default function NodePage() {
 
   // 格式化流量
 
-
   const formatFlow = (bytes: number): string => {
     if (!Number.isFinite(bytes) || bytes <= 0) {
       return "0 B";
@@ -726,7 +725,6 @@ export default function NodePage() {
     return "未知链路";
   };
 
-
   // IPv4/IPv6 格式验证（仅用于判定地址族）
   const ipv4Regex =
     /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
@@ -1650,10 +1648,12 @@ export default function NodePage() {
                 {/* 视图切换按钮 */}
                 <Button
                   isIconOnly
+                  className="text-default-600 hidden sm:flex"
                   size="sm"
                   variant="flat"
-                  className="text-default-600 hidden sm:flex"
-                  onPress={() => setViewMode(viewMode === "list" ? "grid" : "list")}
+                  onPress={() =>
+                    setViewMode(viewMode === "list" ? "grid" : "list")
+                  }
                 >
                   {viewMode === "list" ? (
                     <LayoutGrid className="w-4 h-4" />
@@ -1767,7 +1767,8 @@ export default function NodePage() {
             aria-label="节点列表"
             className="overflow-x-auto min-w-full"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+              wrapper:
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
@@ -1776,7 +1777,11 @@ export default function NodePage() {
             <TableHeader>
               <TableColumn className="w-12 px-4 whitespace-nowrap overflow-hidden">
                 <Checkbox
-                  isSelected={selectMode && selectedIds.size === displayNodes.length && displayNodes.length > 0}
+                  isSelected={
+                    selectMode &&
+                    selectedIds.size === displayNodes.length &&
+                    displayNodes.length > 0
+                  }
                   onValueChange={(checked) => {
                     if (checked) {
                       selectAll();
@@ -1806,12 +1811,16 @@ export default function NodePage() {
                         onValueChange={(checked) => {
                           if (checked) {
                             setSelectMode(true);
-                            setSelectedIds((prev) => new Set([...prev, node.id]));
+                            setSelectedIds(
+                              (prev) => new Set([...prev, node.id]),
+                            );
                           } else {
                             setSelectedIds((prev) => {
                               const next = new Set(prev);
+
                               next.delete(node.id);
                               if (next.size === 0) setSelectMode(false);
+
                               return next;
                             });
                           }
@@ -1833,7 +1842,11 @@ export default function NodePage() {
                           {node.name}
                         </span>
                         {hasRemark && (
-                          <Chip size="sm" variant="flat" className="h-4 px-1 text-[10px]">
+                          <Chip
+                            className="h-4 px-1 text-[10px]"
+                            size="sm"
+                            variant="flat"
+                          >
                             {node.remark}
                           </Chip>
                         )}
@@ -1841,7 +1854,9 @@ export default function NodePage() {
                     </TableCell>
                     <TableCell>
                       <span className="text-sm font-mono text-default-600">
-                        {isRemoteNode ? new URL(node.remoteUrl || "").hostname : node.serverIp}
+                        {isRemoteNode
+                          ? new URL(node.remoteUrl || "").hostname
+                          : node.serverIp}
                       </span>
                     </TableCell>
                     <TableCell>
@@ -1853,10 +1868,10 @@ export default function NodePage() {
                       <div className="flex flex-wrap items-center gap-1.5 min-w-max">
                         {!isRemoteNode && (
                           <Button
-                            size="sm"
-                            variant="flat"
                             className="h-6 px-2 min-w-0 text-xs bg-emerald-50 text-emerald-600 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-400"
                             isLoading={node.copyLoading}
+                            size="sm"
+                            variant="flat"
                             onPress={() => openInstallSelector(node)}
                           >
                             安装
@@ -1864,11 +1879,11 @@ export default function NodePage() {
                         )}
                         {!isRemoteNode && (
                           <Button
-                            size="sm"
-                            variant="flat"
                             className="h-6 px-2 min-w-0 text-xs bg-amber-50 text-amber-600 hover:bg-amber-100 dark:bg-amber-950/30 dark:text-amber-400"
                             isDisabled={node.connectionStatus !== "online"}
                             isLoading={node.upgradeLoading}
+                            size="sm"
+                            variant="flat"
                             onPress={() => {
                               setUpgradeTargetNodeId(node.id);
                               openUpgradeModal("single");
@@ -1879,11 +1894,11 @@ export default function NodePage() {
                         )}
                         {!isRemoteNode && (
                           <Button
-                            size="sm"
-                            variant="flat"
                             className="h-6 px-2 min-w-0 text-xs bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-950/30 dark:text-blue-400"
                             isDisabled={node.connectionStatus !== "online"}
                             isLoading={node.rollbackLoading}
+                            size="sm"
+                            variant="flat"
                             onPress={() => handleRollbackNode(node)}
                           >
                             回退
@@ -1891,18 +1906,18 @@ export default function NodePage() {
                         )}
                         {!isRemoteNode && (
                           <Button
+                            className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
                             size="sm"
                             variant="flat"
-                            className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
                             onPress={() => handleEdit(node)}
                           >
                             编辑
                           </Button>
                         )}
                         <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
                           size="sm"
                           variant="flat"
-                          className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
                           onPress={() => handleDelete(node)}
                         >
                           删除
@@ -2054,7 +2069,9 @@ export default function NodePage() {
                                               type="button"
                                               onClick={(e) => {
                                                 e.stopPropagation();
-                                                handleDismissExpiryReminder(node.id);
+                                                handleDismissExpiryReminder(
+                                                  node.id,
+                                                );
                                               }}
                                             >
                                               关闭提醒
@@ -2327,8 +2344,6 @@ export default function NodePage() {
                             </div>
                           )}
 
-
-
                           <div className="mt-auto space-y-3">
                             {/* 操作按钮 */}
                             <div className="space-y-1.5">

vite-frontend/src/pages/node/tunnel-monitor-view.tsx

@@ -5,7 +5,13 @@ import type {
   TunnelQualityHopApiItem,
 } from "@/api/types";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   LineChart,
   Line,
@@ -35,7 +41,6 @@ import {
   getMonitorTunnelQualityHistory,
   getConfigByName,
 } from "@/api";
-
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
@@ -54,7 +59,8 @@ interface TunnelMonitorViewProps {
 }
 
 const QUALITY_POLL_INTERVAL = 1_000; // 1 second
-const MONITOR_TUNNEL_QUALITY_ENABLED_CONFIG_KEY = "monitor_tunnel_quality_enabled";
+const MONITOR_TUNNEL_QUALITY_ENABLED_CONFIG_KEY =
+  "monitor_tunnel_quality_enabled";
 const MONITOR_TUNNEL_QUALITY_ENABLED_EVENT =
   "monitorTunnelQualityEnabledChanged";
 
@@ -78,7 +84,13 @@ const formatTimestamp = (ts: number, rangeMs?: number): string => {
   });
 };
 
-function LatencyDisplay({ value, loading }: { value?: number; loading?: boolean }) {
+function LatencyDisplay({
+  value,
+  loading,
+}: {
+  value?: number;
+  loading?: boolean;
+}) {
   if (loading) {
     return <RefreshCw className="w-3 h-3 animate-spin inline text-primary" />;
   }
@@ -87,11 +99,16 @@ function LatencyDisplay({ value, loading }: { value?: number; loading?: boolean
   }
   const ms = value.toFixed(0);
   let colorClass = "text-success";
+
   if (value > 200) colorClass = "text-danger";
   else if (value > 100) colorClass = "text-warning";
   else if (value > 50) colorClass = "text-primary";
 
-  return <span className={`font-mono text-xs font-semibold ${colorClass}`}>{ms}ms</span>;
+  return (
+    <span className={`font-mono text-xs font-semibold ${colorClass}`}>
+      {ms}ms
+    </span>
+  );
 }
 
 function LiveDot() {
@@ -116,9 +133,11 @@ function UptimeHistoryBar({
 }) {
   const bars = [...Array(UPTIME_KUMA_BARS_COUNT)].map((_, i) => {
     const historyIndex = history.length - UPTIME_KUMA_BARS_COUNT + i;
+
     if (historyIndex >= 0 && historyIndex < history.length) {
       return history[historyIndex];
     }
+
     return null;
   });
 
@@ -183,13 +202,20 @@ const TIME_RANGE_OPTIONS = [
   { key: String(24 * 60 * 60 * 1000), label: "24小时" },
 ];
 
-function TimeRangeSelect({ value, onChange }: { value: number; onChange: (v: number) => void }) {
+function TimeRangeSelect({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+}) {
   return (
     <Select
       className="w-36"
       selectedKeys={[String(value)]}
       onSelectionChange={(keys) => {
         const v = Number(Array.from(keys)[0]);
+
         if (v > 0) onChange(v);
       }}
     >
@@ -205,13 +231,23 @@ interface QualityChartCardProps {
   onRangeChange: (v: number) => void;
   loading: boolean;
   error: string | null;
-  data: Array<{ time: string; entryToExit: number | null; exitToBing: number | null }>;
+  data: Array<{
+    time: string;
+    entryToExit: number | null;
+    exitToBing: number | null;
+  }>;
   tunnelId: number;
   onRefresh: (id: number) => void;
 }
 
 const QualityChartCard = React.memo(function QualityChartCard({
-  rangeMs, onRangeChange, loading, error, data, tunnelId, onRefresh,
+  rangeMs,
+  onRangeChange,
+  loading,
+  error,
+  data,
+  tunnelId,
+  onRefresh,
 }: QualityChartCardProps) {
   return (
     <Card>
@@ -219,7 +255,12 @@ const QualityChartCard = React.memo(function QualityChartCard({
         <h3 className="text-lg font-semibold">质量趋势</h3>
         <div className="flex items-center gap-2">
           <TimeRangeSelect value={rangeMs} onChange={onRangeChange} />
-          <Button isLoading={loading} size="sm" variant="flat" onPress={() => onRefresh(tunnelId)}>
+          <Button
+            isLoading={loading}
+            size="sm"
+            variant="flat"
+            onPress={() => onRefresh(tunnelId)}
+          >
             <RefreshCw className="w-4 h-4 mr-1" />
             刷新
           </Button>
@@ -227,38 +268,75 @@ const QualityChartCard = React.memo(function QualityChartCard({
       </CardHeader>
       <CardBody>
         {loading ? (
-          <div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
+          <div className="flex justify-center py-8">
+            <RefreshCw className="w-6 h-6 animate-spin" />
+          </div>
         ) : error ? (
           <div className="text-center py-8 text-danger text-sm">{error}</div>
         ) : data.length > 0 ? (
           <div className="h-64">
             <ResponsiveContainer height="100%" width="100%">
               <LineChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+                <CartesianGrid opacity={0.3} strokeDasharray="3 3" />
                 <XAxis dataKey="time" fontSize={11} tick={{ fill: "#888" }} />
                 <YAxis
                   fontSize={11}
+                  label={{
+                    value: "延迟 (ms)",
+                    angle: -90,
+                    position: "insideLeft",
+                    style: { fontSize: 11, fill: "#888" },
+                  }}
                   tick={{ fill: "#888" }}
                   tickFormatter={(v: any) => `${Number(v).toFixed(0)}ms`}
-                  label={{ value: "延迟 (ms)", angle: -90, position: "insideLeft", style: { fontSize: 11, fill: "#888" } }}
                 />
                 <Tooltip
-                  contentStyle={{ backgroundColor: "rgba(0,0,0,0.85)", border: "none", borderRadius: "8px", fontSize: 12 }}
-                  labelStyle={{ color: "#fff" }}
+                  contentStyle={{
+                    backgroundColor: "rgba(0,0,0,0.85)",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: 12,
+                  }}
                   formatter={(value: unknown, name: string) => {
                     const n = Number(value);
+
                     if (!Number.isFinite(n)) return "-";
-                    const label = name === "entryToExit" ? "入口→出口" : name === "exitToBing" ? "出口→Bing" : name;
+                    const label =
+                      name === "entryToExit"
+                        ? "入口→出口"
+                        : name === "exitToBing"
+                          ? "出口→Bing"
+                          : name;
+
                     return [`${n.toFixed(1)}ms`, label];
                   }}
+                  labelStyle={{ color: "#fff" }}
+                />
+                <Line
+                  connectNulls
+                  dataKey="entryToExit"
+                  dot={false}
+                  name="entryToExit"
+                  stroke="#10b981"
+                  strokeWidth={2}
+                  type="monotone"
+                />
+                <Line
+                  connectNulls
+                  dataKey="exitToBing"
+                  dot={false}
+                  name="exitToBing"
+                  stroke="#3b82f6"
+                  strokeWidth={2}
+                  type="monotone"
                 />
-                <Line connectNulls dataKey="entryToExit" dot={false} name="entryToExit" stroke="#10b981" strokeWidth={2} type="monotone" />
-                <Line connectNulls dataKey="exitToBing" dot={false} name="exitToBing" stroke="#3b82f6" strokeWidth={2} type="monotone" />
               </LineChart>
             </ResponsiveContainer>
           </div>
         ) : (
-          <div className="text-center py-8 text-default-500">暂无质量历史数据</div>
+          <div className="text-center py-8 text-default-500">
+            暂无质量历史数据
+          </div>
         )}
       </CardBody>
     </Card>
@@ -270,20 +348,33 @@ interface TrafficChartCardProps {
   onRangeChange: (v: number) => void;
   loading: boolean;
   error: string | null;
-  data: Array<{ time: string; bytesIn: number; bytesOut: number; connections: number }>;
+  data: Array<{
+    time: string;
+    bytesIn: number;
+    bytesOut: number;
+    connections: number;
+  }>;
   tunnelId: number;
   onRefresh: (id: number) => void;
 }
 
 const TrafficChartCard = React.memo(function TrafficChartCard({
-  rangeMs, onRangeChange, loading, error, data, tunnelId, onRefresh,
+  rangeMs,
+  onRangeChange,
+  loading,
+  error,
+  data,
+  tunnelId,
+  onRefresh,
 }: TrafficChartCardProps) {
   const yFormatter = (value: unknown) => {
     const n = Number(value);
+
     if (!Number.isFinite(n) || n <= 0) return "0 B";
     const k = 1024;
     const sizes = ["B", "KB", "MB", "GB", "TB"];
     const i = Math.floor(Math.log(n) / Math.log(k));
+
     return `${parseFloat((n / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
   };
 
@@ -293,7 +384,12 @@ const TrafficChartCard = React.memo(function TrafficChartCard({
         <h3 className="text-lg font-semibold">流量趋势</h3>
         <div className="flex items-center gap-2">
           <TimeRangeSelect value={rangeMs} onChange={onRangeChange} />
-          <Button isLoading={loading} size="sm" variant="flat" onPress={() => onRefresh(tunnelId)}>
+          <Button
+            isLoading={loading}
+            size="sm"
+            variant="flat"
+            onPress={() => onRefresh(tunnelId)}
+          >
             <RefreshCw className="w-4 h-4 mr-1" />
             刷新
           </Button>
@@ -301,23 +397,48 @@ const TrafficChartCard = React.memo(function TrafficChartCard({
       </CardHeader>
       <CardBody>
         {loading ? (
-          <div className="flex justify-center py-8"><RefreshCw className="w-6 h-6 animate-spin" /></div>
+          <div className="flex justify-center py-8">
+            <RefreshCw className="w-6 h-6 animate-spin" />
+          </div>
         ) : error ? (
           <div className="text-center py-8 text-danger text-sm">{error}</div>
         ) : data.length > 0 ? (
           <div className="h-64">
             <ResponsiveContainer height="100%" width="100%">
               <LineChart data={data}>
-                <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+                <CartesianGrid opacity={0.3} strokeDasharray="3 3" />
                 <XAxis dataKey="time" fontSize={11} tick={{ fill: "#888" }} />
-                <YAxis fontSize={11} tick={{ fill: "#888" }} tickFormatter={yFormatter} />
-                <Tooltip
-                  contentStyle={{ backgroundColor: "rgba(0,0,0,0.85)", border: "none", borderRadius: "8px", fontSize: 12 }}
-                  labelStyle={{ color: "#fff" }}
-                  formatter={yFormatter}
+                <YAxis
+                  fontSize={11}
+                  tick={{ fill: "#888" }}
+                  tickFormatter={yFormatter}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: "rgba(0,0,0,0.85)",
+                    border: "none",
+                    borderRadius: "8px",
+                    fontSize: 12,
+                  }}
+                  formatter={yFormatter}
+                  labelStyle={{ color: "#fff" }}
+                />
+                <Line
+                  dataKey="bytesIn"
+                  dot={false}
+                  name="入站流量"
+                  stroke="#10b981"
+                  strokeWidth={2}
+                  type="monotone"
+                />
+                <Line
+                  dataKey="bytesOut"
+                  dot={false}
+                  name="出站流量"
+                  stroke="#ef4444"
+                  strokeWidth={2}
+                  type="monotone"
                 />
-                <Line dataKey="bytesIn" dot={false} name="入站流量" stroke="#10b981" strokeWidth={2} type="monotone" />
-                <Line dataKey="bytesOut" dot={false} name="出站流量" stroke="#ef4444" strokeWidth={2} type="monotone" />
               </LineChart>
             </ResponsiveContainer>
           </div>
@@ -333,6 +454,7 @@ function ForwardingChainTopology({ hopsStr }: { hopsStr?: string }) {
   if (!hopsStr) return null;
 
   let hops: TunnelQualityHopApiItem[] = [];
+
   try {
     hops = JSON.parse(hopsStr);
   } catch {
@@ -353,28 +475,49 @@ function ForwardingChainTopology({ hopsStr }: { hopsStr?: string }) {
         <div className="flex items-center overflow-x-auto pb-2 py-2">
           {hops.map((hop, index) => {
             const hasError = hop.latency < 0 || hop.loss > 0;
-            const colorClass = hop.latency < 0 ? "text-danger" : (hop.loss > 0 ? "text-warning" : "text-success");
+            const colorClass =
+              hop.latency < 0
+                ? "text-danger"
+                : hop.loss > 0
+                  ? "text-warning"
+                  : "text-success";
             const borderColor = hasError ? "border-danger" : "";
 
             return (
               <React.Fragment key={index}>
                 {index === 0 && (
-                  <Chip size="sm" variant="flat" className="shrink-0 font-mono shadow-sm">
+                  <Chip
+                    className="shrink-0 font-mono shadow-sm"
+                    size="sm"
+                    variant="flat"
+                  >
                     {hop.fromNodeName}
                   </Chip>
                 )}
                 <div className="flex flex-col items-center justify-center min-w-[70px] mx-1 shrink-0 relative">
-                  <span className={`text-[10px] font-mono leading-none mb-1 ${colorClass}`}>
+                  <span
+                    className={`text-[10px] font-mono leading-none mb-1 ${colorClass}`}
+                  >
                     {hop.latency >= 0 ? `${hop.latency.toFixed(0)}ms` : "超时"}
                   </span>
-                  <div className={`h-[2px] w-full relative flex items-center justify-end bg-default-200 ${hop.latency < 0 ? "!bg-danger" : ""}`}>
-                    <ArrowRight className={`w-3.5 h-3.5 absolute -right-2 ${colorClass} bg-background rounded-full p-[1px] z-10`} />
+                  <div
+                    className={`h-[2px] w-full relative flex items-center justify-end bg-default-200 ${hop.latency < 0 ? "!bg-danger" : ""}`}
+                  >
+                    <ArrowRight
+                      className={`w-3.5 h-3.5 absolute -right-2 ${colorClass} bg-background rounded-full p-[1px] z-10`}
+                    />
                   </div>
-                  <span className={`text-[10px] font-mono leading-none mt-1.5 ${hop.loss > 0 ? "text-warning" : "text-default-400"}`}>
+                  <span
+                    className={`text-[10px] font-mono leading-none mt-1.5 ${hop.loss > 0 ? "text-warning" : "text-default-400"}`}
+                  >
                     {hop.loss.toFixed(0)}% 丢包
                   </span>
                 </div>
-                <Chip size="sm" variant="flat" className={`shrink-0 font-mono shadow-sm ${borderColor}`}>
+                <Chip
+                  className={`shrink-0 font-mono shadow-sm ${borderColor}`}
+                  size="sm"
+                  variant="flat"
+                >
                   {hop.toNodeName}
                 </Chip>
               </React.Fragment>
@@ -386,15 +529,21 @@ function ForwardingChainTopology({ hopsStr }: { hopsStr?: string }) {
   );
 }
 
-export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps) {
+export function TunnelMonitorView({
+  viewMode = "grid",
+}: TunnelMonitorViewProps) {
   const [tunnels, setTunnels] = useState<MonitorTunnelApiItem[]>([]);
   const [tunnelsLoading, setTunnelsLoading] = useState(false);
   const [tunnelsError, setTunnelsError] = useState<string | null>(null);
   const [accessDenied, setAccessDenied] = useState<string | null>(null);
 
   // Quality data from backend periodic probing (latest per tunnel)
-  const [qualityMap, setQualityMap] = useState<Record<number, TunnelQualityApiItem>>({});
-  const [qualityHistoryMap, setQualityHistoryMap] = useState<Record<number, TunnelQualityApiItem[]>>({});
+  const [qualityMap, setQualityMap] = useState<
+    Record<number, TunnelQualityApiItem>
+  >({});
+  const [qualityHistoryMap, setQualityHistoryMap] = useState<
+    Record<number, TunnelQualityApiItem[]>
+  >({});
   const initialHistoryFetched = useRef(false);
   const [qualityLoading, setQualityLoading] = useState(false);
   const qualityTimerRef = useRef<number | null>(null);
@@ -405,20 +554,27 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   const [detailTunnelId, setDetailTunnelId] = useState<number | null>(null);
 
   // Quality history for chart (mirrors service monitor results)
-  const [qualityHistory, setQualityHistory] = useState<TunnelQualityApiItem[]>([]);
+  const [qualityHistory, setQualityHistory] = useState<TunnelQualityApiItem[]>(
+    [],
+  );
   const [qualityHistoryLoading, setQualityHistoryLoading] = useState(false);
-  const [qualityHistoryError, setQualityHistoryError] = useState<string | null>(null);
+  const [qualityHistoryError, setQualityHistoryError] = useState<string | null>(
+    null,
+  );
   const [qualityRangeMs, setQualityRangeMs] = useState(60 * 60 * 1000);
 
   // Tunnel traffic metrics for chart
   const [tunnelMetrics, setTunnelMetrics] = useState<TunnelMetricApiItem[]>([]);
   const [tunnelMetricsLoading, setTunnelMetricsLoading] = useState(false);
-  const [tunnelMetricsError, setTunnelMetricsError] = useState<string | null>(null);
+  const [tunnelMetricsError, setTunnelMetricsError] = useState<string | null>(
+    null,
+  );
   const [tunnelRangeMs, setTunnelRangeMs] = useState(60 * 60 * 1000);
 
   // --- Load tunnel list ---
   const loadTunnels = useCallback(async (options?: { silent?: boolean }) => {
     const silent = options?.silent ?? false;
+
     if (!silent) setTunnelsLoading(true);
     try {
       const response = await getMonitorTunnels();
@@ -427,12 +583,14 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
         setAccessDenied(null);
         setTunnelsError(null);
         setTunnels(response.data);
+
         return;
       }
       if (response.code === 403) {
         setAccessDenied(response.msg || "暂无监控权限，请联系管理员授权");
         setTunnelsError(null);
         setTunnels([]);
+
         return;
       }
       setTunnelsError(response.msg || "加载隧道列表失败");
@@ -452,6 +610,7 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
       const response = await getConfigByName(
         MONITOR_TUNNEL_QUALITY_ENABLED_CONFIG_KEY,
       );
+
       setMonitorTunnelQualityEnabled(
         typeof response.data?.value === "string"
           ? response.data.value === "true"
@@ -477,7 +636,9 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
 
   useEffect(() => {
     const handleMonitorTunnelQualityEnabledChanged = (event: Event) => {
-      const enabled = (event as CustomEvent<{ enabled?: boolean }>).detail?.enabled;
+      const enabled = (event as CustomEvent<{ enabled?: boolean }>).detail
+        ?.enabled;
+
       if (typeof enabled === "boolean") {
         setMonitorTunnelQualityEnabled(enabled);
         if (!enabled) {
@@ -510,31 +671,44 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
         const start = end - 5 * 60 * 1000;
 
         const promises = tunnels.map((t) =>
-          getMonitorTunnelQualityHistory(t.id, start, end).then(res => {
-            if (res.code === 0 && res.data) {
-              return { id: t.id, data: res.data };
-            }
-            return { id: t.id, data: [] };
-          }).catch(() => ({ id: t.id, data: [] }))
+          getMonitorTunnelQualityHistory(t.id, start, end)
+            .then((res) => {
+              if (res.code === 0 && res.data) {
+                return { id: t.id, data: res.data };
+              }
+
+              return { id: t.id, data: [] };
+            })
+            .catch(() => ({ id: t.id, data: [] })),
         );
 
         const results = await Promise.all(promises);
-        setQualityHistoryMap(prev => {
+
+        setQualityHistoryMap((prev) => {
           const nextMap = { ...prev };
-          results.forEach(r => {
+
+          results.forEach((r) => {
             const existing = nextMap[r.id] || [];
-            const merged = [...r.data, ...existing].sort((a,b) => a.timestamp - b.timestamp);
+            const merged = [...r.data, ...existing].sort(
+              (a, b) => a.timestamp - b.timestamp,
+            );
             const unique: TunnelQualityApiItem[] = [];
+
             for (const item of merged) {
-               if (unique.length === 0 || unique[unique.length-1].timestamp !== item.timestamp) {
-                   unique.push(item);
-               }
+              if (
+                unique.length === 0 ||
+                unique[unique.length - 1].timestamp !== item.timestamp
+              ) {
+                unique.push(item);
+              }
             }
             nextMap[r.id] = unique.slice(-UPTIME_KUMA_BARS_COUNT);
           });
+
           return nextMap;
         });
       };
+
       void fetchHistory();
     }
   }, [tunnels]);
@@ -542,27 +716,36 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   // --- Load quality snapshots (auto-polling every 10s) ---
   const loadQuality = useCallback(async (options?: { silent?: boolean }) => {
     const silent = options?.silent ?? false;
+
     if (!silent) setQualityLoading(true);
     try {
       const response = await getMonitorTunnelQuality();
+
       if (response.code === 0 && Array.isArray(response.data)) {
         const map: Record<number, TunnelQualityApiItem> = {};
+
         for (const q of response.data) {
           map[q.tunnelId] = q;
         }
         setQualityMap(map);
 
         // Accumulate locally
-        setQualityHistoryMap(prev => {
-           const nextMap = { ...prev };
-           for (const q of response.data) {
-              const currentArr = nextMap[q.tunnelId] || [];
-              const lastItem = currentArr.length > 0 ? currentArr[currentArr.length - 1] : null;
-              if (!lastItem || lastItem.timestamp !== q.timestamp) {
-                  nextMap[q.tunnelId] = [...currentArr, q].slice(-UPTIME_KUMA_BARS_COUNT);
-              }
-           }
-           return nextMap;
+        setQualityHistoryMap((prev) => {
+          const nextMap = { ...prev };
+
+          for (const q of response.data) {
+            const currentArr = nextMap[q.tunnelId] || [];
+            const lastItem =
+              currentArr.length > 0 ? currentArr[currentArr.length - 1] : null;
+
+            if (!lastItem || lastItem.timestamp !== q.timestamp) {
+              nextMap[q.tunnelId] = [...currentArr, q].slice(
+                -UPTIME_KUMA_BARS_COUNT,
+              );
+            }
+          }
+
+          return nextMap;
         });
       }
     } catch {
@@ -586,6 +769,7 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
         window.clearInterval(qualityTimerRef.current);
         qualityTimerRef.current = null;
       }
+
       return;
     }
 
@@ -605,19 +789,26 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   const loadQualityHistory = useCallback(
     async (tunnelId: number, options?: { silent?: boolean }) => {
       const silent = options?.silent ?? false;
+
       if (!silent) setQualityHistoryLoading(true);
       try {
         const end = Date.now();
         const start = end - qualityRangeMs;
-        const response = await getMonitorTunnelQualityHistory(tunnelId, start, end);
+        const response = await getMonitorTunnelQualityHistory(
+          tunnelId,
+          start,
+          end,
+        );
 
         if (response.code === 0 && Array.isArray(response.data)) {
           setQualityHistoryError(null);
           setQualityHistory(response.data);
+
           return;
         }
         if (response.code === 403) {
           setAccessDenied(response.msg || "暂无监控权限");
+
           return;
         }
         setQualityHistoryError(response.msg || "加载质量历史失败");
@@ -637,6 +828,7 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   const loadTunnelMetrics = useCallback(
     async (tunnelId: number, options?: { silent?: boolean }) => {
       const silent = options?.silent ?? false;
+
       if (!silent) setTunnelMetricsLoading(true);
       try {
         const end = Date.now();
@@ -648,7 +840,9 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
           const ordered = [...response.data].sort(
             (a, b) => a.timestamp - b.timestamp,
           );
+
           setTunnelMetrics(ordered);
+
           return;
         }
         setTunnelMetricsError(response.msg || "加载流量数据失败");
@@ -695,29 +889,32 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
 
   // Memoize chart data so React.memo sub-components see stable references
   const qualityChartData = useMemo(
-    () => qualityHistory.map((q) => ({
-      time: formatTimestamp(q.timestamp, qualityRangeMs),
-      entryToExit: q.entryToExitLatency >= 0 ? q.entryToExitLatency : null,
-      exitToBing: q.exitToBingLatency >= 0 ? q.exitToBingLatency : null,
-      entryToExitLoss: q.entryToExitLoss,
-      exitToBingLoss: q.exitToBingLoss,
-    })),
+    () =>
+      qualityHistory.map((q) => ({
+        time: formatTimestamp(q.timestamp, qualityRangeMs),
+        entryToExit: q.entryToExitLatency >= 0 ? q.entryToExitLatency : null,
+        exitToBing: q.exitToBingLatency >= 0 ? q.exitToBingLatency : null,
+        entryToExitLoss: q.entryToExitLoss,
+        exitToBingLoss: q.exitToBingLoss,
+      })),
     [qualityHistory, qualityRangeMs],
   );
 
   const tunnelChartData = useMemo(
-    () => tunnelMetrics.map((m) => ({
-      time: formatTimestamp(m.timestamp, tunnelRangeMs),
-      bytesIn: m.bytesIn,
-      bytesOut: m.bytesOut,
-      connections: m.connections,
-    })),
+    () =>
+      tunnelMetrics.map((m) => ({
+        time: formatTimestamp(m.timestamp, tunnelRangeMs),
+        bytesIn: m.bytesIn,
+        bytesOut: m.bytesOut,
+        connections: m.connections,
+      })),
     [tunnelMetrics, tunnelRangeMs],
   );
 
-  const detailTunnel = detailTunnelId != null
-    ? tunnels.find((t) => t.id === detailTunnelId)
-    : null;
+  const detailTunnel =
+    detailTunnelId != null
+      ? tunnels.find((t) => t.id === detailTunnelId)
+      : null;
 
   // Aggregate stats
   const tunnelStats = useMemo(() => {
@@ -729,9 +926,11 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   // Last quality update timestamp
   const lastQualityUpdate = useMemo(() => {
     let latest = 0;
+
     for (const q of Object.values(qualityMap)) {
       if (q.timestamp > latest) latest = q.timestamp;
     }
+
     return latest > 0 ? new Date(latest).toLocaleTimeString("zh-CN") : null;
   }, [qualityMap]);
 
@@ -759,18 +958,28 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
       <div className="space-y-6">
         {/* Header */}
         <div className="flex items-center gap-3 flex-wrap">
-          <Button size="sm" variant="flat" onPress={() => {
-            setDetailTunnelId(null);
-            setQualityHistory([]);
-            setTunnelMetrics([]);
-          }}>
+          <Button
+            size="sm"
+            variant="flat"
+            onPress={() => {
+              setDetailTunnelId(null);
+              setQualityHistory([]);
+              setTunnelMetrics([]);
+            }}
+          >
             <ArrowLeft className="w-4 h-4 mr-1" />
             返回隧道列表
           </Button>
           <div className="flex items-center gap-2">
-            <ArrowRightLeft className={`w-5 h-5 ${detailTunnel.status === 1 ? "text-success" : "text-default-400"}`} />
+            <ArrowRightLeft
+              className={`w-5 h-5 ${detailTunnel.status === 1 ? "text-success" : "text-default-400"}`}
+            />
             <h3 className="text-lg font-semibold">{detailTunnel.name}</h3>
-            <Chip size="sm" color={detailTunnel.status === 1 ? "success" : "danger"} variant="flat">
+            <Chip
+              color={detailTunnel.status === 1 ? "success" : "danger"}
+              size="sm"
+              variant="flat"
+            >
               {detailTunnel.status === 1 ? "启用" : "禁用"}
             </Chip>
           </div>
@@ -784,7 +993,10 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                 <Zap className="w-3 h-3" />
                 入口 → 出口 延迟
               </span>
-              <LatencyDisplay value={quality?.entryToExitLatency} loading={qualityLoading} />
+              <LatencyDisplay
+                loading={qualityLoading}
+                value={quality?.entryToExitLatency}
+              />
             </CardBody>
           </Card>
           <Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
@@ -793,22 +1005,37 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                 <Globe className="w-3 h-3" />
                 出口 → Bing 延迟
               </span>
-              <LatencyDisplay value={quality?.exitToBingLatency} loading={qualityLoading} />
+              <LatencyDisplay
+                loading={qualityLoading}
+                value={quality?.exitToBingLatency}
+              />
             </CardBody>
           </Card>
           <Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
             <CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
-              <span className="text-[11px] text-default-500 mb-1.5">入口 → 出口 丢包</span>
-              <span className={`text-sm font-semibold font-mono ${(quality?.entryToExitLoss ?? 0) > 0 ? "text-warning" : ""}`}>
-                {quality?.entryToExitLoss !== undefined ? `${quality.entryToExitLoss.toFixed(1)}%` : "-"}
+              <span className="text-[11px] text-default-500 mb-1.5">
+                入口 → 出口 丢包
+              </span>
+              <span
+                className={`text-sm font-semibold font-mono ${(quality?.entryToExitLoss ?? 0) > 0 ? "text-warning" : ""}`}
+              >
+                {quality?.entryToExitLoss !== undefined
+                  ? `${quality.entryToExitLoss.toFixed(1)}%`
+                  : "-"}
               </span>
             </CardBody>
           </Card>
           <Card className="border border-divider/60 shadow-sm hover:shadow-md transition-shadow bg-gradient-to-br from-background to-default-50/50">
             <CardBody className="py-3 px-4 flex flex-col items-center justify-center min-h-[5rem]">
-              <span className="text-[11px] text-default-500 mb-1.5">出口 → Bing 丢包</span>
-              <span className={`text-sm font-semibold font-mono ${(quality?.exitToBingLoss ?? 0) > 0 ? "text-warning" : ""}`}>
-                {quality?.exitToBingLoss !== undefined ? `${quality.exitToBingLoss.toFixed(1)}%` : "-"}
+              <span className="text-[11px] text-default-500 mb-1.5">
+                出口 → Bing 丢包
+              </span>
+              <span
+                className={`text-sm font-semibold font-mono ${(quality?.exitToBingLoss ?? 0) > 0 ? "text-warning" : ""}`}
+              >
+                {quality?.exitToBingLoss !== undefined
+                  ? `${quality.exitToBingLoss.toFixed(1)}%`
+                  : "-"}
               </span>
             </CardBody>
           </Card>
@@ -829,7 +1056,8 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
           )}
           {quality?.timestamp && (
             <span className="text-default-400">
-              · 最近更新: {new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
+              · 最近更新:{" "}
+              {new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
             </span>
           )}
           {quality?.errorMessage && (
@@ -844,23 +1072,23 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
 
         {/* ====== Quality History Chart — isolated with React.memo ====== */}
         <QualityChartCard
-          rangeMs={qualityRangeMs}
-          onRangeChange={setQualityRangeMs}
-          loading={qualityHistoryLoading}
-          error={qualityHistoryError}
           data={qualityChartData}
+          error={qualityHistoryError}
+          loading={qualityHistoryLoading}
+          rangeMs={qualityRangeMs}
           tunnelId={detailTunnelId}
+          onRangeChange={setQualityRangeMs}
           onRefresh={loadQualityHistory}
         />
 
         {/* ====== Traffic Chart — isolated with React.memo ====== */}
         <TrafficChartCard
-          rangeMs={tunnelRangeMs}
-          onRangeChange={setTunnelRangeMs}
-          loading={tunnelMetricsLoading}
-          error={tunnelMetricsError}
           data={tunnelChartData}
+          error={tunnelMetricsError}
+          loading={tunnelMetricsLoading}
+          rangeMs={tunnelRangeMs}
           tunnelId={detailTunnelId}
+          onRangeChange={setTunnelRangeMs}
           onRefresh={loadTunnelMetrics}
         />
       </div>
@@ -871,7 +1099,9 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
   return (
     <div className="space-y-6">
       <div className="flex flex-wrap items-center gap-3 mb-1">
-        <Chip color="primary" size="sm" variant="flat">隧道 {tunnelStats.enabled}/{tunnelStats.total}</Chip>
+        <Chip color="primary" size="sm" variant="flat">
+          隧道 {tunnelStats.enabled}/{tunnelStats.total}
+        </Chip>
         {lastQualityUpdate ? (
           <div className="flex items-center gap-1.5 text-xs text-default-500">
             {monitorTunnelQualityEnabled ? (
@@ -893,7 +1123,12 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
           </div>
         ) : null}
         <div className="ml-auto">
-          <Button isLoading={tunnelsLoading} size="sm" variant="flat" onPress={() => loadTunnels()}>
+          <Button
+            isLoading={tunnelsLoading}
+            size="sm"
+            variant="flat"
+            onPress={() => loadTunnels()}
+          >
             <RefreshCw className="w-4 h-4 mr-1" />
             刷新
           </Button>
@@ -920,21 +1155,33 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                 className="group relative overflow-hidden shadow-sm border border-divider dark:border-default-100 hover:-translate-y-1 hover:shadow-lg transition-all duration-300 h-full flex flex-col cursor-pointer bg-background"
                 onClick={() => setDetailTunnelId(tunnel.id)}
               >
-                <div className={`absolute top-0 left-0 right-0 h-1 ${isEnabled ? "bg-success" : "bg-danger"}`} />
-                <div className={`absolute -right-8 -top-8 w-24 h-24 rounded-full blur-2xl opacity-10 transition-opacity group-hover:opacity-20 ${isEnabled ? "bg-success" : "bg-danger"}`} />
+                <div
+                  className={`absolute top-0 left-0 right-0 h-1 ${isEnabled ? "bg-success" : "bg-danger"}`}
+                />
+                <div
+                  className={`absolute -right-8 -top-8 w-24 h-24 rounded-full blur-2xl opacity-10 transition-opacity group-hover:opacity-20 ${isEnabled ? "bg-success" : "bg-danger"}`}
+                />
 
                 <CardHeader className="pb-2 pt-5 px-5 flex flex-row justify-between items-start gap-4">
                   <div className="flex items-center gap-3 min-w-0">
                     <div className="relative flex-shrink-0">
                       <div className="w-10 h-10 rounded-xl bg-default-100 dark:bg-default-50/10 flex items-center justify-center border border-divider">
-                        <ArrowRightLeft className={`w-5 h-5 ${isEnabled ? "text-success" : "text-danger"}`} />
+                        <ArrowRightLeft
+                          className={`w-5 h-5 ${isEnabled ? "text-success" : "text-danger"}`}
+                        />
                       </div>
-                      <span className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background ${isEnabled ? "bg-success" : "bg-danger"}`} />
+                      <span
+                        className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background ${isEnabled ? "bg-success" : "bg-danger"}`}
+                      />
                     </div>
                     <div className="flex flex-col min-w-0">
-                      <h3 className="font-semibold text-foreground text-sm truncate">{tunnel.name}</h3>
+                      <h3 className="font-semibold text-foreground text-sm truncate">
+                        {tunnel.name}
+                      </h3>
                       <div className="flex items-center gap-1.5 text-[11px] text-default-500 mt-0.5">
-                        <span className="font-mono">{isEnabled ? "启用" : "禁用"}</span>
+                        <span className="font-mono">
+                          {isEnabled ? "启用" : "禁用"}
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -947,20 +1194,30 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                         <Zap className="w-3 h-3" />
                         入口→出口
                       </div>
-                      <UptimeHistoryBar history={qualityHistoryMap[tunnel.id]} type="entryToExit" latestValue={quality?.entryToExitLatency} />
+                      <UptimeHistoryBar
+                        history={qualityHistoryMap[tunnel.id]}
+                        latestValue={quality?.entryToExitLatency}
+                        type="entryToExit"
+                      />
                     </div>
                     <div className="space-y-1">
                       <div className="text-[10px] text-default-500 flex items-center gap-1">
                         <Globe className="w-3 h-3" />
                         出口→Bing
                       </div>
-                      <UptimeHistoryBar history={qualityHistoryMap[tunnel.id]} type="exitToBing" latestValue={quality?.exitToBingLatency} />
+                      <UptimeHistoryBar
+                        history={qualityHistoryMap[tunnel.id]}
+                        latestValue={quality?.exitToBingLatency}
+                        type="exitToBing"
+                      />
                     </div>
                   </div>
 
                   <div className="flex justify-between items-center pt-2 border-t border-divider/50">
                     {quality?.errorMessage ? (
-                      <span className="text-[11px] text-danger truncate">{quality.errorMessage}</span>
+                      <span className="text-[11px] text-danger truncate">
+                        {quality.errorMessage}
+                      </span>
                     ) : quality?.timestamp ? (
                       <span className="text-[11px] text-default-500 flex items-center gap-1">
                         {monitorTunnelQualityEnabled ? (
@@ -968,11 +1225,15 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                         ) : (
                           <WifiOff className="w-3 h-3 text-warning" />
                         )}
-                        {new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
+                        {new Date(quality.timestamp).toLocaleTimeString(
+                          "zh-CN",
+                        )}
                       </span>
                     ) : (
                       <span className="text-[11px] text-default-400">
-                        {monitorTunnelQualityEnabled ? "等待探测..." : "实时检测已关闭"}
+                        {monitorTunnelQualityEnabled
+                          ? "等待探测..."
+                          : "实时检测已关闭"}
                       </span>
                     )}
                   </div>
@@ -987,7 +1248,8 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
             aria-label="隧道列表"
             className="overflow-x-auto min-w-full"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+              wrapper:
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -1006,7 +1268,11 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                 const isEnabled = tunnel.status === 1;
 
                 return (
-                  <TableRow key={tunnel.id} className="cursor-pointer" onClick={() => setDetailTunnelId(tunnel.id)}>
+                  <TableRow
+                    key={tunnel.id}
+                    className="cursor-pointer"
+                    onClick={() => setDetailTunnelId(tunnel.id)}
+                  >
                     <TableCell>
                       <div className="flex items-center gap-1.5">
                         {isEnabled ? (
@@ -1017,13 +1283,23 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                       </div>
                     </TableCell>
                     <TableCell>
-                      <span className="font-semibold text-sm whitespace-nowrap">{tunnel.name}</span>
+                      <span className="font-semibold text-sm whitespace-nowrap">
+                        {tunnel.name}
+                      </span>
                     </TableCell>
                     <TableCell>
-                      <UptimeHistoryBar history={qualityHistoryMap[tunnel.id]} type="entryToExit" latestValue={quality?.entryToExitLatency} />
+                      <UptimeHistoryBar
+                        history={qualityHistoryMap[tunnel.id]}
+                        latestValue={quality?.entryToExitLatency}
+                        type="entryToExit"
+                      />
                     </TableCell>
                     <TableCell>
-                      <UptimeHistoryBar history={qualityHistoryMap[tunnel.id]} type="exitToBing" latestValue={quality?.exitToBingLatency} />
+                      <UptimeHistoryBar
+                        history={qualityHistoryMap[tunnel.id]}
+                        latestValue={quality?.exitToBingLatency}
+                        type="exitToBing"
+                      />
                     </TableCell>
                     <TableCell>
                       {quality?.timestamp ? (
@@ -1033,7 +1309,9 @@ export function TunnelMonitorView({ viewMode = "grid" }: TunnelMonitorViewProps)
                           ) : (
                             <WifiOff className="w-3.5 h-3.5 text-warning" />
                           )}
-                          {new Date(quality.timestamp).toLocaleTimeString("zh-CN")}
+                          {new Date(quality.timestamp).toLocaleTimeString(
+                            "zh-CN",
+                          )}
                         </span>
                       ) : (
                         <span className="text-xs text-default-400">

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

@@ -457,10 +457,7 @@ export default function PanelSharingPage() {
               ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                   {shares.map((share) => (
-                    <Card
-                      key={share.id}
-                      className="overflow-hidden"
-                    >
+                    <Card key={share.id} className="overflow-hidden">
                       <CardHeader className="flex justify-between pb-2 md:pb-2">
                         <h3 className="font-bold">{share.name}</h3>
                         <div className="flex gap-2">
@@ -604,10 +601,7 @@ export default function PanelSharingPage() {
               ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {remoteUsageNodes.map((node) => (
-                    <Card
-                      key={node.nodeId}
-                      className="overflow-hidden"
-                    >
+                    <Card key={node.nodeId} className="overflow-hidden">
                       <CardHeader className="flex justify-between pb-2 md:pb-2">
                         <h3 className="font-bold">{node.nodeName}</h3>
                         <span className="text-xs text-default-500">

vite-frontend/src/pages/user.tsx

@@ -1080,7 +1080,8 @@ export default function UserPage() {
             aria-label="用户列表"
             className="overflow-x-auto min-w-full"
             classNames={{
-              wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+              wrapper:
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -1108,7 +1109,9 @@ export default function UserPage() {
                       <div className="flex items-center gap-3">
                         <div className="flex items-center justify-center shrink-0 w-10 h-10 rounded-full bg-primary text-white font-bold text-sm relative">
                           {(user.name || user.user).slice(0, 2).toUpperCase()}
-                          <span className={`absolute bottom-0 right-0 w-3 h-3 border-2 border-white dark:border-zinc-900 rounded-full ${userStatus.color === "success" ? "bg-success" : "bg-danger"}`} />
+                          <span
+                            className={`absolute bottom-0 right-0 w-3 h-3 border-2 border-white dark:border-zinc-900 rounded-full ${userStatus.color === "success" ? "bg-success" : "bg-danger"}`}
+                          />
                         </div>
                         <div className="flex flex-col">
                           <span className="font-medium text-foreground text-sm">
@@ -1119,7 +1122,12 @@ export default function UserPage() {
                           </span>
                         </div>
                         {user.disabledByQuota && (
-                          <Chip className="text-[10px] h-4 px-1 ml-1" color="danger" size="sm" variant="flat">
+                          <Chip
+                            className="text-[10px] h-4 px-1 ml-1"
+                            color="danger"
+                            size="sm"
+                            variant="flat"
+                          >
                             超额
                           </Chip>
                         )}
@@ -1143,17 +1151,24 @@ export default function UserPage() {
                     </TableCell>
                     <TableCell>
                       <div className="flex flex-col gap-0.5 whitespace-nowrap text-[11px]">
-                        {((user.dailyQuotaGB ?? 0) > 0 || (user.monthlyQuotaGB ?? 0) > 0) ? (
-                            <>
-                              <div className="flex gap-1 justify-between">
-                                <span className="text-default-500">日配额:</span>
-                                <span>{formatFlow(user.dailyUsedBytes ?? 0)} / {formatQuotaLimit(user.dailyQuotaGB)}</span>
-                              </div>
-                              <div className="flex gap-1 justify-between">
-                                <span className="text-default-500">月配额:</span>
-                                <span>{formatFlow(user.monthlyUsedBytes ?? 0)} / {formatQuotaLimit(user.monthlyQuotaGB)}</span>
-                              </div>
-                            </>
+                        {(user.dailyQuotaGB ?? 0) > 0 ||
+                        (user.monthlyQuotaGB ?? 0) > 0 ? (
+                          <>
+                            <div className="flex gap-1 justify-between">
+                              <span className="text-default-500">日配额:</span>
+                              <span>
+                                {formatFlow(user.dailyUsedBytes ?? 0)} /{" "}
+                                {formatQuotaLimit(user.dailyQuotaGB)}
+                              </span>
+                            </div>
+                            <div className="flex gap-1 justify-between">
+                              <span className="text-default-500">月配额:</span>
+                              <span>
+                                {formatFlow(user.monthlyUsedBytes ?? 0)} /{" "}
+                                {formatQuotaLimit(user.monthlyQuotaGB)}
+                              </span>
+                            </div>
+                          </>
                         ) : (
                           <span className="text-default-400">无配额</span>
                         )}
@@ -1171,51 +1186,53 @@ export default function UserPage() {
                             </span>
                             {expStatus && (
                               <Chip
+                                className="h-5 px-1 text-[10px]"
                                 color={expStatus.color}
                                 size="sm"
                                 variant="flat"
-                                className="h-5 px-1 text-[10px]"
                               >
                                 {expStatus.text}
                               </Chip>
                             )}
                           </>
                         ) : (
-                          <span className="text-default-400 text-sm">无限期</span>
+                          <span className="text-default-400 text-sm">
+                            无限期
+                          </span>
                         )}
                       </div>
                     </TableCell>
                     <TableCell>
                       <div className="flex flex-wrap items-center gap-1.5 min-w-max">
                         <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-emerald-50 text-emerald-600 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-400"
                           size="sm"
                           variant="flat"
-                          className="h-6 px-2 min-w-0 text-xs bg-emerald-50 text-emerald-600 hover:bg-emerald-100 dark:bg-emerald-950/30 dark:text-emerald-400"
                           onPress={() => handleManageTunnels(user)}
                         >
                           权限
                         </Button>
                         <Button
-                          size="sm"
-                          variant="flat"
                           className="h-6 px-2 min-w-0 text-xs bg-amber-50 text-amber-600 hover:bg-amber-100 dark:bg-amber-950/30 dark:text-amber-400"
+                          size="sm"
                           title="重置流量"
+                          variant="flat"
                           onPress={() => handleResetFlow(user)}
                         >
                           重置
                         </Button>
                         <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
                           size="sm"
                           variant="flat"
-                          className="h-6 px-2 min-w-0 text-xs bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:bg-indigo-950/30 dark:text-indigo-400"
                           onPress={() => handleEdit(user)}
                         >
                           编辑
                         </Button>
                         <Button
+                          className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
                           size="sm"
                           variant="flat"
-                          className="h-6 px-2 min-w-0 text-xs bg-rose-50 text-rose-600 hover:bg-rose-100 dark:bg-rose-950/30 dark:text-rose-400"
                           onPress={() => handleDelete(user)}
                         >
                           删除
@@ -1252,7 +1269,9 @@ export default function UserPage() {
                       <div className="flex items-center gap-3 flex-1 min-w-0">
                         <div className="flex items-center justify-center shrink-0 w-10 h-10 rounded-full bg-primary text-white font-bold text-sm relative">
                           {(user.name || user.user).slice(0, 2).toUpperCase()}
-                          <span className={`absolute bottom-0 right-0 w-3 h-3 border-2 border-white dark:border-zinc-900 rounded-full ${userStatus.color === "success" ? "bg-success" : "bg-danger"}`} />
+                          <span
+                            className={`absolute bottom-0 right-0 w-3 h-3 border-2 border-white dark:border-zinc-900 rounded-full ${userStatus.color === "success" ? "bg-success" : "bg-danger"}`}
+                          />
                         </div>
                         <div className="flex flex-col min-w-0">
                           <h3 className="font-semibold text-foreground truncate text-sm">
@@ -1748,7 +1767,7 @@ export default function UserPage() {
                     流量限制、规则数量、到期时间、流量重置时间将自动继承用户设置
                   </div>
 
-                  <div className="grid gap-2 max-h-72 overflow-y-auto pr-1">
+                  <div className="grid gap-2 max-h-72 overflow-y-auto pr-1 scrollbar-hide">
                     {tunnels.map((tunnel) => {
                       const isAssigned = isTunnelAssigned(tunnel.id);
                       const isSelected = batchTunnelSelections.has(tunnel.id);

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

@@ -19,10 +19,5 @@ export function CardHeader({
 }
 
 export function CardBody({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <CardContent
-      className={cn("p-4 md:p-6", className)}
-      {...props}
-    />
-  );
+  return <CardContent className={cn("p-4 md:p-6", className)} {...props} />;
 }

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

@@ -51,7 +51,11 @@ export interface DropdownMenuProps {
 export function DropdownMenu({ children, className }: DropdownMenuProps) {
   const { align } = React.useContext(DropdownContext);
 
-  return <DropdownMenuContent align={align} className={className}>{children}</DropdownMenuContent>;
+  return (
+    <DropdownMenuContent align={align} className={className}>
+      {children}
+    </DropdownMenuContent>
+  );
 }
 
 export interface DropdownItemProps {

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

@@ -296,7 +296,7 @@ export function Select<T>({
       <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",
+          "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 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
           placementClasses,
         )}
         id={`${generatedId}-listbox`}
@@ -414,8 +414,8 @@ export function Select<T>({
           <option value="">{placeholder ?? "请选择"}</option>
           {options.map((option) => (
             <option
-              className="bg-background text-foreground"
               key={option.key}
+              className="bg-background text-foreground"
               disabled={disabled.has(option.key)}
               value={option.key}
             >

vite-frontend/src/themes/context.tsx

@@ -5,6 +5,8 @@
  * re-renders when the active theme changes.
  */
 
+import type { ThemePackage, ComponentKey, LayoutKey, PageKey } from "./types";
+
 import React, {
   createContext,
   useContext,
@@ -14,7 +16,6 @@ import React, {
   useMemo,
 } from "react";
 
-import type { ThemePackage, ComponentKey, LayoutKey, PageKey } from "./types";
 import {
   subscribe,
   getActiveTheme,
@@ -59,11 +60,20 @@ interface ThemeContextValue {
   unregister: (id: string) => void;
 
   /** Resolve a component (returns themed override or fallback). */
-  component: <P = any>(key: ComponentKey, fallback: React.ComponentType<P>) => React.ComponentType<P>;
+  component: <P = any>(
+    key: ComponentKey,
+    fallback: React.ComponentType<P>,
+  ) => React.ComponentType<P>;
   /** Resolve a layout. */
-  layout: (key: LayoutKey, fallback: React.ComponentType<{ children: React.ReactNode }>) => React.ComponentType<{ children: React.ReactNode }>;
+  layout: (
+    key: LayoutKey,
+    fallback: React.ComponentType<{ children: React.ReactNode }>,
+  ) => React.ComponentType<{ children: React.ReactNode }>;
   /** Resolve a page. */
-  page: <P = any>(key: PageKey, fallback: React.ComponentType<P>) => React.ComponentType<P>;
+  page: <P = any>(
+    key: PageKey,
+    fallback: React.ComponentType<P>,
+  ) => React.ComponentType<P>;
 }
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
@@ -73,6 +83,7 @@ const ThemeContext = createContext<ThemeContextValue | null>(null);
 // We use a monotonic counter to create new snapshot references when the
 // registry notifies.
 let snapshotCounter = 0;
+
 function getSnapshot() {
   return snapshotCounter;
 }
@@ -81,6 +92,7 @@ const originalSubscribe = (onStoreChange: () => void) => {
     snapshotCounter++;
     onStoreChange();
   });
+
   return unsub;
 };
 
@@ -98,7 +110,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   useEffect(() => {
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = () => reapplyActiveTheme();
+
     mq.addEventListener("change", handler);
+
     return () => mq.removeEventListener("change", handler);
   }, []);
 
@@ -115,27 +129,27 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const register = useCallback((pkg: ThemePackage) => registerTheme(pkg), []);
   const unregister = useCallback((id: string) => unregisterTheme(id), []);
 
-  const value = useMemo<ThemeContextValue>(() => ({
-    activeTheme: getActiveTheme(),
-    activeThemeId: getActiveThemeId(),
-    themes: getRegisteredThemes(),
-    mode: getSavedMode(),
-    effectiveMode: getEffectiveMode(),
-    switchTheme,
-    resetTheme,
-    setMode,
-    register,
-    unregister,
-    component: resolveComponent,
-    layout: resolveLayout,
-    page: resolvePage,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [snapshotCounter, switchTheme, resetTheme, setMode, register, unregister]);
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      activeTheme: getActiveTheme(),
+      activeThemeId: getActiveThemeId(),
+      themes: getRegisteredThemes(),
+      mode: getSavedMode(),
+      effectiveMode: getEffectiveMode(),
+      switchTheme,
+      resetTheme,
+      setMode,
+      register,
+      unregister,
+      component: resolveComponent,
+      layout: resolveLayout,
+      page: resolvePage,
+    }),
+    [snapshotCounter, switchTheme, resetTheme, setMode, register, unregister],
+  );
 
   return (
-    <ThemeContext.Provider value={value}>
-      {children}
-    </ThemeContext.Provider>
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
   );
 };
 
@@ -144,7 +158,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 /** Access the full theme context. */
 export function useThemeContext(): ThemeContextValue {
   const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error("useThemeContext must be used within <ThemeProvider>");
+
+  if (!ctx)
+    throw new Error("useThemeContext must be used within <ThemeProvider>");
+
   return ctx;
 }
 
@@ -166,6 +183,7 @@ export function useThemedComponent<P = any>(
   fallback: React.ComponentType<P>,
 ): React.ComponentType<P> {
   const ctx = useThemeContext();
+
   return ctx.component(key, fallback);
 }
 
@@ -175,6 +193,7 @@ export function useThemedLayout(
   fallback: React.ComponentType<{ children: React.ReactNode }>,
 ): React.ComponentType<{ children: React.ReactNode }> {
   const ctx = useThemeContext();
+
   return ctx.layout(key, fallback);
 }
 
@@ -184,5 +203,6 @@ export function useThemedPage<P = any>(
   fallback: React.ComponentType<P>,
 ): React.ComponentType<P> {
   const ctx = useThemeContext();
+
   return ctx.page(key, fallback);
 }

vite-frontend/src/themes/example-cyberpunk/components/button.tsx

@@ -10,10 +10,11 @@
  *    or you can build a completely new component from scratch.
  */
 
+import type { ButtonProps } from "@/shadcn-bridge/heroui/button";
+
 import React from "react";
 
 // Import the original Button's props interface for compatibility
-import type { ButtonProps } from "@/shadcn-bridge/heroui/button";
 // Optionally import the original to wrap it
 import { Button as OriginalButton } from "@/shadcn-bridge/heroui/button";
 

vite-frontend/src/themes/example-cyberpunk/index.ts

@@ -12,6 +12,7 @@
  */
 
 import type { ThemePackage } from "../types";
+
 import { CyberpunkButton } from "./components/button";
 
 const cyberpunkTheme: ThemePackage = {

vite-frontend/src/themes/registry.ts

@@ -9,7 +9,13 @@
  * integration lives in `./context.tsx`.
  */
 
-import type { ThemePackage, ThemeTokens, ComponentKey, LayoutKey, PageKey } from "./types";
+import type {
+  ThemePackage,
+  ThemeTokens,
+  ComponentKey,
+  LayoutKey,
+  PageKey,
+} from "./types";
 
 // ─── internal state ──────────────────────────────────────────────────────────
 
@@ -62,7 +68,7 @@ export function getActiveThemeId(): string | null {
 
 /** Get the currently active ThemePackage (or null). */
 export function getActiveTheme(): ThemePackage | null {
-  return activeId ? installed.get(activeId) ?? null : null;
+  return activeId ? (installed.get(activeId) ?? null) : null;
 }
 
 // ─── theme mode ──────────────────────────────────────────────────────────────
@@ -71,13 +77,18 @@ export type ThemeMode = "light" | "dark" | "system";
 
 export function resolveSystemMode(): "light" | "dark" {
   if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
 }
 
 export function getSavedMode(): ThemeMode {
   if (typeof window === "undefined") return "system";
   const raw = localStorage.getItem(MODE_KEY);
+
   if (raw === "light" || raw === "dark" || raw === "system") return raw;
+
   return "system";
 }
 
@@ -88,6 +99,7 @@ export function saveMode(mode: ThemeMode): void {
 
 export function getEffectiveMode(): "light" | "dark" {
   const mode = getSavedMode();
+
   return mode === "system" ? resolveSystemMode() : mode;
 }
 
@@ -103,8 +115,10 @@ export function getEffectiveMode(): "light" | "dark" {
  */
 export function activateTheme(id: string): void {
   const pkg = installed.get(id);
+
   if (!pkg) {
     console.warn(`[FLVX themes] Theme "${id}" is not registered.`);
+
     return;
   }
 
@@ -116,6 +130,7 @@ export function activateTheme(id: string): void {
   // Inject tokens
   const mode = getEffectiveMode();
   const tokens = mode === "dark" ? pkg.tokens?.dark : pkg.tokens?.light;
+
   if (tokens) injectTokens(tokens);
 
   // Inject custom CSS
@@ -128,6 +143,7 @@ export function activateTheme(id: string): void {
 
   // Update dark class
   const root = document.documentElement;
+
   root.classList.toggle("dark", mode === "dark");
   root.style.colorScheme = mode;
 
@@ -143,6 +159,7 @@ export function activateTheme(id: string): void {
 /** Deactivate the current theme, reverting all overrides. */
 export function deactivateTheme(): void {
   const prev = activeId ? installed.get(activeId) : null;
+
   prev?.onDeactivate?.();
 
   // Remove injected tokens
@@ -163,20 +180,24 @@ export function reapplyActiveTheme(): void {
     const id = activeId;
     // quick re-inject without full lifecycle
     const pkg = installed.get(id);
+
     if (!pkg) return;
 
     clearInjectedTokens();
     const mode = getEffectiveMode();
     const tokens = mode === "dark" ? pkg.tokens?.dark : pkg.tokens?.light;
+
     if (tokens) injectTokens(tokens);
 
     const root = document.documentElement;
+
     root.classList.toggle("dark", mode === "dark");
     root.style.colorScheme = mode;
   } else {
     // No theme active — just set dark class based on mode
     const mode = getEffectiveMode();
     const root = document.documentElement;
+
     root.classList.toggle("dark", mode === "dark");
     root.style.colorScheme = mode;
   }
@@ -195,6 +216,7 @@ export function resolveComponent<P = any>(
 ): React.ComponentType<P> {
   const pkg = activeId ? installed.get(activeId) : null;
   const override = pkg?.components?.[key];
+
   return (override as React.ComponentType<P>) ?? fallback;
 }
 
@@ -204,6 +226,7 @@ export function resolveLayout(
   fallback: React.ComponentType<{ children: React.ReactNode }>,
 ): React.ComponentType<{ children: React.ReactNode }> {
   const pkg = activeId ? installed.get(activeId) : null;
+
   return pkg?.layouts?.[key] ?? fallback;
 }
 
@@ -214,6 +237,7 @@ export function resolvePage<P = any>(
 ): React.ComponentType<P> {
   const pkg = activeId ? installed.get(activeId) : null;
   const override = pkg?.pages?.[key];
+
   return (override as React.ComponentType<P>) ?? fallback;
 }
 
@@ -221,6 +245,7 @@ export function resolvePage<P = any>(
 
 export function subscribe(listener: ChangeListener): () => void {
   changeListeners.add(listener);
+
   return () => changeListeners.delete(listener);
 }
 
@@ -232,6 +257,7 @@ export function subscribe(listener: ChangeListener): () => void {
  */
 export function initThemeSystem(): void {
   const savedId = localStorage.getItem(STORAGE_KEY);
+
   if (savedId && installed.has(savedId)) {
     activateTheme(savedId);
   } else {
@@ -246,6 +272,7 @@ const injectedVars: string[] = [];
 
 function injectTokens(tokens: ThemeTokens): void {
   const root = document.documentElement;
+
   for (const [varName, value] of Object.entries(tokens)) {
     if (value !== undefined) {
       root.style.setProperty(varName, value);
@@ -256,6 +283,7 @@ function injectTokens(tokens: ThemeTokens): void {
 
 function clearInjectedTokens(): void {
   const root = document.documentElement;
+
   for (const varName of injectedVars) {
     root.style.removeProperty(varName);
   }

vite-frontend/src/themes/types.ts

@@ -182,7 +182,11 @@ export type ComponentKey =
  * All overridable layout keys.
  * Layouts receive `{ children: React.ReactNode }` as props.
  */
-export type LayoutKey = "AdminLayout" | "H5Layout" | "H5SimpleLayout" | "DefaultLayout";
+export type LayoutKey =
+  | "AdminLayout"
+  | "H5Layout"
+  | "H5SimpleLayout"
+  | "DefaultLayout";
 
 /**
  * All overridable page keys.
@@ -283,7 +287,9 @@ export interface ThemePackage {
   /**
    * Map of layout overrides.  Each layout receives `{ children }`.
    */
-  layouts?: Partial<Record<LayoutKey, ComponentType<{ children: React.ReactNode }>>>;
+  layouts?: Partial<
+    Record<LayoutKey, ComponentType<{ children: React.ReactNode }>>
+  >;
 
   /**
    * Map of page overrides.  Each page is a full route-level component.