监控网页实现

2026-04-09 00:14:57 +08:00
parent 6b1c7242c7
commit 1cce5634b1
17 changed files with 1186 additions and 38 deletions
--- a/backend/internal/api/admin.go
+++ b/backend/internal/api/admin.go
@@ -0,0 +1,333 @@
+package api
+
+import (
+	"encoding/json"
+	"net/http"
+	"strconv"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+
+	"hightube/internal/chat"
+	"hightube/internal/db"
+	"hightube/internal/model"
+	"hightube/internal/monitor"
+	"hightube/internal/stream"
+	"hightube/internal/utils"
+)
+
+var adminRTMP *stream.RTMPServer
+
+func BindAdminDependencies(rtmpSrv *stream.RTMPServer) {
+	adminRTMP = rtmpSrv
+}
+
+func GetAdminOverview(c *gin.Context) {
+	stats := monitor.GetSnapshot()
+	chatStats := chat.StatsSnapshot{}
+	if chat.MainHub != nil {
+		chatStats = chat.MainHub.GetStatsSnapshot()
+	}
+
+	activeCount := 0
+	activePaths := []string{}
+	if adminRTMP != nil {
+		activeCount = adminRTMP.ActiveStreamCount()
+		activePaths = adminRTMP.ActiveStreamPaths()
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"system": stats,
+		"stream": gin.H{
+			"active_stream_count": activeCount,
+			"active_stream_paths": activePaths,
+		},
+		"chat": chatStats,
+	})
+}
+
+func GetAdminHealth(c *gin.Context) {
+	type dbHealth struct {
+		OK    bool   `json:"ok"`
+		Error string `json:"error,omitempty"`
+	}
+
+	health := gin.H{
+		"api":  true,
+		"rtmp": adminRTMP != nil,
+	}
+
+	dbOK := dbHealth{OK: true}
+	if err := db.DB.Exec("SELECT 1").Error; err != nil {
+		dbOK.OK = false
+		dbOK.Error = err.Error()
+	}
+	health["db"] = dbOK
+
+	c.JSON(http.StatusOK, health)
+}
+
+func ListAdminLogs(c *gin.Context) {
+	level := c.Query("level")
+	keyword := c.Query("keyword")
+	page := parseIntWithDefault(c.Query("page"), 1)
+	pageSize := parseIntWithDefault(c.Query("page_size"), 20)
+
+	items, total := monitor.Query(level, keyword, page, pageSize)
+	c.JSON(http.StatusOK, gin.H{
+		"items":     items,
+		"total":     total,
+		"page":      page,
+		"page_size": pageSize,
+	})
+}
+
+func StreamAdminLogs(c *gin.Context) {
+	if !authorizeAdminTokenFromQuery(c) {
+		return
+	}
+
+	c.Header("Content-Type", "text/event-stream")
+	c.Header("Cache-Control", "no-cache")
+	c.Header("Connection", "keep-alive")
+	c.Header("X-Accel-Buffering", "no")
+
+	flusher, ok := c.Writer.(http.Flusher)
+	if !ok {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "streaming unsupported"})
+		return
+	}
+
+	ch := monitor.Subscribe()
+	defer monitor.Unsubscribe(ch)
+
+	for {
+		select {
+		case entry := <-ch:
+			payload, _ := json.Marshal(entry)
+			_, _ = c.Writer.Write([]byte("event: log\n"))
+			_, _ = c.Writer.Write([]byte("data: " + string(payload) + "\n\n"))
+			flusher.Flush()
+		case <-c.Request.Context().Done():
+			return
+		}
+	}
+}
+
+func authorizeAdminTokenFromQuery(c *gin.Context) bool {
+	token := strings.TrimSpace(c.Query("token"))
+	if token == "" {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "token is required"})
+		return false
+	}
+
+	claims, err := utils.ParseToken(token)
+	if err != nil {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "invalid token"})
+		return false
+	}
+
+	userID, err := strconv.ParseUint(claims.Subject, 10, 32)
+	if err != nil {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "invalid token subject"})
+		return false
+	}
+
+	var user model.User
+	if err := db.DB.First(&user, uint(userID)).Error; err != nil {
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "user not found"})
+		return false
+	}
+
+	if !user.Enabled || user.Role != "admin" {
+		c.JSON(http.StatusForbidden, gin.H{"error": "admin access required"})
+		return false
+	}
+
+	return true
+}
+
+type updateRoleRequest struct {
+	Role string `json:"role" binding:"required"`
+}
+
+func UpdateUserRole(c *gin.Context) {
+	userID, ok := parsePathUint(c.Param("id"))
+	if !ok {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid user id"})
+		return
+	}
+
+	var req updateRoleRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	role := strings.ToLower(strings.TrimSpace(req.Role))
+	if role != "admin" && role != "user" {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "role must be admin or user"})
+		return
+	}
+
+	if err := db.DB.Model(&model.User{}).Where("id = ?", userID).Update("role", role).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to update role"})
+		return
+	}
+
+	operator, _ := c.Get("username")
+	monitor.Auditf("admin=%v updated user_id=%d role=%s", operator, userID, role)
+	c.JSON(http.StatusOK, gin.H{"message": "role updated"})
+}
+
+type updateEnabledRequest struct {
+	Enabled bool `json:"enabled"`
+}
+
+func UpdateUserEnabled(c *gin.Context) {
+	userID, ok := parsePathUint(c.Param("id"))
+	if !ok {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid user id"})
+		return
+	}
+
+	var req updateEnabledRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	if err := db.DB.Model(&model.User{}).Where("id = ?", userID).Update("enabled", req.Enabled).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to update enabled status"})
+		return
+	}
+
+	operator, _ := c.Get("username")
+	monitor.Auditf("admin=%v updated user_id=%d enabled=%v", operator, userID, req.Enabled)
+	c.JSON(http.StatusOK, gin.H{"message": "enabled status updated"})
+}
+
+type resetPasswordRequest struct {
+	NewPassword string `json:"new_password" binding:"required"`
+}
+
+func ResetUserPassword(c *gin.Context) {
+	userID, ok := parsePathUint(c.Param("id"))
+	if !ok {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid user id"})
+		return
+	}
+
+	var req resetPasswordRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	hash, err := utils.HashPassword(req.NewPassword)
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to hash password"})
+		return
+	}
+
+	if err := db.DB.Model(&model.User{}).Where("id = ?", userID).Update("password", hash).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to reset password"})
+		return
+	}
+
+	operator, _ := c.Get("username")
+	monitor.Auditf("admin=%v reset password for user_id=%d", operator, userID)
+	c.JSON(http.StatusOK, gin.H{"message": "password reset"})
+}
+
+func DeleteUser(c *gin.Context) {
+	userID, ok := parsePathUint(c.Param("id"))
+	if !ok {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid user id"})
+		return
+	}
+
+	operatorID, _ := c.Get("user_id")
+	if opID, ok := operatorID.(uint); ok && opID == userID {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "cannot delete current admin account"})
+		return
+	}
+
+	if err := db.DB.Where("user_id = ?", userID).Delete(&model.Room{}).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to delete rooms"})
+		return
+	}
+	if err := db.DB.Delete(&model.User{}, userID).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to delete user"})
+		return
+	}
+
+	operator, _ := c.Get("username")
+	monitor.Auditf("admin=%v deleted user_id=%d", operator, userID)
+	c.JSON(http.StatusOK, gin.H{"message": "user deleted"})
+}
+
+func ListUsers(c *gin.Context) {
+	keyword := strings.TrimSpace(c.Query("keyword"))
+	page := parseIntWithDefault(c.Query("page"), 1)
+	pageSize := parseIntWithDefault(c.Query("page_size"), 20)
+	if pageSize > 200 {
+		pageSize = 200
+	}
+	offset := (page - 1) * pageSize
+	if offset < 0 {
+		offset = 0
+	}
+
+	query := db.DB.Model(&model.User{})
+	if keyword != "" {
+		query = query.Where("username LIKE ?", "%"+keyword+"%")
+	}
+
+	var total int64
+	if err := query.Count(&total).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to count users"})
+		return
+	}
+
+	var users []model.User
+	if err := query.Order("id DESC").Offset(offset).Limit(pageSize).Find(&users).Error; err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to query users"})
+		return
+	}
+
+	items := make([]gin.H, 0, len(users))
+	for _, u := range users {
+		items = append(items, gin.H{
+			"id":         u.ID,
+			"username":   u.Username,
+			"role":       u.Role,
+			"enabled":    u.Enabled,
+			"created_at": u.CreatedAt,
+			"updated_at": u.UpdatedAt,
+		})
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"items":     items,
+		"total":     total,
+		"page":      page,
+		"page_size": pageSize,
+	})
+}
+
+func parseIntWithDefault(v string, def int) int {
+	i, err := strconv.Atoi(v)
+	if err != nil || i <= 0 {
+		return def
+	}
+	return i
+}
+
+func parsePathUint(v string) (uint, bool) {
+	u64, err := strconv.ParseUint(v, 10, 32)
+	if err != nil {
+		return 0, false
+	}
+	return uint(u64), true
+}
--- a/backend/internal/api/admin_ui.go
+++ b/backend/internal/api/admin_ui.go
@@ -0,0 +1,21 @@
+package api
+
+import (
+	"embed"
+	"io/fs"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+//go:embed static/admin/*
+var adminFS embed.FS
+
+func AdminPage(c *gin.Context) {
+	content, err := fs.ReadFile(adminFS, "static/admin/index.html")
+	if err != nil {
+		c.String(http.StatusInternalServerError, "failed to load admin page")
+		return
+	}
+	c.Data(http.StatusOK, "text/html; charset=utf-8", content)
+}
--- a/backend/internal/api/auth.go
+++ b/backend/internal/api/auth.go
@@ -50,6 +50,8 @@ func Register(c *gin.Context) {
 	user := model.User{
 		Username: req.Username,
 		Password: hashedPassword,
+		Role:     "user",
+		Enabled:  true,
 	}
 	if err := db.DB.Create(&user).Error; err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create user"})
@@ -89,7 +91,12 @@ func Login(c *gin.Context) {
 		return
 	}

-	token, err := utils.GenerateToken(user.ID)
+	if !user.Enabled {
+		c.JSON(http.StatusForbidden, gin.H{"error": "Account is disabled"})
+		return
+	}
+
+	token, err := utils.GenerateToken(user.ID, user.Username, user.Role)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to generate token"})
 		return
@@ -98,6 +105,8 @@ func Login(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{
 		"token":    token,
 		"username": user.Username,
+		"role":     user.Role,
+		"enabled":  user.Enabled,
 	})
 }

--- a/backend/internal/api/chat_handler.go
+++ b/backend/internal/api/chat_handler.go
@@ -8,6 +8,7 @@ import (
 	"github.com/gorilla/websocket"

 	"hightube/internal/chat"
+	"hightube/internal/monitor"
 )

 var upgrader = websocket.Upgrader{
@@ -23,7 +24,7 @@ func WSHandler(c *gin.Context) {

 	conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
 	if err != nil {
-		fmt.Printf("[WS ERROR] Failed to upgrade: %v\n", err)
+		monitor.Errorf("WebSocket upgrade failed: %v", err)
 		return
 	}

@@ -48,4 +49,6 @@ func WSHandler(c *gin.Context) {
 		Content:  fmt.Sprintf("%s joined the room", username),
 		RoomID:   roomID,
 	})
+
+	monitor.Infof("WebSocket client joined room_id=%s username=%s", roomID, username)
 }
--- a/backend/internal/api/middleware.go
+++ b/backend/internal/api/middleware.go
@@ -7,6 +7,9 @@ import (

 	"github.com/gin-gonic/gin"

+	"hightube/internal/db"
+	"hightube/internal/model"
+	"hightube/internal/monitor"
 	"hightube/internal/utils"
 )

@@ -28,19 +31,57 @@ func AuthMiddleware() gin.HandlerFunc {
 		}

 		tokenStr := parts[1]
-		userIDStr, err := utils.ParseToken(tokenStr)
+		claims, err := utils.ParseToken(tokenStr)
 		if err != nil {
 			c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid or expired token"})
 			c.Abort()
 			return
 		}

-		userID, _ := strconv.ParseUint(userIDStr, 10, 32)
+		userID, _ := strconv.ParseUint(claims.Subject, 10, 32)
+
+		var user model.User
+		if err := db.DB.First(&user, uint(userID)).Error; err != nil {
+			c.JSON(http.StatusUnauthorized, gin.H{"error": "User not found"})
+			c.Abort()
+			return
+		}
+
+		if !user.Enabled {
+			c.JSON(http.StatusForbidden, gin.H{"error": "Account is disabled"})
+			c.Abort()
+			return
+		}
+
 		c.Set("user_id", uint(userID))
+		c.Set("username", user.Username)
+		c.Set("role", user.Role)
 		c.Next()
 	}
 }

