diff --git a/src/go.mod b/src/go.mod
index 9d154fb..6377e99 100644
--- a/src/go.mod
+++ b/src/go.mod
@@ -10,4 +10,7 @@ require (
 	gopkg.in/yaml.v3 v3.0.1
 )
 
-require golang.org/x/sys v0.37.0
+require (
+	github.com/google/uuid v1.6.0
+	golang.org/x/sys v0.37.0
+)
diff --git a/src/go.sum b/src/go.sum
index a690b8e..f5485b2 100644
--- a/src/go.sum
+++ b/src/go.sum
@@ -1,3 +1,5 @@
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
 golang.org/x/sys v0.37.0 h1:fdNQudmxPjkdUTPnLn5mdQv7Zwvbvpaxqs831goi9kQ=
diff --git a/src/server/api/api.go b/src/server/api/api.go
index ff767cf..d14cee0 100644
--- a/src/server/api/api.go
+++ b/src/server/api/api.go
@@ -61,13 +61,19 @@ type Response struct {
 
 // RegisterRoutes 注册路由
 func (h *Handler) RegisterRoutes(mux *http.ServeMux) {
+	// API 路由
 	mux.HandleFunc("/api/mapping/create", h.authMiddleware(h.handleCreateMapping))
 	mux.HandleFunc("/api/mapping/remove", h.authMiddleware(h.handleRemoveMapping))
 	mux.HandleFunc("/api/mapping/list", h.authMiddleware(h.handleListMappings))
 	mux.HandleFunc("/api/stats/traffic", h.authMiddleware(h.handleGetTrafficStats))
 	mux.HandleFunc("/api/stats/history", h.authMiddleware(h.handleGetTrafficHistory))
 	mux.HandleFunc("/api/stats/monitor", h.authMiddleware(h.handleTrafficMonitor))
-	mux.HandleFunc("/admin", h.handleManagement)
+	mux.HandleFunc("/api/stats/connections", h.authMiddleware(h.handleGetActiveConnections))
+
+	// 页面路由
+	mux.HandleFunc("/", h.handleRoot)
+	mux.HandleFunc("/login", h.handleLogin)
+	mux.HandleFunc("/dashboard", h.handleDashboard)
 	mux.HandleFunc("/health", h.handleHealth)
 }
 
@@ -384,10 +390,31 @@ func (h *Handler) handleTrafficMonitor(w http.ResponseWriter, r *http.Request) {
 	fmt.Fprint(w, GetTraffticMonitorHTML())
 }
 
-// handleManagement 管理页面
-func (h *Handler) handleManagement(w http.ResponseWriter, r *http.Request) {
+// handleConnections 连接监控页面
+func (h *Handler) handleConnections(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	fmt.Fprint(w, GetManagementHTML())
+	fmt.Fprint(w, GetConnectionsHTML())
+}
+
+// handleRoot 根路径重定向
+func (h *Handler) handleRoot(w http.ResponseWriter, r *http.Request) {
+	if r.URL.Path != "/" {
+		http.NotFound(w, r)
+		return
+	}
+	http.Redirect(w, r, "/login", http.StatusFound)
+}
+
+// handleLogin 登录页面
+func (h *Handler) handleLogin(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	fmt.Fprint(w, GetLoginHTML())
+}
+
+// handleDashboard 仪表板页面
+func (h *Handler) handleDashboard(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	fmt.Fprint(w, GetDashboardHTML())
 }
 
 // handleGetTrafficHistory 获取历史流量统计
@@ -436,3 +463,27 @@ func (h *Handler) handleGetTrafficHistory(w http.ResponseWriter, r *http.Request
 		"count":   len(records),
 	})
 }
+
+// handleGetActiveConnections 获取所有活跃连接信息
+func (h *Handler) handleGetActiveConnections(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		h.writeError(w, http.StatusMethodNotAllowed, "只支持 GET 方法")
+		return
+	}
+
+	// 获取所有活跃连接
+	connectionsStats := h.forwarderMgr.GetAllActiveConnections()
+
+	// 按端口号排序
+	sort.Slice(connectionsStats, func(i, j int) bool {
+		return connectionsStats[i].SourcePort < connectionsStats[j].SourcePort
+	})
+
+	// 构建响应
+	response := stats.AllConnectionsStats{
+		Mappings:  connectionsStats,
+		Timestamp: time.Now().Unix(),
+	}
+
+	h.writeSuccess(w, "获取活跃连接成功", response)
+}
diff --git a/src/server/api/html.go b/src/server/api/html.go
index 0a945ed..7a78f4c 100644
--- a/src/server/api/html.go
+++ b/src/server/api/html.go
@@ -29,3 +29,45 @@ func GetManagementHTML() string {
 	}
 	return string(buf[:n])
 }
+
+func GetConnectionsHTML() string {
+	file, err := html.AssetsFS.Open("connections.html")
+	if err != nil {
+		return "<h1>Failed to load HTML</h1>"
+	}
+	defer file.Close()
+	buf := make([]byte, 40960) // 40KB buffer
+	n, err := file.Read(buf)
+	if err != nil {
+		return "<h1>Failed to read HTML</h1>"
+	}
+	return string(buf[:n])
+}
+
+func GetLoginHTML() string {
+	file, err := html.AssetsFS.Open("login.html")
+	if err != nil {
+		return "<h1>Failed to load HTML</h1>"
+	}
+	defer file.Close()
+	buf := make([]byte, 40960) // 40KB buffer
+	n, err := file.Read(buf)
+	if err != nil {
+		return "<h1>Failed to read HTML</h1>"
+	}
+	return string(buf[:n])
+}
+
+func GetDashboardHTML() string {
+	file, err := html.AssetsFS.Open("dashboard.html")
+	if err != nil {
+		return "<h1>Failed to load HTML</h1>"
+	}
+	defer file.Close()
+	buf := make([]byte, 81920) // 80KB buffer for dashboard
+	n, err := file.Read(buf)
+	if err != nil {
+		return "<h1>Failed to read HTML</h1>"
+	}
+	return string(buf[:n])
+}
diff --git a/src/server/forwarder/forwarder.go b/src/server/forwarder/forwarder.go
index ed0f13b..ecc2ddd 100644
--- a/src/server/forwarder/forwarder.go
+++ b/src/server/forwarder/forwarder.go
@@ -12,6 +12,8 @@ import (
 	"time"
 
 	"golang.org/x/time/rate"
+
+	"github.com/google/uuid"
 )
 
 // TunnelServer 隧道服务器接口
@@ -39,6 +41,19 @@ type Forwarder struct {
 	bytesReceived uint64        // 接收字节数
 	limiterOut    *rate.Limiter // 限速器（出方向）
 	limiterIn     *rate.Limiter // 限速器（入方向）
+
+	// 活跃连接管理
+	connections map[string]*activeConnection // 活跃连接映射
+	connMutex   sync.RWMutex                 // 连接映射锁
+}
+
+// activeConnection 活跃连接信息
+type activeConnection struct {
+	clientAddr    string
+	targetAddr    string
+	bytesSent     uint64
+	bytesReceived uint64
+	connectedAt   int64
 }
 
 // NewForwarder 创建新的端口转发器
@@ -57,15 +72,16 @@ func NewForwarder(sourcePort int, targetHost string, targetPort int, limit *int6
 		limiterIn = rate.NewLimiter(rate.Limit(*limit), burst)
 	}
 	return &Forwarder{
-		sourcePort: sourcePort,
-		targetPort: targetPort,
-		targetHost: targetHost,
-		cancel:     cancel,
-		ctx:        ctx,
-		useTunnel:  false,
-		limit:      limit,
-		limiterOut: limiterOut,
-		limiterIn:  limiterIn,
+		sourcePort:  sourcePort,
+		targetPort:  targetPort,
+		targetHost:  targetHost,
+		cancel:      cancel,
+		ctx:         ctx,
+		useTunnel:   false,
+		limit:       limit,
+		limiterOut:  limiterOut,
+		limiterIn:   limiterIn,
+		connections: make(map[string]*activeConnection),
 	}
 }
 
@@ -95,6 +111,7 @@ func NewTunnelForwarder(sourcePort int, targetHost string, targetPort int, tunne
 		limit:        limit,
 		limiterOut:   limiterOut,
 		limiterIn:    limiterIn,
+		connections:  make(map[string]*activeConnection),
 	}
 }
 
@@ -189,15 +206,19 @@ func (rlr *rateLimitedReader) Read(p []byte) (int, error) {
 
 // countingWriter 带统计的 Writer
 type countingWriter struct {
-	w       io.Writer
-	counter *uint64
-	port    int
+	w           io.Writer
+	counter     *uint64
+	port        int
+	connCounter *uint64 // 连接级别的计数器
 }
 
 func (cw *countingWriter) Write(p []byte) (int, error) {
 	n, err := cw.w.Write(p)
 	if n > 0 {
 		atomic.AddUint64(cw.counter, uint64(n))
+		if cw.connCounter != nil {
+			atomic.AddUint64(cw.connCounter, uint64(n))
+		}
 	}
 	return n, err
 }
@@ -207,7 +228,11 @@ func (f *Forwarder) handleConnection(clientConn net.Conn) {
 	defer f.wg.Done()
 	defer clientConn.Close()
 
-	log.Printf("端口 %d 收到新连接: %s", f.sourcePort, clientConn.RemoteAddr())
+	// 生成连接ID
+	connID := uuid.New().String()
+	clientAddr := clientConn.RemoteAddr().String()
+
+	log.Printf("端口 %d 收到新连接: %s (连接ID: %s)", f.sourcePort, clientAddr, connID)
 
 	var targetConn net.Conn
 	var err error
@@ -243,6 +268,30 @@ func (f *Forwarder) handleConnection(clientConn net.Conn) {
 
 	defer targetConn.Close()
 
+	// 记录活跃连接
+	targetAddr := fmt.Sprintf("%s:%d", f.targetHost, f.targetPort)
+	conn := &activeConnection{
+		clientAddr:    clientAddr,
+		targetAddr:    targetAddr,
+		bytesSent:     0,
+		bytesReceived: 0,
+		connectedAt:   time.Now().Unix(),
+	}
+	f.connMutex.Lock()
+	f.connections[connID] = conn
+	f.connMutex.Unlock()
+
+	// 连接关闭时移除记录
+	defer func() {
+		f.connMutex.Lock()
+		delete(f.connections, connID)
+		f.connMutex.Unlock()
+		log.Printf("端口 %d 连接关闭: %s (连接ID: %s, 发送: %d, 接收: %d)",
+			f.sourcePort, clientAddr, connID,
+			atomic.LoadUint64(&conn.bytesSent),
+			atomic.LoadUint64(&conn.bytesReceived))
+	}()
+
 	// 双向转发
 	var wg sync.WaitGroup
 	wg.Add(2)
@@ -256,9 +305,10 @@ func (f *Forwarder) handleConnection(clientConn net.Conn) {
 			ctx:     f.ctx,
 		}
 		writer := &countingWriter{
-			w:       targetConn,
-			counter: &f.bytesSent,
-			port:    f.sourcePort,
+			w:           targetConn,
+			counter:     &f.bytesSent,
+			port:        f.sourcePort,
+			connCounter: &conn.bytesSent,
 		}
 		n, _ := io.Copy(writer, reader)
 		log.Printf("端口 %d: 客户端->目标传输完成，本次发送 %d 字节 (总发送: %d)", f.sourcePort, n, atomic.LoadUint64(&f.bytesSent))
@@ -277,9 +327,10 @@ func (f *Forwarder) handleConnection(clientConn net.Conn) {
 			ctx:     f.ctx,
 		}
 		writer := &countingWriter{
-			w:       clientConn,
-			counter: &f.bytesReceived,
-			port:    f.sourcePort,
+			w:           clientConn,
+			counter:     &f.bytesReceived,
+			port:        f.sourcePort,
+			connCounter: &conn.bytesReceived,
 		}
 		n, _ := io.Copy(writer, reader)
 		log.Printf("端口 %d: 目标->客户端传输完成，本次接收 %d 字节 (总接收: %d)", f.sourcePort, n, atomic.LoadUint64(&f.bytesReceived))
@@ -442,3 +493,43 @@ func (m *Manager) GetAllTrafficStats() map[int]stats.TrafficStats {
 
 	return statsMap
 }
+
+// GetActiveConnections 获取某个转发器的活跃连接信息
+func (f *Forwarder) GetActiveConnections() []stats.ConnectionInfo {
+	f.connMutex.RLock()
+	defer f.connMutex.RUnlock()
+
+	connections := make([]stats.ConnectionInfo, 0, len(f.connections))
+	for _, conn := range f.connections {
+		connections = append(connections, stats.ConnectionInfo{
+			ClientAddr:    conn.clientAddr,
+			TargetAddr:    conn.targetAddr,
+			BytesSent:     atomic.LoadUint64(&conn.bytesSent),
+			BytesReceived: atomic.LoadUint64(&conn.bytesReceived),
+			ConnectedAt:   conn.connectedAt,
+		})
+	}
+
+	return connections
+}
+
+// GetAllActiveConnections 获取所有转发器的活跃连接信息
+func (m *Manager) GetAllActiveConnections() []stats.PortConnectionStats {
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+
+	allStats := make([]stats.PortConnectionStats, 0, len(m.forwarders))
+	for port, forwarder := range m.forwarders {
+		connections := forwarder.GetActiveConnections()
+		allStats = append(allStats, stats.PortConnectionStats{
+			SourcePort:        port,
+			TargetHost:        forwarder.targetHost,
+			TargetPort:        forwarder.targetPort,
+			UseTunnel:         forwarder.useTunnel,
+			ActiveConnections: connections,
+			TotalConnections:  len(connections),
+		})
+	}
+
+	return allStats
+}
diff --git a/src/server/html/dashboard.html b/src/server/html/dashboard.html
new file mode 100644
index 0000000..04923f5
--- /dev/null
+++ b/src/server/html/dashboard.html
@@ -0,0 +1,1337 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Go Tunnel 管理系统</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: #f0f2f5;
+            overflow-x: hidden;
+        }
+
+        #app {
+            display: flex;
+            min-height: 100vh;
+        }
+
+        /* 侧边栏样式 */
+        .sidebar {
+            width: 260px;
+            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px 0;
+            position: fixed;
+            height: 100vh;
+            overflow-y: auto;
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+
+        .sidebar.collapsed {
+            width: 80px;
+        }
+
+        .sidebar-header {
+            padding: 0 20px 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .sidebar-header h1 {
+            font-size: 1.5em;
+            font-weight: 700;
+        }
+
+        .sidebar.collapsed .sidebar-header h1 span {
+            display: none;
+        }
+
+        .toggle-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .toggle-btn:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .nav-menu {
+            list-style: none;
+            padding: 0 10px;
+        }
+
+        .nav-item {
+            margin-bottom: 5px;
+        }
+
+        .nav-link {
+            display: flex;
+            align-items: center;
+            padding: 14px 16px;
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            border-radius: 10px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+
+        .nav-link:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+        }
+
+        .nav-link.active {
+            background: rgba(255, 255, 255, 0.25);
+            color: white;
+            font-weight: 600;
+        }
+
+        .nav-icon {
+            font-size: 1.3em;
+            margin-right: 12px;
+            min-width: 24px;
+        }
+
+        .sidebar.collapsed .nav-text {
+            display: none;
+        }
+
+        .sidebar-footer {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            margin-right: 10px;
+        }
+
+        .sidebar.collapsed .user-info {
+            justify-content: center;
+        }
+
+        .sidebar.collapsed .user-details {
+            display: none;
+        }
+
+        .logout-btn {
+            background: rgba(255, 255, 255, 0.2);
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+            width: 100%;
+            margin-top: 10px;
+            font-size: 0.95em;
+        }
+
+        .logout-btn:hover {
+            background: rgba(255, 0, 0, 0.3);
+        }
+
+        /* 主内容区域 */
+        .main-content {
+            flex: 1;
+            margin-left: 260px;
+            transition: all 0.3s;
+        }
+
+        .sidebar.collapsed ~ .main-content {
+            margin-left: 80px;
+        }
+
+        .top-bar {
+            background: white;
+            padding: 20px 30px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+
+        .page-title {
+            font-size: 1.8em;
+            color: #333;
+            font-weight: 700;
+        }
+
+        .top-actions {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+
+        .refresh-btn {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.95em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .refresh-btn:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+        }
+
+        .status-badge {
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 0.9em;
+            font-weight: 600;
+        }
+
+        .status-online {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .status-offline {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .content-area {
+            padding: 30px;
+        }
+
+        /* 统计卡片 */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .stat-card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .stat-title {
+            color: #666;
+            font-size: 0.95em;
+            font-weight: 600;
+        }
+
+        .stat-icon {
+            font-size: 2em;
+            opacity: 0.3;
+        }
+
+        .stat-value {
+            font-size: 2.5em;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .stat-change {
+            margin-top: 10px;
+            font-size: 0.9em;
+            color: #28a745;
+        }
+
+        /* 表格样式 */
+        .data-table {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        }
+
+        .table-header {
+            padding: 20px 25px;
+            border-bottom: 2px solid #f0f2f5;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .table-title {
+            font-size: 1.3em;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .table-actions {
+            display: flex;
+            gap: 10px;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        thead {
+            background: #f8f9fa;
+        }
+
+        th {
+            padding: 15px 25px;
+            text-align: left;
+            font-weight: 600;
+            color: #666;
+            font-size: 0.9em;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        td {
+            padding: 18px 25px;
+            border-bottom: 1px solid #f0f2f5;
+        }
+
+        tbody tr {
+            transition: all 0.2s;
+        }
+
+        tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        /* 按钮样式 */
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.95em;
+            font-weight: 600;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-danger {
+            background: #dc3545;
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background: #c82333;
+        }
+
+        .btn-success {
+            background: #28a745;
+            color: white;
+        }
+
+        .btn-sm {
+            padding: 6px 12px;
+            font-size: 0.85em;
+        }
+
+        /* 模态框 */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+            animation: fadeIn 0.3s;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .modal {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            max-width: 600px;
+            width: 90%;
+            max-height: 90vh;
+            overflow-y: auto;
+            animation: slideUp 0.3s;
+        }
+
+        @keyframes slideUp {
+            from {
+                transform: translateY(50px);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 25px;
+        }
+
+        .modal-title {
+            font-size: 1.5em;
+            font-weight: 700;
+            color: #333;
+        }
+
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 1.5em;
+            cursor: pointer;
+            color: #999;
+            padding: 0;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            transition: all 0.3s;
+        }
+
+        .close-btn:hover {
+            background: #f0f2f5;
+            color: #333;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #333;
+            font-weight: 600;
+            font-size: 0.95em;
+        }
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1em;
+            transition: all 0.3s;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+        }
+
+        .form-help {
+            font-size: 0.85em;
+            color: #999;
+            margin-top: 5px;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .checkbox-group input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            margin-right: 10px;
+            cursor: pointer;
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 0.85em;
+            font-weight: 600;
+        }
+
+        .badge-tunnel {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            color: white;
+        }
+
+        .badge-direct {
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            color: white;
+        }
+
+        /* 空状态 */
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #999;
+        }
+
+        .empty-state-icon {
+            font-size: 4em;
+            margin-bottom: 20px;
+            opacity: 0.3;
+        }
+
+        .empty-state-title {
+            font-size: 1.3em;
+            margin-bottom: 10px;
+            color: #666;
+        }
+
+        /* 加载动画 */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(102, 126, 234, 0.3);
+            border-radius: 50%;
+            border-top-color: #667eea;
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* 通知 */
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: white;
+            padding: 15px 20px;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+            z-index: 3000;
+            animation: slideInRight 0.3s;
+            max-width: 400px;
+        }
+
+        @keyframes slideInRight {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+
+        .notification-success {
+            border-left: 4px solid #28a745;
+        }
+
+        .notification-error {
+            border-left: 4px solid #dc3545;
+        }
+
+        .notification-info {
+            border-left: 4px solid #17a2b8;
+        }
+
+        /* 响应式设计 */
+        @media (max-width: 768px) {
+            .sidebar {
+                transform: translateX(-100%);
+            }
+
+            .sidebar.show {
+                transform: translateX(0);
+            }
+
+            .main-content {
+                margin-left: 0;
+            }
+
+            .sidebar.collapsed ~ .main-content {
+                margin-left: 0;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .top-bar {
+                padding: 15px 20px;
+            }
+
+            .content-area {
+                padding: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+            <div class="sidebar-header">
+                <h1><span>🚀 </span>Go Tunnel</h1>
+            </div>
+
+            <ul class="nav-menu">
+                <li class="nav-item" v-for="item in menuItems" :key="item.id">
+                    <a class="nav-link" 
+                       :class="{ active: currentPage === item.id }" 
+                       @click="changePage(item.id)">
+                        <span class="nav-icon">{{ item.icon }}</span>
+                        <span class="nav-text">{{ item.text }}</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+        <div class="main-content">
+            <div class="top-bar">
+                <div style="display: flex; align-items: center; gap: 15px;">
+                    <button class="toggle-btn" @click="sidebarCollapsed = !sidebarCollapsed">
+                        {{ sidebarCollapsed ? '☰' : '✕' }}
+                    </button>
+                    <h2 class="page-title">{{ currentPageTitle }}</h2>
+                </div>
+
+                <div class="top-actions">
+                    <span class="status-badge" :class="systemStatus ? 'status-online' : 'status-offline'">
+                        {{ systemStatus ? '● 系统正常' : '● 离线' }}
+                    </span>
+                    <button class="refresh-btn" @click="refreshData">
+                        <span>🔄</span> 刷新
+                    </button>
+                    <button class="btn btn-danger btn-sm" @click="logout">退出登录</button>
+                </div>
+            </div>
+
+            <div class="content-area">
+                <!-- 仪表板页面 -->
+                <div v-if="currentPage === 'dashboard'">
+                    <div class="stats-grid">
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">端口映射</span>
+                                <span class="stat-icon">🔌</span>
+                            </div>
+                            <div class="stat-value">{{ stats.mappings }}</div>
+                            <div class="stat-change">活跃中</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">活跃连接</span>
+                                <span class="stat-icon">🔗</span>
+                            </div>
+                            <div class="stat-value">{{ stats.connections }}</div>
+                            <div class="stat-change">实时监控</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">总发送流量</span>
+                                <span class="stat-icon">📤</span>
+                            </div>
+                            <div class="stat-value">{{ formatBytes(stats.totalSent) }}</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">总接收流量</span>
+                                <span class="stat-icon">📥</span>
+                            </div>
+                            <div class="stat-value">{{ formatBytes(stats.totalReceived) }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 映射管理页面 -->
+                <component :is="currentComponent" 
+                           :api-key="apiKey"
+                           :refresh-trigger="refreshTrigger"
+                           @notify="showNotification">
+                </component>
+            </div>
+        </div>
+
+        <!-- 通知组件 -->
+        <div v-if="notification.show" 
+             class="notification" 
+             :class="'notification-' + notification.type">
+            {{ notification.message }}
+        </div>
+    </div>
+
+    <script>
+        const { createApp } = Vue;
+
+        // 映射管理组件
+        const MappingsComponent = {
+            template: `
+                <div>
+                    <div class="data-table">
+                        <div class="table-header">
+                            <h3 class="table-title">端口映射列表</h3>
+                            <div class="table-actions">
+                                <button class="btn btn-primary" @click="showCreateModal = true">
+                                    ➕ 新建映射
+                                </button>
+                            </div>
+                        </div>
+
+                        <table v-if="mappings.length > 0">
+                            <thead>
+                                <tr>
+                                    <th>源端口</th>
+                                    <th>目标主机</th>
+                                    <th>目标端口</th>
+                                    <th>模式</th>
+                                    <th>带宽限制</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="mapping in mappings" :key="mapping.source_port">
+                                    <td><strong>{{ mapping.source_port }}</strong></td>
+                                    <td>{{ mapping.target_host }}</td>
+                                    <td>{{ mapping.target_port }}</td>
+                                    <td>
+                                        <span class="badge" :class="mapping.use_tunnel ? 'badge-tunnel' : 'badge-direct'">
+                                            {{ mapping.use_tunnel ? '🚇 隧道' : '🔗 直连' }}
+                                        </span>
+                                    </td>
+                                    <td>{{ mapping.bandwidth_limit ? formatBytes(mapping.bandwidth_limit) + '/s' : '无限制' }}</td>
+                                    <td>
+                                        <button class="btn btn-danger btn-sm" @click="deleteMapping(mapping.source_port)">
+                                            删除
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+                        <div v-else class="empty-state">
+                            <div class="empty-state-icon">📭</div>
+                            <h3 class="empty-state-title">暂无端口映射</h3>
+                            <p>点击"新建映射"按钮创建您的第一个端口映射</p>
+                        </div>
+                    </div>
+
+                    <!-- 创建映射模态框 -->
+                    <div v-if="showCreateModal" class="modal-overlay" @click.self="showCreateModal = false">
+                        <div class="modal">
+                            <div class="modal-header">
+                                <h3 class="modal-title">创建端口映射</h3>
+                                <button class="close-btn" @click="showCreateModal = false">×</button>
+                            </div>
+
+                            <form @submit.prevent="createMapping">
+                                <div class="form-group">
+                                    <label>源端口</label>
+                                    <input type="number" v-model.number="newMapping.sourcePort" required min="1" max="65535">
+                                    <small class="form-help">本地监听的端口号</small>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>目标主机</label>
+                                    <input type="text" v-model="newMapping.targetHost" required placeholder="example.com 或 192.168.1.1">
+                                    <small class="form-help">支持域名或IP地址</small>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>目标端口</label>
+                                    <input type="number" v-model.number="newMapping.targetPort" required min="1" max="65535">
+                                </div>
+
+                                <div class="checkbox-group">
+                                    <input type="checkbox" id="useTunnel" v-model="newMapping.useTunnel">
+                                    <label for="useTunnel">使用隧道模式</label>
+                                </div>
+
+                                <div class="form-group">
+                                    <label>带宽限制（可选）</label>
+                                    <input type="number" v-model.number="newMapping.bandwidthLimit" min="0" placeholder="留空表示无限制">
+                                    <small class="form-help">单位：字节/秒，例如 1048576 表示 1MB/s</small>
+                                </div>
+
+                                <div style="display: flex; gap: 10px; margin-top: 25px;">
+                                    <button type="submit" class="btn btn-primary" style="flex: 1;">创建</button>
+                                    <button type="button" class="btn" style="flex: 1; background: #6c757d; color: white;" @click="showCreateModal = false">取消</button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            `,
+            props: ['apiKey', 'refreshTrigger'],
+            emits: ['notify'],
+            data() {
+                return {
+                    mappings: [],
+                    showCreateModal: false,
+                    newMapping: {
+                        sourcePort: '',
+                        targetHost: '',
+                        targetPort: '',
+                        useTunnel: false,
+                        bandwidthLimit: null
+                    }
+                };
+            },
+            mounted() {
+                this.loadMappings();
+            },
+            watch: {
+                refreshTrigger() {
+                    this.loadMappings();
+                }
+            },
+            methods: {
+                async loadMappings() {
+                    try {
+                        const response = await axios.get('/api/mapping/list', {
+                            headers: { 'X-API-Key': this.apiKey }
+                        });
+                        if (response.data.success) {
+                            this.mappings = response.data.data.mappings || [];
+                        }
+                    } catch (error) {
+                        this.$emit('notify', 'error', '加载映射列表失败');
+                    }
+                },
+                async createMapping() {
+                    try {
+                        const data = {
+                            source_port: this.newMapping.sourcePort,
+                            target_host: this.newMapping.targetHost,
+                            target_port: this.newMapping.targetPort,
+                            use_tunnel: this.newMapping.useTunnel
+                        };
+                        
+                        if (this.newMapping.bandwidthLimit) {
+                            data.bandwidth_limit = this.newMapping.bandwidthLimit;
+                        }
+
+                        const response = await axios.post('/api/mapping/create', data, {
+                            headers: { 'X-API-Key': this.apiKey }
+                        });
+
+                        if (response.data.success) {
+                            this.$emit('notify', 'success', '映射创建成功');
+                            this.showCreateModal = false;
+                            this.resetForm();
+                            this.loadMappings();
+                        }
+                    } catch (error) {
+                        this.$emit('notify', 'error', error.response?.data?.message || '创建映射失败');
+                    }
+                },
+                async deleteMapping(port) {
+                    if (!confirm(`确定要删除端口 ${port} 的映射吗？`)) {
+                        return;
+                    }
+
+                    try {
+                        const response = await axios.post('/api/mapping/remove', 
+                            { port }, 
+                            { headers: { 'X-API-Key': this.apiKey } }
+                        );
+
+                        if (response.data.success) {
+                            this.$emit('notify', 'success', '映射删除成功');
+                            this.loadMappings();
+                        }
+                    } catch (error) {
+                        this.$emit('notify', 'error', '删除映射失败');
+                    }
+                },
+                resetForm() {
+                    this.newMapping = {
+                        sourcePort: '',
+                        targetHost: '',
+                        targetPort: '',
+                        useTunnel: false,
+                        bandwidthLimit: null
+                    };
+                },
+                formatBytes(bytes) {
+                    if (!bytes) return '0 B';
+                    const k = 1024;
+                    const sizes = ['B', 'KB', 'MB', 'GB'];
+                    const i = Math.floor(Math.log(bytes) / Math.log(k));
+                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+                }
+            }
+        };
+
+        // 流量监控组件
+        const TrafficComponent = {
+            template: `
+                <div style="height: calc(100vh - 160px);">
+                    <iframe :src="'/api/stats/monitor?api_key=' + apiKey" 
+                            style="width: 100%; height: 100%; border: none;">
+                    </iframe>
+                </div>
+            `,
+            props: ['apiKey', 'refreshTrigger'],
+            data() {
+                return {
+                    apiKey: this.apiKey
+                };
+            },
+            mounted() {
+                setTimeout(() => {
+                }, 100);
+            },
+            watch: {
+            },
+            beforeUnmount() {
+            },
+            methods: {
+            }
+        };
+
+        // 连接监控组件
+        const ConnectionsComponent = {
+            template: `
+                <div>
+                    <div class="stats-grid" style="margin-bottom: 30px;">
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">端口映射数</span>
+                                <span class="stat-icon">🔌</span>
+                            </div>
+                            <div class="stat-value">{{ mappings.length }}</div>
+                            <div class="stat-change">{{ activeMappingsCount }} 个有活跃连接</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">总活跃连接</span>
+                                <span class="stat-icon">🔗</span>
+                            </div>
+                            <div class="stat-value">{{ totalConnections }}</div>
+                            <div class="stat-change">实时监控</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">平均连接/端口</span>
+                                <span class="stat-icon">📊</span>
+                            </div>
+                            <div class="stat-value">{{ averageConnections }}</div>
+                            <div class="stat-change">{{ maxConnectionsPort ? '最多: 端口 ' + maxConnectionsPort : '-' }}</div>
+                        </div>
+
+                        <div class="stat-card">
+                            <div class="stat-header">
+                                <span class="stat-title">连接总流量</span>
+                                <span class="stat-icon">💾</span>
+                            </div>
+                            <div class="stat-value">{{ formatBytes(totalTraffic) }}</div>
+                            <div class="stat-change">所有活跃连接</div>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                        <h3 style="font-size: 1.3em; color: #333;">活跃连接列表</h3>
+                        <label style="display: flex; align-items: center; gap: 8px;">
+                            <input type="checkbox" v-model="autoRefresh" @change="toggleAutoRefresh">
+                            <span>自动刷新 (5秒)</span>
+                        </label>
+                    </div>
+
+                    <div v-if="mappings.length === 0" class="data-table">
+                        <div class="empty-state">
+                            <div class="empty-state-icon">🔗</div>
+                            <h3 class="empty-state-title">暂无端口映射</h3>
+                            <p>请先在映射管理中创建端口映射</p>
+                        </div>
+                    </div>
+
+                    <div v-for="mapping in mappings" :key="mapping.source_port" class="data-table" style="margin-bottom: 20px;">
+                        <div class="table-header">
+                            <div>
+                                <h3 class="table-title">
+                                    端口 {{ mapping.source_port }} → {{ mapping.target_host }}:{{ mapping.target_port }}
+                                </h3>
+                                <span class="badge" :class="mapping.use_tunnel ? 'badge-tunnel' : 'badge-direct'" style="margin-left: 10px;">
+                                    {{ mapping.use_tunnel ? '🚇 隧道' : '🔗 直连' }}
+                                </span>
+                            </div>
+                            <div style="display: flex; gap: 10px; align-items: center;">
+                                <div class="badge" style="background: #667eea; color: white; font-size: 1em;">
+                                    {{ mapping.total_connections }} 个连接
+                                </div>
+                                <div v-if="mapping.active_connections && mapping.active_connections.length > 0" 
+                                     class="badge" style="background: #28a745; color: white; font-size: 0.9em;">
+                                    总流量: {{ formatBytes(getMappingTraffic(mapping)) }}
+                                </div>
+                            </div>
+                        </div>
+
+                        <table v-if="mapping.active_connections && mapping.active_connections.length > 0">
+                            <thead>
+                                <tr>
+                                    <th>客户端地址</th>
+                                    <th>目标地址</th>
+                                    <th>已发送</th>
+                                    <th>已接收</th>
+                                    <th>总流量</th>
+                                    <th>连接时长</th>
+                                    <th>速率</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="(conn, index) in mapping.active_connections" :key="index">
+                                    <td>
+                                        <div style="display: flex; align-items: center; gap: 8px;">
+                                            <span style="color: #28a745; font-size: 1.2em;">●</span>
+                                            <span>{{ conn.client_addr }}</span>
+                                        </div>
+                                    </td>
+                                    <td>{{ conn.target_addr }}</td>
+                                    <td>{{ formatBytes(conn.bytes_sent) }}</td>
+                                    <td>{{ formatBytes(conn.bytes_received) }}</td>
+                                    <td><strong>{{ formatBytes(conn.bytes_sent + conn.bytes_received) }}</strong></td>
+                                    <td>{{ formatDuration(conn.connected_at) }}</td>
+                                    <td>
+                                        <div style="font-size: 0.9em; color: #666;">
+                                            {{ getConnectionSpeed(conn) }}
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                            <tfoot>
+                                <tr style="background: #f8f9fa; font-weight: bold;">
+                                    <td colspan="2">统计</td>
+                                    <td>{{ formatBytes(sumField(mapping.active_connections, 'bytes_sent')) }}</td>
+                                    <td>{{ formatBytes(sumField(mapping.active_connections, 'bytes_received')) }}</td>
+                                    <td>{{ formatBytes(getMappingTraffic(mapping)) }}</td>
+                                    <td colspan="2">平均时长: {{ getAverageDuration(mapping.active_connections) }}</td>
+                                </tr>
+                            </tfoot>
+                        </table>
+
+                        <div v-else class="empty-state" style="padding: 30px;">
+                            <p style="color: #999; margin: 0;">暂无活跃连接</p>
+                        </div>
+                    </div>
+                </div>
+            `,
+            props: ['apiKey', 'refreshTrigger'],
+            emits: ['notify'],
+            data() {
+                return {
+                    mappings: [],
+                    autoRefresh: false,
+                    refreshInterval: null
+                };
+            },
+            computed: {
+                totalConnections() {
+                    return this.mappings.reduce((sum, m) => sum + (m.total_connections || 0), 0);
+                },
+                activeMappingsCount() {
+                    return this.mappings.filter(m => m.total_connections > 0).length;
+                },
+                averageConnections() {
+                    if (this.mappings.length === 0) return 0;
+                    return (this.totalConnections / this.mappings.length).toFixed(1);
+                },
+                maxConnectionsPort() {
+                    if (this.mappings.length === 0) return null;
+                    const max = this.mappings.reduce((prev, current) => 
+                        (prev.total_connections > current.total_connections) ? prev : current
+                    );
+                    return max.total_connections > 0 ? max.source_port : null;
+                },
+                totalTraffic() {
+                    let total = 0;
+                    this.mappings.forEach(mapping => {
+                        if (mapping.active_connections) {
+                            mapping.active_connections.forEach(conn => {
+                                total += (conn.bytes_sent || 0) + (conn.bytes_received || 0);
+                            });
+                        }
+                    });
+                    return total;
+                }
+            },
+            mounted() {
+                this.loadConnections();
+            },
+            watch: {
+                refreshTrigger() {
+                    this.loadConnections();
+                }
+            },
+            beforeUnmount() {
+                if (this.refreshInterval) {
+                    clearInterval(this.refreshInterval);
+                }
+            },
+            methods: {
+                async loadConnections() {
+                    try {
+                        const response = await axios.get('/api/stats/connections', {
+                            headers: { 'X-API-Key': this.apiKey }
+                        });
+
+                        if (response.data.success) {
+                            this.mappings = response.data.data.mappings || [];
+                        }
+                    } catch (error) {
+                        console.error('加载连接数据失败:', error);
+                    }
+                },
+                toggleAutoRefresh() {
+                    if (this.autoRefresh) {
+                        this.refreshInterval = setInterval(() => this.loadConnections(), 5000);
+                    } else {
+                        if (this.refreshInterval) {
+                            clearInterval(this.refreshInterval);
+                            this.refreshInterval = null;
+                        }
+                    }
+                },
+                getMappingTraffic(mapping) {
+                    if (!mapping.active_connections) return 0;
+                    return mapping.active_connections.reduce((sum, conn) => 
+                        sum + (conn.bytes_sent || 0) + (conn.bytes_received || 0), 0
+                    );
+                },
+                sumField(connections, field) {
+                    return connections.reduce((sum, conn) => sum + (conn[field] || 0), 0);
+                },
+                getAverageDuration(connections) {
+                    if (!connections || connections.length === 0) return '-';
+                    const now = Math.floor(Date.now() / 1000);
+                    const avgDuration = connections.reduce((sum, conn) => 
+                        sum + (now - conn.connected_at), 0
+                    ) / connections.length;
+                    return this.formatDurationValue(avgDuration);
+                },
+                getConnectionSpeed(conn) {
+                    const now = Math.floor(Date.now() / 1000);
+                    const duration = now - conn.connected_at;
+                    if (duration === 0) return '-';
+                    const totalBytes = (conn.bytes_sent || 0) + (conn.bytes_received || 0);
+                    const speed = totalBytes / duration;
+                    return this.formatBytes(speed) + '/s';
+                },
+                formatBytes(bytes) {
+                    if (!bytes) return '0 B';
+                    const k = 1024;
+                    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+                    const i = Math.floor(Math.log(bytes) / Math.log(k));
+                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+                },
+                formatDuration(timestamp) {
+                    if (!timestamp) return '-';
+                    const now = Math.floor(Date.now() / 1000);
+                    const duration = now - timestamp;
+                    return this.formatDurationValue(duration);
+                },
+                formatDurationValue(duration) {
+                    if (duration < 60) return duration + ' 秒';
+                    if (duration < 3600) return Math.floor(duration / 60) + ' 分钟';
+                    if (duration < 86400) return Math.floor(duration / 3600) + ' 小时';
+                    return Math.floor(duration / 86400) + ' 天';
+                }
+            }
+        };
+
+        // 主应用
+        createApp({
+            components: {
+                'mappings-component': MappingsComponent,
+                'traffic-component': TrafficComponent,
+                'connections-component': ConnectionsComponent
+            },
+            data() {
+                return {
+                    apiKey: '',
+                    sidebarCollapsed: false,
+                    currentPage: 'dashboard',
+                    systemStatus: true,
+                    refreshTrigger: 0,
+                    stats: {
+                        mappings: 0,
+                        connections: 0,
+                        totalSent: 0,
+                        totalReceived: 0
+                    },
+                    notification: {
+                        show: false,
+                        type: 'info',
+                        message: ''
+                    },
+                    menuItems: [
+                        { id: 'dashboard', icon: '📊', text: '仪表板' },
+                        { id: 'mappings', icon: '🔌', text: '映射管理' },
+                        { id: 'traffic', icon: '📈', text: '流量监控' },
+                        { id: 'connections', icon: '🔗', text: '连接监控' }
+                    ]
+                };
+            },
+            computed: {
+                currentPageTitle() {
+                    const item = this.menuItems.find(m => m.id === this.currentPage);
+                    return item ? item.text : '';
+                },
+                currentComponent() {
+                    if (this.currentPage === 'mappings') return 'mappings-component';
+                    if (this.currentPage === 'traffic') return 'traffic-component';
+                    if (this.currentPage === 'connections') return 'connections-component';
+                    return null;
+                }
+            },
+            mounted() {
+                this.checkAuth();
+                this.loadStats();
+                setInterval(() => this.loadStats(), 5000);
+            },
+            methods: {
+                checkAuth() {
+                    this.apiKey = localStorage.getItem('apiKey') || sessionStorage.getItem('apiKey');
+                    if (!this.apiKey) {
+                        window.location.href = '/login';
+                    }
+                },
+                changePage(page) {
+                    this.currentPage = page;
+                },
+                async loadStats() {
+                    try {
+                        const response = await axios.get('/api/stats/traffic', {
+                            headers: { 'X-API-Key': this.apiKey }
+                        });
+                        
+                        if (response.data.success) {
+                            const data = response.data.data;
+                            this.stats.mappings = data.mappings?.length || 0;
+                            this.stats.totalSent = data.total_sent || 0;
+                            this.stats.totalReceived = data.total_received || 0;
+                        }
+
+                        // 获取连接数
+                        const connResponse = await axios.get('/api/stats/connections', {
+                            headers: { 'X-API-Key': this.apiKey }
+                        });
+                        if (connResponse.data.success) {
+                            let total = 0;
+                            connResponse.data.data.mappings?.forEach(m => {
+                                total += m.total_connections || 0;
+                            });
+                            this.stats.connections = total;
+                        }
+
+                        this.systemStatus = true;
+                    } catch (error) {
+                        this.systemStatus = false;
+                    }
+                },
+                refreshData() {
+                    this.loadStats();
+                    this.refreshTrigger++; // 触发子组件刷新
+                    this.showNotification('info', '数据已刷新');
+                },
+                logout() {
+                    if (confirm('确定要退出登录吗？')) {
+                        localStorage.removeItem('apiKey');
+                        sessionStorage.removeItem('apiKey');
+                        window.location.href = '/login';
+                    }
+                },
+                showNotification(type, message) {
+                    this.notification = { show: true, type, message };
+                    setTimeout(() => {
+                        this.notification.show = false;
+                    }, 3000);
+                },
+                formatBytes(bytes) {
+                    if (!bytes) return '0 B';
+                    const k = 1024;
+                    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+                    const i = Math.floor(Math.log(bytes) / Math.log(k));
+                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+                }
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>
diff --git a/src/server/html/login.html b/src/server/html/login.html
new file mode 100644
index 0000000..c17334e
--- /dev/null
+++ b/src/server/html/login.html
@@ -0,0 +1,428 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>登录 - Go Tunnel 管理系统</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .login-container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+            width: 100%;
+            max-width: 900px;
+            display: flex;
+            min-height: 500px;
+        }
+
+        .login-left {
+            flex: 1;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 60px 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            color: white;
+        }
+
+        .login-left h1 {
+            font-size: 2.5em;
+            margin-bottom: 20px;
+            font-weight: 700;
+        }
+
+        .login-left p {
+            font-size: 1.1em;
+            line-height: 1.6;
+            opacity: 0.95;
+            margin-bottom: 30px;
+        }
+
+        .feature-list {
+            list-style: none;
+            margin-top: 20px;
+        }
+
+        .feature-list li {
+            padding: 10px 0;
+            display: flex;
+            align-items: center;
+            font-size: 1em;
+        }
+
+        .feature-list li:before {
+            content: "✓";
+            margin-right: 10px;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+
+        .login-right {
+            flex: 1;
+            padding: 60px 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .login-header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        .login-header h2 {
+            color: #333;
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+
+        .login-header p {
+            color: #666;
+            font-size: 1em;
+        }
+
+        .form-group {
+            margin-bottom: 25px;
+        }
+
+        .form-group label {
+            display: block;
+            color: #333;
+            font-weight: 600;
+            margin-bottom: 8px;
+            font-size: 0.95em;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 14px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 1em;
+            transition: all 0.3s;
+            background: #f8f9fa;
+        }
+
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+            background: white;
+            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+        }
+
+        .remember-me {
+            display: flex;
+            align-items: center;
+            margin-bottom: 25px;
+        }
+
+        .remember-me input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            cursor: pointer;
+        }
+
+        .remember-me label {
+            color: #666;
+            font-size: 0.95em;
+            cursor: pointer;
+        }
+
+        .btn-login {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            margin-bottom: 20px;
+        }
+
+        .btn-login:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-login:active {
+            transform: translateY(0);
+        }
+
+        .btn-login:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: none;
+            border-left: 4px solid #c33;
+        }
+
+        .error-message.show {
+            display: block;
+            animation: shake 0.3s;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+
+        .success-message {
+            background: #efe;
+            color: #3c3;
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            display: none;
+            border-left: 4px solid #3c3;
+        }
+
+        .success-message.show {
+            display: block;
+        }
+
+        .footer-links {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .footer-links a {
+            color: #667eea;
+            text-decoration: none;
+            font-size: 0.9em;
+            margin: 0 10px;
+        }
+
+        .footer-links a:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 768px) {
+            .login-container {
+                flex-direction: column;
+            }
+
+            .login-left {
+                padding: 40px 30px;
+            }
+
+            .login-right {
+                padding: 40px 30px;
+            }
+
+            .login-left h1 {
+                font-size: 2em;
+            }
+        }
+
+        .loading {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-left">
+            <h1>🚀 Go Tunnel</h1>
+            <p>强大的端口转发与隧道管理系统</p>
+            <ul class="feature-list">
+                <li>实时流量监控</li>
+                <li>活跃连接管理</li>
+                <li>支持隧道模式</li>
+                <li>带宽限制控制</li>
+                <li>可视化管理界面</li>
+            </ul>
+        </div>
+
+        <div class="login-right">
+            <div class="login-header">
+                <h2>欢迎回来</h2>
+                <p>请输入您的 API Key 登录系统</p>
+            </div>
+
+            <div class="error-message" id="errorMessage"></div>
+            <div class="success-message" id="successMessage"></div>
+
+            <form id="loginForm">
+                <div class="form-group">
+                    <label for="apiKey">API Key</label>
+                    <input 
+                        type="password" 
+                        id="apiKey" 
+                        name="apiKey" 
+                        placeholder="请输入您的 API Key"
+                        required
+                        autocomplete="current-password"
+                    >
+                </div>
+
+                <div class="remember-me">
+                    <input type="checkbox" id="rememberMe" name="rememberMe">
+                    <label for="rememberMe">记住我的 API Key</label>
+                </div>
+
+                <button type="submit" class="btn-login" id="loginBtn">
+                    登录
+                </button>
+            </form>
+
+            <div class="footer-links">
+                <a href="#" onclick="showHelp(); return false;">需要帮助？</a>
+                <a href="/health" target="_blank">系统状态</a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 检查是否已登录
+        const savedApiKey = localStorage.getItem('apiKey');
+        if (savedApiKey) {
+            // 验证保存的 API Key 是否有效
+            verifyApiKey(savedApiKey).then(valid => {
+                if (valid) {
+                    window.location.href = '/dashboard';
+                }
+            });
+        }
+
+        // 登录表单提交
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const apiKey = document.getElementById('apiKey').value.trim();
+            const rememberMe = document.getElementById('rememberMe').checked;
+            const loginBtn = document.getElementById('loginBtn');
+            const errorMsg = document.getElementById('errorMessage');
+            const successMsg = document.getElementById('successMessage');
+
+            if (!apiKey) {
+                showError('请输入 API Key');
+                return;
+            }
+
+            // 显示加载状态
+            loginBtn.disabled = true;
+            loginBtn.innerHTML = '<span class="loading"></span> 登录中...';
+            errorMsg.classList.remove('show');
+            successMsg.classList.remove('show');
+
+            try {
+                // 验证 API Key
+                const valid = await verifyApiKey(apiKey);
+                
+                if (valid) {
+                    // 保存 API Key
+                    if (rememberMe) {
+                        localStorage.setItem('apiKey', apiKey);
+                    } else {
+                        sessionStorage.setItem('apiKey', apiKey);
+                    }
+
+                    // 显示成功消息
+                    successMsg.textContent = '登录成功！正在跳转...';
+                    successMsg.classList.add('show');
+
+                    // 跳转到管理界面
+                    setTimeout(() => {
+                        window.location.href = '/dashboard';
+                    }, 1000);
+                } else {
+                    showError('API Key 无效，请检查后重试');
+                    loginBtn.disabled = false;
+                    loginBtn.textContent = '登录';
+                }
+            } catch (error) {
+                showError('登录失败：' + error.message);
+                loginBtn.disabled = false;
+                loginBtn.textContent = '登录';
+            }
+        });
+
+        // 验证 API Key
+        async function verifyApiKey(apiKey) {
+            try {
+                const response = await fetch('/api/mapping/list', {
+                    headers: {
+                        'X-API-Key': apiKey
+                    }
+                });
+
+                if (response.status === 401) {
+                    return false;
+                }
+
+                if (response.ok) {
+                    return true;
+                }
+
+                throw new Error('验证请求失败');
+            } catch (error) {
+                console.error('API Key 验证失败:', error);
+                return false;
+            }
+        }
+
+        // 显示错误消息
+        function showError(message) {
+            const errorMsg = document.getElementById('errorMessage');
+            errorMsg.textContent = message;
+            errorMsg.classList.add('show');
+            
+            // 3秒后自动隐藏
+            setTimeout(() => {
+                errorMsg.classList.remove('show');
+            }, 3000);
+        }
+
+        // 显示帮助
+        function showHelp() {
+            alert('如需帮助，请联系系统管理员获取 API Key。\n\nAPI Key 可以在服务器配置文件中找到。');
+        }
+
+        // 回车键提交
+        document.getElementById('apiKey').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                document.getElementById('loginForm').dispatchEvent(new Event('submit'));
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/src/server/html/management.html b/src/server/html/management.html
deleted file mode 100644
index 282f16d..0000000
--- a/src/server/html/management.html
+++ /dev/null
@@ -1,844 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>端口映射管理 - Go Tunnel</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        h1 {
-            color: white;
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 2.5em;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-        }
-
-        .nav-tabs {
-            display: flex;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 15px 15px 0 0;
-            overflow: hidden;
-            margin-bottom: 0;
-        }
-
-        .nav-tab {
-            flex: 1;
-            padding: 15px 20px;
-            background: transparent;
-            border: none;
-            color: rgba(255, 255, 255, 0.7);
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 1.1em;
-        }
-
-        .nav-tab.active {
-            background: rgba(255, 255, 255, 0.95);
-            color: #667eea;
-            font-weight: bold;
-        }
-
-        .nav-tab:hover:not(.active) {
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
-        }
-
-        .tab-content {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 0 0 15px 15px;
-            padding: 30px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            min-height: 600px;
-        }
-
-        .tab-pane {
-            display: none;
-        }
-
-        .tab-pane.active {
-            display: block;
-        }
-
-        .form-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            color: #333;
-            font-weight: bold;
-            font-size: 1.1em;
-        }
-
-        .form-group input,
-        .form-group select {
-            width: 100%;
-            padding: 12px 15px;
-            border: 2px solid #ddd;
-            border-radius: 8px;
-            font-size: 1em;
-            transition: border-color 0.3s;
-        }
-
-        .form-group input:focus,
-        .form-group select:focus {
-            outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);
-        }
-
-        .btn {
-            padding: 12px 25px;
-            border: none;
-            border-radius: 8px;
-            font-size: 1em;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-weight: bold;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .btn-primary {
-            background: linear-gradient(45deg, #667eea, #764ba2);
-            color: white;
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
-        }
-
-        .btn-danger {
-            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
-            color: white;
-        }
-
-        .btn-danger:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
-        }
-
-        .btn-secondary {
-            background: #6c757d;
-            color: white;
-        }
-
-        .btn-secondary:hover {
-            background: #5a6268;
-            transform: translateY(-2px);
-        }
-
-        .mapping-list {
-            max-height: 500px;
-            overflow-y: auto;
-        }
-
-        .mapping-item {
-            background: #f8f9fa;
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 15px;
-            border-left: 4px solid #667eea;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            transition: all 0.3s;
-        }
-
-        .mapping-item:hover {
-            transform: translateX(5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        .mapping-info {
-            flex: 1;
-        }
-
-        .mapping-info h4 {
-            color: #667eea;
-            margin-bottom: 8px;
-            font-size: 1.2em;
-        }
-
-        .mapping-details {
-            color: #666;
-            font-size: 0.95em;
-            line-height: 1.4;
-        }
-
-        .mapping-actions {
-            display: flex;
-            gap: 10px;
-        }
-
-        .status-badge {
-            display: inline-block;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 0.8em;
-            font-weight: bold;
-            text-transform: uppercase;
-        }
-
-        .status-tunnel {
-            background: #e3f2fd;
-            color: #1976d2;
-        }
-
-        .status-direct {
-            background: #f3e5f5;
-            color: #7b1fa2;
-        }
-
-        .message {
-            padding: 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-weight: bold;
-        }
-
-        .message.success {
-            background: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-
-        .message.error {
-            background: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-
-        .message.info {
-            background: #cce7ff;
-            color: #004085;
-            border: 1px solid #b3d7ff;
-        }
-
-        .loading {
-            text-align: center;
-            padding: 40px;
-            color: #666;
-        }
-
-        .spinner {
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
-        .checkbox-group {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-top: 10px;
-        }
-
-        .checkbox-group input[type="checkbox"] {
-            width: auto;
-            transform: scale(1.2);
-        }
-
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .stat-card {
-            background: linear-gradient(45deg, #667eea, #764ba2);
-            color: white;
-            padding: 20px;
-            border-radius: 10px;
-            text-align: center;
-        }
-
-        .stat-value {
-            font-size: 2em;
-            font-weight: bold;
-            margin-bottom: 5px;
-        }
-
-        .stat-label {
-            font-size: 0.9em;
-            opacity: 0.9;
-        }
-
-        .quick-actions {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-
-        @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-
-            .form-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .mapping-item {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 15px;
-            }
-
-            .mapping-actions {
-                width: 100%;
-                justify-content: flex-end;
-            }
-
-            .quick-actions {
-                flex-direction: column;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <h1>🚀 端口映射管理中心</h1>
-
-        <div class="nav-tabs">
-            <button class="nav-tab active" onclick="switchTab('overview')">概览</button>
-            <button class="nav-tab" onclick="switchTab('create')">创建映射</button>
-            <button class="nav-tab" onclick="switchTab('manage')">管理映射</button>
-            <button class="nav-tab" onclick="switchTab('monitor')">流量监控</button>
-        </div>
-
-        <div class="tab-content">
-            <!-- 概览页面 -->
-            <div id="overview" class="tab-pane active">
-                <h2 style="color: #667eea; margin-bottom: 20px;">系统概览</h2>
-
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-value" id="total-mappings">-</div>
-                        <div class="stat-label">总映射数</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="tunnel-mappings">-</div>
-                        <div class="stat-label">隧道映射</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="direct-mappings">-</div>
-                        <div class="stat-label">直连映射</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="tunnel-status">-</div>
-                        <div class="stat-label">隧道状态</div>
-                    </div>
-                </div>
-
-                <div class="quick-actions">
-                    <button class="btn btn-primary" onclick="switchTab('create')">
-                        ➕ 快速创建映射
-                    </button>
-                    <button class="btn btn-secondary" onclick="refreshOverview()">
-                        🔄 刷新状态
-                    </button>
-                    <button class="btn btn-secondary" onclick="switchTab('monitor')">
-                        📊 查看监控
-                    </button>
-                </div>
-
-                <div id="recent-mappings">
-                    <h3 style="color: #667eea; margin-bottom: 15px;">最近的映射</h3>
-                    <div id="recent-mappings-list" class="loading">
-                        <div class="spinner"></div>
-                        <p>加载中...</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 创建映射页面 -->
-            <div id="create" class="tab-pane">
-                <h2 style="color: #667eea; margin-bottom: 20px;">创建新的端口映射</h2>
-
-                <div id="create-message"></div>
-
-                <form id="create-form">
-                    <div class="form-grid">
-                        <div class="form-group">
-                            <label for="source-port">源端口 (本地监听端口) *</label>
-                            <input type="number" id="source-port" min="1" max="65535" required placeholder="例如: 8080">
-                        </div>
-
-                        <div class="form-group">
-                            <label for="target-host">目标主机 *</label>
-                            <input type="text" id="target-host" required placeholder="例如: localhost 或 192.168.1.100">
-                        </div>
-
-                        <div class="form-group">
-                            <label for="target-port">目标端口 *</label>
-                            <input type="number" id="target-port" min="1" max="65535" required placeholder="例如: 3000">
-                        </div>
-
-                        <div class="form-group">
-                            <label for="bandwidth-limit">带宽限制 (可选)</label>
-                            <input type="number" id="bandwidth-limit" min="0" placeholder="例如: 1048576 (1MB/s)">
-                            <small style="color: #666; margin-top: 5px; display: block;">
-                                限制此映射的传输速度，单位：字节/秒。留空表示不限制<br>
-                                示例：1048576 = 1MB/s, 10485760 = 10MB/s
-                            </small>
-                        </div>
-
-                        <div class="form-group">
-                            <label>连接模式</label>
-                            <div class="checkbox-group">
-                                <input type="checkbox" id="use-tunnel">
-                                <label for="use-tunnel">使用隧道模式</label>
-                            </div>
-                            <small style="color: #666; margin-top: 5px; display: block;">
-                                隧道模式：通过加密隧道转发流量，适合跨网络访问<br>
-                                直连模式：直接TCP转发，适合本地网络访问
-                            </small>
-                        </div>
-                    </div>
-
-                    <div style="text-align: center; margin-top: 30px;">
-                        <button type="submit" class="btn btn-primary" style="margin-right: 15px;">
-                            🚀 创建映射
-                        </button>
-                        <button type="button" class="btn btn-secondary" onclick="resetCreateForm()">
-                            🔄 重置表单
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-            <!-- 管理映射页面 -->
-            <div id="manage" class="tab-pane">
-                <h2 style="color: #667eea; margin-bottom: 20px;">管理端口映射</h2>
-
-                <div id="manage-message"></div>
-
-                <div style="text-align: right; margin-bottom: 20px;">
-                    <button class="btn btn-secondary" onclick="loadMappings()">
-                        🔄 刷新列表
-                    </button>
-                </div>
-
-                <div id="mappings-list" class="loading">
-                    <div class="spinner"></div>
-                    <p>加载映射列表中...</p>
-                </div>
-            </div>
-
-            <!-- 流量监控页面 -->
-            <div id="monitor" class="tab-pane">
-                <h2 style="color: #667eea; margin-bottom: 20px;">流量监控</h2>
-
-                <div style="text-align: center; padding: 40px;">
-                    <p style="color: #666; margin-bottom: 20px;">
-                        点击下方按钮打开详细的流量监控页面
-                    </p>
-                    <button class="btn btn-primary" onclick="openTrafficMonitor()">
-                        📊 打开流量监控
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // 全局变量
-        let currentMappings = [];
-        let apiKey = '';
-
-        // 格式化带宽限制为可读格式
-        function formatBandwidth(bytes) {
-            if (!bytes || bytes === 0) {
-                return '无限制';
-            }
-            if (bytes < 1024) {
-                return bytes + ' B/s';
-            } else if (bytes < 1024 * 1024) {
-                return (bytes / 1024).toFixed(2) + ' KB/s';
-            } else if (bytes < 1024 * 1024 * 1024) {
-                return (bytes / (1024 * 1024)).toFixed(2) + ' MB/s';
-            } else {
-                return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB/s';
-            }
-        }
-
-        // 检查是否已有 API Key
-        function checkAuth() {
-            const savedKey = sessionStorage.getItem('apiKey');
-            if (savedKey) {
-                apiKey = savedKey;
-                showMainContent();
-            } else {
-                showAuthDialog();
-            }
-        }
-
-        // 显示认证对话框
-        function showAuthDialog() {
-            const authHTML = '' +
-                '<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; ' +
-                '            background: rgba(0,0,0,0.5); display: flex; align-items: center; ' +
-                '            justify-content: center; z-index: 9999;">' +
-                '    <div style="background: white; padding: 40px; border-radius: 15px; ' +
-                '                box-shadow: 0 10px 40px rgba(0,0,0,0.3); max-width: 400px; width: 90%;">' +
-                '        <h2 style="color: #667eea; margin-bottom: 20px; text-align: center;">' +
-                '            🔐 请输入访问密钥' +
-                '        </h2>' +
-                '        <div id="auth-error" style="display: none;" class="message error"></div>' +
-                '        <form id="auth-form">' +
-                '            <div class="form-group">' +
-                '                <label for="secret-input">API Key / Secret</label>' +
-                '                <input type="password" id="secret-input" required ' +
-                '                       placeholder="请输入您的访问密钥"' +
-                '                       style="width: 100%; padding: 12px; border: 2px solid #ddd; ' +
-                '                              border-radius: 8px; font-size: 1em;">' +
-                '            </div>' +
-                '            <button type="submit" class="btn btn-primary" ' +
-                '                    style="width: 100%; margin-top: 20px;">' +
-                '                验证并进入' +
-                '            </button>' +
-                '        </form>' +
-                '    </div>' +
-                '</div>';
-
-            document.body.insertAdjacentHTML('beforeend', authHTML);
-
-            document.getElementById('auth-form').addEventListener('submit', async function (e) {
-                e.preventDefault();
-                const secretInput = document.getElementById('secret-input');
-                const secret = secretInput.value.trim();
-
-                if (!secret) {
-                    return;
-                }
-
-                // 验证 API Key
-                try {
-                    const response = await fetch('/health?api_key=' + encodeURIComponent(secret));
-
-                    if (response.ok) {
-                        // 验证成功
-                        apiKey = secret;
-                        sessionStorage.setItem('apiKey', secret);
-                        document.querySelector('[style*="position: fixed"]').remove();
-                        showMainContent();
-                    } else {
-                        // 验证失败
-                        const errorDiv = document.getElementById('auth-error');
-                        errorDiv.textContent = '❌ 访问密钥无效，请重试';
-                        errorDiv.style.display = 'block';
-                        secretInput.value = '';
-                        secretInput.focus();
-                    }
-                } catch (error) {
-                    const errorDiv = document.getElementById('auth-error');
-                    errorDiv.textContent = '❌ 验证失败: ' + error.message;
-                    errorDiv.style.display = 'block';
-                }
-            });
-
-            document.getElementById('secret-input').focus();
-        }
-
-        // 显示主内容
-        function showMainContent() {
-            document.querySelector('.container').style.display = 'block';
-            refreshOverview();
-        }
-
-        // 获取带 API Key 的 URL
-        function getApiUrl(url) {
-            const separator = url.includes('?') ? '&' : '?';
-            return url + separator + 'api_key=' + encodeURIComponent(apiKey);
-        }
-
-        // 切换标签页
-        function switchTab(tabName) {
-            // 隐藏所有标签页内容
-            document.querySelectorAll('.tab-pane').forEach(pane => {
-                pane.classList.remove('active');
-            });
-
-            // 移除所有标签页按钮的激活状态
-            document.querySelectorAll('.nav-tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-
-            // 显示选中的标签页
-            document.getElementById(tabName).classList.add('active');
-            event.target.classList.add('active');
-
-            // 根据标签页执行相应的初始化
-            switch (tabName) {
-                case 'overview':
-                    refreshOverview();
-                    break;
-                case 'manage':
-                    loadMappings();
-                    break;
-            }
-        }
-
-        // 显示消息
-        function showMessage(containerId, type, message) {
-            const container = document.getElementById(containerId);
-            container.innerHTML = '<div class="message ' + type + '">' + message + '</div>';
-
-            // 3秒后自动隐藏成功消息
-            if (type === 'success') {
-                setTimeout(() => {
-                    container.innerHTML = '';
-                }, 3000);
-            }
-        }
-
-        // 创建映射表单提交
-        document.getElementById('create-form').addEventListener('submit', async function (e) {
-            e.preventDefault();
-
-            const bandwidthLimitValue = document.getElementById('bandwidth-limit').value;
-            const formData = {
-                source_port: parseInt(document.getElementById('source-port').value),
-                target_host: document.getElementById('target-host').value,
-                target_port: parseInt(document.getElementById('target-port').value),
-                use_tunnel: document.getElementById('use-tunnel').checked
-            };
-            
-            // 如果填写了带宽限制，则添加到请求中
-            if (bandwidthLimitValue && bandwidthLimitValue.trim() !== '') {
-                formData.bandwidth_limit = parseInt(bandwidthLimitValue);
-            }
-
-            try {
-                const response = await fetch(getApiUrl('/api/mapping/create'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(formData)
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    showMessage('create-message', 'success', '✅ ' + result.message);
-                    resetCreateForm();
-                } else {
-                    showMessage('create-message', 'error', '❌ ' + result.message);
-                }
-            } catch (error) {
-                showMessage('create-message', 'error', '❌ 网络错误: ' + error.message);
-            }
-        });
-
-        // 重置创建表单
-        function resetCreateForm() {
-            document.getElementById('create-form').reset();
-        }
-
-        // 删除映射
-        async function deleteMapping(port) {
-            if (!confirm('确定要删除端口 ' + port + ' 的映射吗？')) {
-                return;
-            }
-
-            try {
-                const response = await fetch(getApiUrl('/api/mapping/remove'), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ port: port })
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    showMessage('manage-message', 'success', '✅ ' + result.message);
-                    loadMappings(); // 重新加载列表
-                } else {
-                    showMessage('manage-message', 'error', '❌ ' + result.message);
-                }
-            } catch (error) {
-                showMessage('manage-message', 'error', '❌ 网络错误: ' + error.message);
-            }
-        }
-
-        // 加载映射列表
-        async function loadMappings() {
-            const container = document.getElementById('mappings-list');
-            container.innerHTML = '<div class="loading"><div class="spinner"></div><p>加载中...</p></div>';
-
-            try {
-                const response = await fetch(getApiUrl('/api/mapping/list'));
-                const result = await response.json();
-
-                if (result.success) {
-                    currentMappings = result.data.mappings || [];
-                    renderMappings(currentMappings);
-                } else {
-                    container.innerHTML = '<div class="message error">❌ ' + result.message + '</div>';
-                }
-            } catch (error) {
-                container.innerHTML = '<div class="message error">❌ 网络错误: ' + error.message + '</div>';
-            }
-        }
-
-        // 渲染映射列表
-        function renderMappings(mappings) {
-            const container = document.getElementById('mappings-list');
-
-            if (mappings.length === 0) {
-                container.innerHTML = '<div class="message info">📝 暂无端口映射，点击"创建映射"标签页开始创建。</div>';
-                return;
-            }
-
-            const html = mappings.map(mapping =>
-                '<div class="mapping-item">' +
-                '<div class="mapping-info">' +
-                '<h4>端口 ' + mapping.source_port + '</h4>' +
-                '<div class="mapping-details">' +
-                '<strong>目标:</strong> ' + mapping.target_host + ':' + mapping.target_port + '<br>' +
-                '<strong>模式:</strong> ' +
-                '<span class="status-badge ' + (mapping.use_tunnel ? 'status-tunnel' : 'status-direct') + '">' +
-                (mapping.use_tunnel ? '隧道模式' : '直连模式') +
-                '</span><br>' +
-                '<strong>带宽限制:</strong> ' + formatBandwidth(mapping.bandwidth_limit) + '<br>' +
-                '<strong>创建时间:</strong> ' + new Date(mapping.created_at).toLocaleString('zh-CN') +
-                '</div>' +
-                '</div>' +
-                '<div class="mapping-actions">' +
-                '<button class="btn btn-danger" onclick="deleteMapping(' + mapping.source_port + ')">' +
-                '🗑️ 删除' +
-                '</button>' +
-                '</div>' +
-                '</div>'
-            ).join('');
-
-            container.innerHTML = html;
-        }
-
-        // 刷新概览页面
-        async function refreshOverview() {
-            try {
-                // 加载映射列表
-                const mappingsResponse = await fetch(getApiUrl('/api/mapping/list'));
-                const mappingsResult = await mappingsResponse.json();
-
-                // 加载健康状态
-                const healthResponse = await fetch(getApiUrl('/health'));
-                const healthResult = await healthResponse.json();
-
-                if (mappingsResult.success) {
-                    const mappings = mappingsResult.data.mappings || [];
-                    const tunnelMappings = mappings.filter(m => m.use_tunnel).length;
-                    const directMappings = mappings.filter(m => !m.use_tunnel).length;
-
-                    document.getElementById('total-mappings').textContent = mappings.length;
-                    document.getElementById('tunnel-mappings').textContent = tunnelMappings;
-                    document.getElementById('direct-mappings').textContent = directMappings;
-
-                    // 渲染最近的映射（最多5个）
-                    const recentMappings = mappings.slice(-5).reverse();
-                    renderRecentMappings(recentMappings);
-                }
-
-                if (healthResult) {
-                    const tunnelStatus = healthResult.tunnel_enabled ?
-                        (healthResult.tunnel_connected ? '🟢 已连接' : '🟡 未连接') :
-                        '🔴 未启用';
-                    document.getElementById('tunnel-status').textContent = tunnelStatus;
-                }
-            } catch (error) {
-                console.error('刷新概览失败:', error);
-            }
-        }
-
-        // 渲染最近的映射
-        function renderRecentMappings(mappings) {
-            const container = document.getElementById('recent-mappings-list');
-
-            if (mappings.length === 0) {
-                container.innerHTML = '<div class="message info">暂无映射记录</div>';
-                return;
-            }
-
-            const html = mappings.map(mapping =>
-                '<div class="mapping-item">' +
-                '<div class="mapping-info">' +
-                '<h4>端口 ' + mapping.source_port + '</h4>' +
-                '<div class="mapping-details">' +
-                '<strong>目标:</strong> ' + mapping.target_host + ':' + mapping.target_port + ' | ' +
-                '<span class="status-badge ' + (mapping.use_tunnel ? 'status-tunnel' : 'status-direct') + '">' +
-                (mapping.use_tunnel ? '隧道' : '直连') +
-                '</span> | ' +
-                '<strong>带宽:</strong> ' + formatBandwidth(mapping.bandwidth_limit) +
-                '</div>' +
-                '</div>' +
-                '</div>'
-            ).join('');
-
-            container.innerHTML = html;
-        }
-
-        // 打开流量监控页面
-        function openTrafficMonitor() {
-            window.open(getApiUrl('/api/stats/monitor'), '_blank');
-        }
-
-        // 页面加载完成后初始化
-        document.addEventListener('DOMContentLoaded', function () {
-            // 隐藏主内容，等待认证
-            document.querySelector('.container').style.display = 'none';
-            checkAuth();
-        });
-    </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/server/html/traffic_monitor.html b/src/server/html/traffic_monitor.html
index ad85357..e7a42f7 100644
--- a/src/server/html/traffic_monitor.html
+++ b/src/server/html/traffic_monitor.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>流量监控 - Go Tunnel</title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
     <style>
         * {
diff --git a/src/server/stats/stats.go b/src/server/stats/stats.go
index 2be1e7b..3fe203e 100644
--- a/src/server/stats/stats.go
+++ b/src/server/stats/stats.go
@@ -17,9 +17,34 @@ type PortTrafficStats struct {
 
 // AllTrafficStats 所有流量统计
 type AllTrafficStats struct {
-	Tunnel      TrafficStats        `json:"tunnel"`         // 隧道流量
-	Mappings    []PortTrafficStats  `json:"mappings"`       // 端口映射流量
-	TotalSent   uint64              `json:"total_sent"`     // 总发送
-	TotalReceived uint64            `json:"total_received"` // 总接收
-	Timestamp   int64               `json:"timestamp"`      // 时间戳
+	Tunnel        TrafficStats       `json:"tunnel"`         // 隧道流量
+	Mappings      []PortTrafficStats `json:"mappings"`       // 端口映射流量
+	TotalSent     uint64             `json:"total_sent"`     // 总发送
+	TotalReceived uint64             `json:"total_received"` // 总接收
+	Timestamp     int64              `json:"timestamp"`      // 时间戳
+}
+
+// ConnectionInfo 连接信息
+type ConnectionInfo struct {
+	ClientAddr    string `json:"client_addr"`    // 客户端地址
+	TargetAddr    string `json:"target_addr"`    // 目标地址
+	BytesSent     uint64 `json:"bytes_sent"`     // 该连接发送的字节数
+	BytesReceived uint64 `json:"bytes_received"` // 该连接接收的字节数
+	ConnectedAt   int64  `json:"connected_at"`   // 连接建立时间（Unix时间戳）
+}
+
+// PortConnectionStats 端口连接统计
+type PortConnectionStats struct {
+	SourcePort        int              `json:"source_port"`        // 源端口
+	TargetHost        string           `json:"target_host"`        // 目标主机
+	TargetPort        int              `json:"target_port"`        // 目标端口
+	UseTunnel         bool             `json:"use_tunnel"`         // 是否使用隧道
+	ActiveConnections []ConnectionInfo `json:"active_connections"` // 活跃连接列表
+	TotalConnections  int              `json:"total_connections"`  // 总连接数
+}
+
+// AllConnectionsStats 所有连接统计
+type AllConnectionsStats struct {
+	Mappings  []PortConnectionStats `json:"mappings"`  // 所有映射的连接信息
+	Timestamp int64                 `json:"timestamp"` // 时间戳
 }