+func AdminMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		role, ok := c.Get("role")
+		if !ok || role != "admin" {
+			c.JSON(http.StatusForbidden, gin.H{"error": "admin access required"})
+			c.Abort()
+			return
+		}
+		c.Next()
+	}
+}
+
+func RequestMetricsMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		monitor.IncrementRequestCount()
+		c.Next()
+		if c.Writer.Status() >= http.StatusBadRequest {
+			monitor.IncrementErrorCount()
+		}
+	}
+}
+
 // CORSMiddleware handles cross-origin requests from web clients
 func CORSMiddleware() gin.HandlerFunc {
 	return func(c *gin.Context) {
--- a/backend/internal/api/router.go
+++ b/backend/internal/api/router.go
@@ -12,9 +12,10 @@ func SetupRouter(streamServer *stream.RTMPServer) *gin.Engine {
 	gin.SetMode(gin.ReleaseMode)

 	r := gin.Default()
+	BindAdminDependencies(streamServer)

 	// Use CORS middleware to allow web access
-	r.Use(CORSMiddleware())
+	r.Use(CORSMiddleware(), RequestMetricsMiddleware())

 	// 清除代理信任警告 "[WARNING] You trusted all proxies"
 	r.SetTrustedProxies(nil)
@@ -24,9 +25,11 @@ func SetupRouter(streamServer *stream.RTMPServer) *gin.Engine {
 	r.POST("/api/login", Login)
 	r.GET("/api/rooms/active", GetActiveRooms)
 	r.GET("/live/:room_id", streamServer.HandleHTTPFLV)
-	
+
 	// WebSocket endpoint for live chat
 	r.GET("/api/ws/room/:room_id", WSHandler)
+	r.GET("/admin", AdminPage)
+	r.GET("/api/admin/logs/stream", StreamAdminLogs)

 	// Protected routes (require JWT)
 	authGroup := r.Group("/api")
@@ -34,6 +37,19 @@ func SetupRouter(streamServer *stream.RTMPServer) *gin.Engine {
 	{
 		authGroup.GET("/room/my", GetMyRoom)
 		authGroup.POST("/user/change-password", ChangePassword)
+
+		adminGroup := authGroup.Group("/admin")
+		adminGroup.Use(AdminMiddleware())
+		{
+			adminGroup.GET("/overview", GetAdminOverview)
+			adminGroup.GET("/health", GetAdminHealth)
+			adminGroup.GET("/logs", ListAdminLogs)
+			adminGroup.GET("/users", ListUsers)
+			adminGroup.PATCH("/users/:id/role", UpdateUserRole)
+			adminGroup.PATCH("/users/:id/enabled", UpdateUserEnabled)
+			adminGroup.POST("/users/:id/reset-password", ResetUserPassword)
+			adminGroup.DELETE("/users/:id", DeleteUser)
+		}
 	}

 	return r
--- a/backend/internal/api/static/admin/index.html
+++ b/backend/internal/api/static/admin/index.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Hightube Admin Console</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #0f1c2e;
+      --bg2: #102944;
+      --card: #f7f6f3;
+      --ink: #12263d;
+      --accent: #ff6b35;
+      --accent2: #0ea5a3;
+      --danger: #dc2626;
+      --ok: #15803d;
+      --line: #d9d5cc;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Space Grotesk", "Segoe UI", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(1200px 600px at -10% -10%, #2a4b70 0%, transparent 65%),
+        radial-gradient(1000px 500px at 110% 0%, #1f4f6d 0%, transparent 65%),
+        linear-gradient(140deg, var(--bg) 0%, var(--bg2) 100%);
+      min-height: 100vh;
+      padding: 20px;
+    }
+    .layout {
+      max-width: 1280px;
+      margin: 0 auto;
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(12, 1fr);
+      animation: appear 500ms ease-out;
+    }
+    @keyframes appear {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .card {
+      background: var(--card);
+      border: 1px solid var(--line);
+      border-radius: 16px;
+      box-shadow: 0 12px 30px rgba(0,0,0,0.22);
+      padding: 14px;
+    }
+    .full { grid-column: 1 / -1; }
+    .col4 { grid-column: span 4; }
+    .col6 { grid-column: span 6; }
+    .col8 { grid-column: span 8; }
+    h1 { margin: 0; color: #f8fafc; letter-spacing: .02em; }
+    h2 { margin: 0 0 10px; font-size: 18px; }
+    .topbar {
+      grid-column: 1 / -1;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 6px;
+    }
+    .tokenbox {
+      display: flex;
+      gap: 8px;
+      width: min(800px, 100%);
+    }
+    input, select, button {
+      border-radius: 10px;
+      border: 1px solid #c8c2b7;
+      padding: 8px 10px;
+      font-size: 14px;
+      font-family: inherit;
+    }
+    input { width: 100%; }
+    button {
+      cursor: pointer;
+      color: #fff;
+      background: linear-gradient(120deg, var(--accent), #f97316);
+      border: none;
+      font-weight: 700;
+    }
+    button.secondary {
+      background: #184f77;
+    }
+    button.danger {
+      background: var(--danger);
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+    }
+    .metric {
+      border: 1px dashed #c9c2b4;
+      padding: 8px;
+      border-radius: 12px;
+    }
+    .metric .k { font-size: 12px; opacity: .75; }
+    .metric .v { font-size: 22px; font-weight: 700; }
+    .mono { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
+    #logs {
+      height: 280px;
+      overflow: auto;
+      background: #0e1624;
+      color: #d9f6ea;
+      border-radius: 10px;
+      padding: 10px;
+      white-space: pre-wrap;
+      font-family: "IBM Plex Mono", monospace;
+      border: 1px solid #1f3552;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+    th, td {
+      text-align: left;
+      border-bottom: 1px solid var(--line);
+      padding: 8px 6px;
+    }
+    .actions { display: flex; gap: 6px; flex-wrap: wrap; }
+    .pill {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 12px;
+      font-weight: 700;
+    }
+    .pill.ok { background: #dcfce7; color: var(--ok); }
+    .pill.off { background: #fee2e2; color: var(--danger); }
+    .pill.admin { background: #dbeafe; color: #1d4ed8; }
+    .pill.user { background: #e2e8f0; color: #334155; }
+    @media (max-width: 960px) {
+      .col4, .col6, .col8 { grid-column: 1 / -1; }
+      .stats { grid-template-columns: repeat(2, 1fr); }
+      .topbar { flex-direction: column; align-items: stretch; }
+    }
+  </style>
+</head>
+<body>
+  <div class="layout">
+    <div class="topbar">
+      <h1>Hightube Admin Console</h1>
+      <div class="tokenbox">
+        <input id="token" placeholder="粘贴 admin JWT token（来自 /api/login）" />
+        <button onclick="connectAll()">连接</button>
+      </div>
+    </div>
+
+    <div class="card col8">
+      <h2>系统状态</h2>
+      <div class="stats" id="stats"></div>
+      <div class="mono" id="health"></div>
+    </div>
+
+    <div class="card col4">
+      <h2>在线状态</h2>
+      <div id="online"></div>
+    </div>
+
+    <div class="card col8">
+      <h2>实时日志</h2>
+      <div style="display:flex; gap:8px; margin-bottom:8px;">
+        <button class="secondary" onclick="loadHistory()">加载历史日志</button>
+        <select id="logLevel">
+          <option value="">全部级别</option>
+          <option value="info">info</option>
+          <option value="warn">warn</option>
+          <option value="error">error</option>
+          <option value="audit">audit</option>
+        </select>
+        <input id="logKeyword" placeholder="关键词过滤" />
+      </div>
+      <div id="logs"></div>
+    </div>
+
+    <div class="card col4">
+      <h2>操作说明</h2>
+      <ul>
+        <li>先在上方输入 admin token 并点击连接。</li>
+        <li>用户管理支持搜索、角色切换、启用禁用、重置密码、删除。</li>
+        <li>日志区会持续接收后端实时事件。</li>
+      </ul>
+    </div>
+
+    <div class="card full">
+      <h2>用户管理</h2>
+      <div style="display:flex; gap:8px; margin-bottom:8px;">
+        <input id="userKeyword" placeholder="按用户名搜索" />
+        <button class="secondary" onclick="loadUsers()">查询</button>
+      </div>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>用户名</th>
+            <th>角色</th>
+            <th>状态</th>
+            <th>创建时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="usersBody"></tbody>
+      </table>
+    </div>
+  </div>
+
+  <script>
+    let evt = null;
+
+    function authHeaders() {
+      const token = document.getElementById('token').value.trim();
+      return {
+        'Authorization': 'Bearer ' + token,
+        'Content-Type': 'application/json'
+      };
+    }
+
+    function addLogLine(text) {
+      const box = document.getElementById('logs');
+      box.textContent += text + '\n';
+      box.scrollTop = box.scrollHeight;
+    }
+
+    async function connectAll() {
+      await Promise.all([loadOverview(), loadHealth(), loadUsers(), loadHistory()]);
+      connectLiveLogs();
+      setInterval(loadOverview, 1000);
+      setInterval(loadHealth, 1000);
+    }
+
+    async function loadOverview() {
+      const resp = await fetch('/api/admin/overview', { headers: authHeaders() });
+      if (!resp.ok) {
+        addLogLine('[error] 概览拉取失败，请检查 token 是否为 admin。');
+        return;
+      }
+      const data = await resp.json();
+      const sys = data.system || {};
+      const stream = data.stream || {};
+      const chat = data.chat || {};
+
+      document.getElementById('stats').innerHTML = `
+        <div class="metric"><div class="k">运行时长(秒)</div><div class="v">${sys.uptime_seconds ?? '-'}</div></div>
+        <div class="metric"><div class="k">请求总量</div><div class="v">${sys.requests_total ?? '-'}</div></div>
+        <div class="metric"><div class="k">错误总量</div><div class="v">${sys.errors_total ?? '-'}</div></div>
+        <div class="metric"><div class="k">Goroutines</div><div class="v">${sys.goroutines ?? '-'}</div></div>
+        <div class="metric"><div class="k">内存Alloc(MB)</div><div class="v">${(sys.memory_alloc_mb || 0).toFixed(1)}</div></div>
+        <div class="metric"><div class="k">内存Sys(MB)</div><div class="v">${(sys.memory_sys_mb || 0).toFixed(1)}</div></div>
+        <div class="metric"><div class="k">CPU核心数</div><div class="v">${sys.cpu_cores ?? '-'}</div></div>
+        <div class="metric"><div class="k">磁盘剩余/总量(GB)</div><div class="v">${(sys.disk_free_gb || 0).toFixed(1)} / ${(sys.disk_total_gb || 0).toFixed(1)}</div></div>
+      `;
+
+      document.getElementById('online').innerHTML = `
+        <p>活跃流数量：<b>${stream.active_stream_count ?? 0}</b></p>
+        <p>活跃聊天室：<b>${chat.room_count ?? 0}</b></p>
+        <p>在线聊天连接：<b>${chat.total_connected_client ?? 0}</b></p>
+        <div class="mono">流路径: ${(stream.active_stream_paths || []).join(', ') || '无'}</div>
+      `;
+    }
+
+    async function loadHealth() {
+      const resp = await fetch('/api/admin/health', { headers: authHeaders() });
+      if (!resp.ok) return;
+      const h = await resp.json();
+      const dbOk = h.db && h.db.ok;
+      document.getElementById('health').innerHTML =
+        `API: <span class="pill ${h.api ? 'ok' : 'off'}">${h.api ? 'UP' : 'DOWN'}</span> ` +
+        `RTMP: <span class="pill ${h.rtmp ? 'ok' : 'off'}">${h.rtmp ? 'UP' : 'DOWN'}</span> ` +
+        `DB: <span class="pill ${dbOk ? 'ok' : 'off'}">${dbOk ? 'UP' : 'DOWN'}</span>`;
+    }
+
+    async function loadHistory() {
+      const level = encodeURIComponent(document.getElementById('logLevel').value || '');
+      const keyword = encodeURIComponent(document.getElementById('logKeyword').value || '');
+      const resp = await fetch(`/api/admin/logs?page=1&page_size=100&level=${level}&keyword=${keyword}`, {
+        headers: authHeaders()
+      });
+      if (!resp.ok) return;
+      const data = await resp.json();
+      const items = data.items || [];
+      const box = document.getElementById('logs');
+      box.textContent = '';
+      items.forEach(it => addLogLine(`[${it.time}] [${it.level}] ${it.message}`));
+    }
+
+    function connectLiveLogs() {
+      if (evt) evt.close();
+      const token = document.getElementById('token').value.trim();
+      evt = new EventSource('/api/admin/logs/stream?token=' + encodeURIComponent(token));
+      evt.onmessage = () => {};
+      evt.addEventListener('log', (e) => {
+        const item = JSON.parse(e.data);
+        addLogLine(`[${item.time}] [${item.level}] ${item.message}`);
+      });
+      evt.onerror = () => {
+        addLogLine('[warn] 实时日志连接断开，稍后可重连。');
+      };
+    }
+
+    async function loadUsers() {
+      const keyword = encodeURIComponent(document.getElementById('userKeyword').value || '');
+      const resp = await fetch(`/api/admin/users?page=1&page_size=50&keyword=${keyword}`, {
+        headers: authHeaders()
+      });
+      if (!resp.ok) {
+        addLogLine('[error] 用户列表拉取失败。');
+        return;
+      }
+      const data = await resp.json();
+      const body = document.getElementById('usersBody');
+      body.innerHTML = '';
+      (data.items || []).forEach(u => {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `
+          <td>${u.id}</td>
+          <td>${u.username}</td>
+          <td><span class="pill ${u.role === 'admin' ? 'admin' : 'user'}">${u.role}</span></td>
+          <td><span class="pill ${u.enabled ? 'ok' : 'off'}">${u.enabled ? 'enabled' : 'disabled'}</span></td>
+          <td>${new Date(u.created_at).toLocaleString()}</td>
+          <td class="actions">
+            <button class="secondary" onclick="toggleRole(${u.id}, '${u.role}')">切换角色</button>
+            <button class="secondary" onclick="toggleEnabled(${u.id}, ${u.enabled})">启用/禁用</button>
+            <button class="secondary" onclick="resetPwd(${u.id})">重置密码</button>
+            <button class="danger" onclick="deleteUser(${u.id})">删除</button>
+          </td>
+        `;
+        body.appendChild(tr);
+      });
+    }
+
+    async function toggleRole(id, role) {
+      const next = role === 'admin' ? 'user' : 'admin';
+      await fetch(`/api/admin/users/${id}/role`, {
+        method: 'PATCH',
+        headers: authHeaders(),
+        body: JSON.stringify({ role: next })
+      });
+      loadUsers();
+    }
+
+    async function toggleEnabled(id, enabled) {
+      await fetch(`/api/admin/users/${id}/enabled`, {
+        method: 'PATCH',
+        headers: authHeaders(),
+        body: JSON.stringify({ enabled: !enabled })
+      });
+      loadUsers();
+    }
+
+    async function resetPwd(id) {
+      const newPwd = prompt('输入新密码（至少 6 位）');
+      if (!newPwd) return;
+      await fetch(`/api/admin/users/${id}/reset-password`, {
+        method: 'POST',
+        headers: authHeaders(),
+        body: JSON.stringify({ new_password: newPwd })
+      });
+      addLogLine(`[audit] user ${id} password reset requested`);
+    }
+
+    async function deleteUser(id) {
+      if (!confirm('确认删除该用户？')) return;
+      await fetch(`/api/admin/users/${id}`, {
+        method: 'DELETE',
+        headers: authHeaders()
+      });
+      loadUsers();
+    }
+  </script>
+</body>
+</html>