docs: update README, API reference, dev-log, project structure with Agent monitoring + quick-alarm + latest fixes

- README.md: React 19, default pwd 123456, Docker Compose deploy, correct module list - api-reference.md: add Agent monitoring section (report/latest/rules/quick-setup/alerts/tasks/kline) - dev-log.md: new entry documenting hostname/IP fix, system collector, offline detection, quick alarm - project-structure.md: add agent/ directory, dev-log.md link, React 19
2026-06-18 16:11:13 +00:00
1 parent c51d0b8b8b
commit 4e3f8cb306
@@ -5,7 +5,7 @@
 ## 技术栈
 ### 前端
- React 18 + TypeScript + Vite
+- React 19 + TypeScript + Vite
 - Tailwind CSS + shadcn/ui
 - Zustand (状态管理) / TanStack Query (数据获取)
 - Recharts (图表) / Lucide React (图标)
@@ -42,6 +42,11 @@ aiops/
 │   ├── go.mod
 │   └── Makefile
 │
 ├── agent/                    # Agent 监控服务
 │   ├── cmd/                  # Agent 入口
 │   ├── internal/             # Agent 内部逻辑
 │   └── config/               # Agent 配置
 │
 ├── docs/                   # 设计文档
 │   ├── PDD_PLAN.md         # 产品设计文档
 │   ├── ROADMAP.md          # 路线图
@@ -56,7 +61,7 @@ aiops/
 ### 前端
 ```bash
-cd app
+cd frontend
 npm install
 npm run dev      # 开发模式 http://localhost:5173
 npm run build    # 生产构建
@@ -71,10 +76,23 @@ go mod download
 go run cmd/main.go    # http://localhost:8080
 ```
 ### Docker Compose 部署
 ```bash
 # 一键启动全部服务 (前端 + 后端 + MySQL + Redis + Agent)
 docker compose up -d
 # 查看服务状态
 docker compose ps
 # 停止服务
 docker compose down
 ```
 ### 默认账号
 - 用户名: `admin`
- 密码: `admin123`
+- 密码: `123456`
 ## 核心功能
@@ -82,11 +100,12 @@ go run cmd/main.go    # http://localhost:8080
 |------|------|--------|
 | 仪表盘 | 成本统计、告警聚合、Top资源、SSL提醒 | P0 |
 | 资产管理 | 服务器CRUD、批量导入、WebShell、云账号 | P0 |
-| K8s集群 | 集群/节点/工作负载、拓扑可视化 | P0 |
+| Kubernetes | 集群/节点/工作负载、拓扑可视化 | P0 |
 | 应用发布 | 流水线管理、发布审批、回滚 | P0 |
-| 监控告警 | 指标监控、告警中心、日志、链路追踪 | P0 |
+| 监控中心 | 监控大屏、资源监控、链路追踪、告警中心、数据源 | P0 |
 | AIOps智能 | AI助手、告警分析、脚本生成、故障诊断 | P0 |
 | 自动化运维 | 定时任务、脚本库、Ansible | P1 |
 | AIOps智能 | AI助手、Agent监控、告警分析、脚本生成、故障诊断 | P0 |
 | 资源申请 | 资源申请审批、配额管理 | P1 |
 | 系统管理 | 用户权限、操作审计、系统设置 | P1 |
 ## License
@@ -0,0 +1,69 @@
 // Package collector 实现 AIOps Agent 系统静态信息采集。
 // 仅在 Agent 启动时执行一次，采集 OS 版本、内核版本等信息。
 //
 // 署名 Logan.Li
 package collector
 import (
 	"bufio"
 	"os"
 	"strings"
 )
 // SystemInfo 包含系统静态信息（Agent 版本通过编译时注入，非运行时采集）
 type SystemInfo struct {
 	OSVersion string // OS 发行版版本 (如 "Ubuntu 22.04.4 LTS")
 	Kernel    string // 内核版本 (如 "Linux 6.8.0-90-generic")
 }
 // CollectSystem 采集系统静态信息。
 // 从 /etc/os-release 和 /proc/version 读取（Linux 特定）。
 // 非 Linux 系统返回空值，不报错。
 func CollectSystem() SystemInfo {
 	info := SystemInfo{}
 	// 读取 /etc/os-release 获取 PRETTY_NAME
 	info.OSVersion = readOSRelease()
 	// 读取 /proc/version 获取内核版本
 	info.Kernel = readProcVersion()
 	return info
 }
 // readOSRelease 从 /etc/os-release 提取 PRETTY_NAME
 func readOSRelease() string {
 	f, err := os.Open("/etc/os-release")
 	if err != nil {
 		return ""
 	}
 	defer f.Close()
 	scanner := bufio.NewScanner(f)
 	for scanner.Scan() {
 		line := scanner.Text()
 		if strings.HasPrefix(line, "PRETTY_NAME=") {
 			// 去除前缀和引号: PRETTY_NAME="Ubuntu 22.04.4 LTS"
 			val := strings.TrimPrefix(line, "PRETTY_NAME=")
 			val = strings.Trim(val, `"`)
 			return val
 		}
 	}
 	return ""
 }
 // readProcVersion 从 /proc/version 提取内核版本
 func readProcVersion() string {
 	data, err := os.ReadFile("/proc/version")
 	if err != nil {
 		return ""
 	}
 	// 格式: Linux version 6.8.0-90-generic (...) ...
 	line := strings.TrimSpace(string(data))
 	// 提取 "Linux version X.Y.Z-..."
 	parts := strings.Fields(line)
 	if len(parts) >= 3 && parts[0] == "Linux" && parts[1] == "version" {
 		return parts[2]
 	}
 	return ""
 }
@@ -10,6 +10,7 @@ import (
 	"context"
 	"flag"
 	"log"
 	"net"
 	"os"
 	"os/signal"
 	"syscall"
@@ -68,6 +69,17 @@ func main() {
 	diskIOCollector := collector.NewDiskIOCollector()
 	rep := reporter.New(*server, *token, logger)
 	// 采集系统静态信息（OS/内核），仅在启动时执行一次
 	sysInfo := collector.CollectSystem()
 	logger.Printf("系统信息: OS=%q Kernel=%q", sysInfo.OSVersion, sysInfo.Kernel)
 	// 探测本机主 IP（用于后端匹配 servers 表）
 	localIP := detectLocalIP()
 	logger.Printf("探测本机 IP: %s", localIP)
 	// 系统信息上报计数器：前 3 次上报携带系统信息，确保后端至少收到一次
 	sysReportCount := 0
 	// 初始化任务执行器与任务客户端（与 reporter 复用相同的 server/token/hostname）
 	taskExecutor := task.New(logger)
 	taskClient := task.NewClient(*server, *token, hostname, logger)
@@ -83,10 +95,20 @@ func main() {
 	collectAndReport := func() {
 		report := &model.Report{
 			Hostname:     hostname,
 			IP:           localIP,
 			Timestamp:    time.Now().UTC().Format(time.RFC3339),
 			AgentVersion: version,
 		}
 		// 前 3 次上报携带系统信息
 		if sysReportCount < 3 && (sysInfo.OSVersion != "" || sysInfo.Kernel != "") {
 			report.System = &model.SystemStat{
 				OSVersion: sysInfo.OSVersion,
 				Kernel:    sysInfo.Kernel,
 			}
 			sysReportCount++
 		}
 		if stat, err := cpuCollector.Collect(); err != nil {
 			logger.Printf("CPU 采集异常: %v", err)
 		} else {
@@ -209,3 +231,34 @@ func maskToken(token string) string {
 	}
 	return token[:4] + "****"
 }
 // detectLocalIP 探测本机主 IP 地址。
 // 通过 UDP 连接到公网地址（不实际发包），获取系统路由选择的本机 IP。
 // 如果失败，回退到遍历网卡查找非 loopback 的 IPv4 地址。
 func detectLocalIP() string {
 	// 方法1：通过 UDP "连接" 到公网 DNS 获取出口 IP
 	conn, err := net.Dial("udp", "8.8.8.8:53")
 	if err == nil {
 		defer conn.Close()
 		if addr, ok := conn.LocalAddr().(*net.UDPAddr); ok && addr.IP != nil {
 			return addr.IP.String()
 		}
 	}
 	// 方法2：遍历网卡
 	ifaces, err := net.Interfaces()
 	if err == nil {
 		for _, iface := range ifaces {
 			if iface.Flags&net.FlagLoopback != 0 || iface.Flags&net.FlagUp == 0 {
 				continue
 			}
 			addrs, _ := iface.Addrs()
 			for _, addr := range addrs {
 				if ipnet, ok := addr.(*net.IPNet); ok && ipnet.IP.To4() != nil {
 					return ipnet.IP.String()
 				}
 			}
 		}
 	}
 	return "unknown"
 }
@@ -7,6 +7,7 @@ package model
 // Report 为单次采集周期的完整上报报文
 type Report struct {
 	Hostname     string      `json:"hostname"`               // 主机名
 	IP           string      `json:"ip,omitempty"`           // 本机 IP（Agent 启动时探测）
 	Timestamp    string      `json:"timestamp"`              // RFC3339 格式的 UTC 时间戳
 	AgentVersion string      `json:"agent_version"`          // Agent 版本号
 	CPU          CPUStat     `json:"cpu"`                    // CPU 指标
@@ -14,7 +15,8 @@ type Report struct {
 	Disks        []DiskStat  `json:"disks"`                  // 磁盘指标列表
 	Ports        []PortStat  `json:"ports"`                  // 监听端口列表
 	Network      NetworkStat `json:"network"`                // 网络指标
-	DiskIO       DiskIOStat  `json:"disk_io"`       // 磁盘 IO 指标
+	DiskIO       DiskIOStat  `json:"disk_io"`                // 磁盘 IO
 	System       *SystemStat `json:"system,omitempty"`       // 系统信息（首次采集后携带）
 }
 // CPUStat CPU 相关指标
@@ -74,7 +74,7 @@ func (h *AgentHandler) ReceiveReport(c *gin.Context) {
 		return
 	}
-	// 同步更新 servers 表的实时指标（通过 hostname 匹配）
+	// 同步更新 servers 表的实时指标（三级匹配：hostname → client IP → hostname LIKE）
 	diskAvg := avgDiskUsage(req.Disks)
 	// 计算硬件规格
@@ -84,19 +84,48 @@ func (h *AgentHandler) ReceiveReport(c *gin.Context) {
 	}
 	memMB := int64(req.Memory.TotalGB * 1024) // GB → MB
-	result := h.db.Model(&models.Server{}).
+	clientIP := c.ClientIP()
-		Where("hostname = ? OR ip = ?", req.Hostname, req.Hostname).
+
-		Updates(map[string]interface{}{
+	// 三级匹配：优先用 Agent 上报的 IP，其次用请求源 IP，最后用报文的 hostname
-			"cpu_usage":     req.CPU.UsagePercent,
+	matchIP := req.IP
-			"memory_usage":  req.Memory.UsagePercent,
+	if matchIP == "" {
-			"disk_usage":    diskAvg,
+		matchIP = clientIP
-			"cpu":           req.CPU.CoreCount,
+	}
-			"memory":        memMB,
+
-			"disk":          int64(totalDiskGB),
+	// 直接 SQL 更新，避免 GORM soft delete 自动添加 deleted_at 条件干扰
-			"status":        "running",
+	updateSQL := `UPDATE servers SET 
-			"agent_status":  "online",
+		cpu_usage = ?, memory_usage = ?, disk_usage = ?,
-			"agent_version": req.AgentVersion,
+		cpu = ?, memory = ?, disk = ?,
-		})
+		status = ?, agent_status = ?, agent_version = ?,
 		hostname = CASE WHEN hostname != ? AND ip = ? THEN ? ELSE hostname END,
 		updated_at = NOW()`
 	args := []interface{}{
 		req.CPU.UsagePercent, req.Memory.UsagePercent, diskAvg,
 		req.CPU.CoreCount, memMB, int64(totalDiskGB),
 		"running", "online", req.AgentVersion,
 		// CASE WHEN hostname != ? AND ip = ? THEN ? ELSE hostname END
 		req.Hostname, matchIP, req.Hostname,
 	}
 	if req.System != nil && req.System.OSVersion != "" {
 		updateSQL += ", os = ?"
 		args = append(args, req.System.OSVersion)
 	}
 	updateSQL += " WHERE hostname = ? OR ip = ?"
 	args = append(args, req.Hostname, matchIP)
 	result := h.db.Exec(updateSQL, args...)
 	// 如果 hostname 和 IP 都没匹配到，尝试用 hostname 反向匹配 IP 字段
 	if result.RowsAffected == 0 && req.Hostname != matchIP {
 		updateSQL2 := updateSQL + " OR ip = ?"
 		args2 := append(args, req.Hostname)
 		result = h.db.Exec(updateSQL2, args2...)
 	}
 	// 如果还是没匹配到，记录日志（Agent 上报了，但服务器列表里没有对应条目）
 	if result.RowsAffected == 0 {
 		fmt.Printf("[agent] 上报主机 %q (IP: %s) 未匹配任何 servers 条目，指标仅写入 agent_reports 表\n", req.Hostname, matchIP)
 	}
 	// WebSocket 广播：向所有前端客户端推送该主机的最新指标 // Logan.Li
 	if h.hubMetrics != nil && result.RowsAffected > 0 {
@@ -154,10 +183,11 @@ func (h *AgentHandler) writeHotMetric(c *gin.Context, key string, value float64,
 	_ = h.cache.ZRemRangeByScore(ctx, key, "-inf", fmt.Sprintf("%.0f", cutoff))
 }
-// GetLatestReports 获取各主机最新上报
+// GetLatestReports 获取各主机最新上报（仅 3 分钟内活跃的 hostname）
 // GET /api/v1/agent/latest
 func (h *AgentHandler) GetLatestReports(c *gin.Context) {
 	var results []models.AgentLatestResponse
 	threeMinAgo := time.Now().Add(-3 * time.Minute)
 	h.db.Raw(`
 		SELECT
 			a.hostname,
@@ -179,10 +209,13 @@ func (h *AgentHandler) GetLatestReports(c *gin.Context) {
 		LEFT JOIN servers s ON s.hostname = a.hostname
 		LEFT JOIN regions r ON r.id = s.region_id
 		WHERE a.id IN (
-			SELECT MAX(id) FROM agent_reports GROUP BY hostname
+			SELECT MAX(id) FROM agent_reports
 			WHERE report_time >= ?
 			GROUP BY hostname
 		)
 		AND s.id IS NOT NULL  -- 只显示匹配 servers 表的主机（首次上线后自动同步 hostname）
 		ORDER BY a.report_time DESC
-	`).Scan(&results)
+	`, threeMinAgo).Scan(&results)
 	if results == nil {
 		results = []models.AgentLatestResponse{}
@@ -152,6 +152,82 @@ func (h *AgentTaskHandler) GetTask(c *gin.Context) {
 // ===== Agent 告警规则 =====
 // QuickSetupRules POST /api/v1/agent/rules/quick-setup
 // 一键创建默认告警规则（CPU/内存/磁盘/网络带宽），作用于所有在线主机
 func (h *AgentTaskHandler) QuickSetupRules(c *gin.Context) {
 	var req struct {
 		Type string `json:"type"` // "ecs" 或留空
 	}
 	c.ShouldBindJSON(&req)
 	// 获取所有在线主机
 	var onlineHosts []string
 	h.db.Model(&models.Server{}).
 		Where("agent_status = ?", "online").
 		Pluck("hostname", &onlineHosts)
 	if len(onlineHosts) == 0 {
 		// 如果没有在线主机，尝试从 agent_reports 中获取最近 3 分钟活跃的主机名
 		h.db.Model(&models.AgentReport{}).
 			Where("report_time >= ?", time.Now().Add(-3*time.Minute)).
 			Distinct("hostname").
 			Pluck("hostname", &onlineHosts)
 	}
 	if len(onlineHosts) == 0 {
 		c.JSON(400, models.Response{Code: 400, Message: "没有在线的主机，请先安装并启动 Agent"})
 		return
 	}
 	type ruleDef struct {
 		Name     string
 		Metric   string
 		Operator string
 		Threshold float64
 		Duration int
 	}
 	defaultRules := []ruleDef{
 		{Name: "CPU使用率(Warn)", Metric: "cpu", Operator: ">", Threshold: 80},
 		{Name: "内存使用率(Warn)", Metric: "mem", Operator: ">", Threshold: 80},
 		{Name: "磁盘使用率(Warn)", Metric: "disk", Operator: ">", Threshold: 80},
 		{Name: "网络带宽使用率(Warn)", Metric: "net", Operator: ">", Threshold: 80},
 	}
 	created := 0
 	skipped := 0
 	for _, host := range onlineHosts {
 		for _, def := range defaultRules {
 			// 检查是否已存在同名同主机的规则，避免重复创建
 			var existing models.AgentRule
 			h.db.Where("name = ? AND hostname = ?", def.Name, host).First(&existing)
 			if existing.ID > 0 {
 				skipped++
 				continue
 			}
 			rule := models.AgentRule{
 				Name:      def.Name,
 				Hostname:  host,
 				Metric:    def.Metric,
 				Operator:  def.Operator,
 				Threshold: def.Threshold,
 				Enabled:   true,
 			}
 			if err := h.db.Create(&rule).Error; err != nil {
 				continue
 			}
 			created++
 		}
 	}
 	c.JSON(200, models.Response{
 		Code:    200,
 		Message: fmt.Sprintf("已为 %d 台主机创建 %d 条规则（跳过 %d 条已存在的)", len(onlineHosts), created, skipped),
 		Data:    gin.H{"hosts": len(onlineHosts), "created": created, "skipped": skipped},
 	})
 }
 // ListRules GET /api/v1/agent/rules
 func (h *AgentTaskHandler) ListRules(c *gin.Context) {
 	var rules []models.AgentRule
@@ -95,36 +95,74 @@ func (e *AlertEngine) checkResourceAlerts() {
 	}
 }
-// 检查主机离线（超过 3 分钟无上报）— 内置规则，无需手动创建
+// 检查主机离线（超过 3 分钟无上报）— 内置规则，无需手动创建。
 // 以 servers 表为中心：遍历所有服务器，检查其 IP 上是否有 Agent 在最近 3 分钟内上报。
 // 如果同一 IP 下有多个 Agent hostname，只要有一个在活跃上报，该服务器就算在线。
 func (e *AlertEngine) checkOfflineAlerts() {
 	offlineThreshold := 3 * time.Minute
-	// 查所有曾上报的主机
+	// 获取所有已登记的主机（去重 IP）
-	var hostnames []string
+	var servers []models.Server
-	e.db.Model(&models.AgentReport{}).Distinct("hostname").Pluck("hostname", &hostnames)
+	e.db.Select("ip, hostname").Group("ip").Find(&servers)
-	for _, hostname := range hostnames {
+	// 收集所有 agent_reports 中活跃上报的主机名（最近 3 分钟内有上报）
-		var report models.AgentReport
+	threeMinAgo := time.Now().Add(-offlineThreshold)
-		e.db.Where("hostname = ?", hostname).Order("id DESC").First(&report)
+
-		if report.ID == 0 {
+	var activeHostnames []string
 	e.db.Model(&models.AgentReport{}).
 		Where("report_time >= ?", threeMinAgo).
 		Distinct("hostname").
 		Pluck("hostname", &activeHostnames)
 	// 对于每个已登记的服务器，检查是否有活跃 Agent
 	for _, s := range servers {
 		if s.IP == "" {
 			continue
 		}
-		isOffline := time.Since(report.ReportTime) > offlineThreshold
+		// 检查该 IP 对应的服务器是否有活跃 Agent 上报
 		hasActiveAgent := false
 		for _, h := range activeHostnames {
 			// 通过 hostname 精确匹配或 servers 表 IP 匹配
 			if h == s.Hostname {
 				hasActiveAgent = true
 				break
 			}
 			// 检查该 hostname 的最新上报——其源 IP 是否匹配此 server IP
 			// （通过 servers 表中查找 hostname 对应的 IP）
 			var matchedServer models.Server
 			e.db.Where("hostname = ?", h).First(&matchedServer)
 			if matchedServer.ID > 0 && matchedServer.IP == s.IP {
 				hasActiveAgent = true
 				break
 			}
 		}
-		// 检查是否有未恢复的离线告警
+		if hasActiveAgent {
 			continue // 有活跃 Agent，在线
 		}
 		// 该服务器离线：检查是否已有未恢复的离线告警
 		var existing models.AgentAlert
 		e.db.Where("hostname = ? AND metric = ? AND resolved = ?",
-			hostname, "offline", false).First(&existing)
+			s.Hostname, "offline", false).First(&existing)
 		if existing.ID == 0 {
 			// 获取最后一次上报时间计算离线时长
 			var lastReport models.AgentReport
 			e.db.Order("id DESC").First(&lastReport)
 			offlineMinutes := 3.0
 			if lastReport.ID > 0 {
 				offlineMinutes = time.Since(lastReport.ReportTime).Minutes()
 			}
 		if isOffline && existing.ID == 0 {
 			alert := models.AgentAlert{
 				RuleName:  "主机离线",
-				Hostname:  hostname,
+				Hostname:  s.Hostname,
 				Metric:    "offline",
 				Severity:  "critical",
-				Message:   fmt.Sprintf("主机 %s 已超过 3 分钟无数据上报，可能已离线", hostname),
+				Message:   fmt.Sprintf("主机 %s (%s) 已超过 3 分钟无数据上报，可能已离线", s.Hostname, s.IP),
-				Value:     time.Since(report.ReportTime).Minutes(),
+				Value:     offlineMinutes,
 				Threshold: 3,
 			}
 			e.db.Create(&alert)
@@ -443,6 +443,7 @@ func Register(r *gin.Engine, db *gorm.DB, log *zap.Logger, cfg *config.Config, c
 		// 告警规则
 		agentQuery.GET("/rules", taskHandler.ListRules)
 		agentQuery.POST("/rules/quick-setup", taskHandler.QuickSetupRules)
 		agentQuery.POST("/rules", taskHandler.CreateRule)
 		agentQuery.PUT("/rules/:id", taskHandler.UpdateRule)
 		agentQuery.DELETE("/rules/:id", taskHandler.DeleteRule)
@@ -54,6 +54,7 @@ type AgentLatestResponse struct {
 // AgentReportRequest Agent 上报请求体 // Logan.Li
 type AgentReportRequest struct {
 	Hostname     string       `json:"hostname" binding:"required"`
 	IP           string       `json:"ip"`       // Agent 探测的本机 IP
 	Timestamp    string       `json:"timestamp"`
 	AgentVersion string       `json:"agent_version"` // Agent 版本号
 	CPU          CPUMetric    `json:"cpu"`
@@ -62,6 +63,13 @@ type AgentReportRequest struct {
 	Ports        []PortMetric `json:"ports"`
 	Network      NetworkStat  `json:"network"`  // 网络指标
 	DiskIO       DiskIOStat   `json:"disk_io"`  // 磁盘 IO
 	System       *SystemStat  `json:"system,omitempty"` // 系统信息（首次/变更时上报）
 }
 // SystemStat 系统静态信息（OS/内核等）// Logan.Li
 type SystemStat struct {
 	OSVersion string `json:"os_version"` // OS 版本 (如 "Ubuntu 22.04")
 	Kernel    string `json:"kernel"`     // 内核版本
 }
 type CPUMetric struct {
@@ -12,6 +12,7 @@
 | [数据库设计](./database-schema.md) | 数据模型和表结构 |
 | [开发规范](./development-guide.md) | 代码规范、Git 工作流 |
 | [部署指南](./deployment.md) | 生产环境部署 |
 | [开发日志](./dev-log.md) | 详细开发日志（按日期记录） |
 ## 设计文档
@@ -259,3 +259,404 @@
  "git_commit": "unknown"
 }
 ```
 ## Agent 监控
 ### POST /agent/report — Agent 上报指标 (无需 JWT)
 Agent 向服务端上报主机性能指标数据。
 **请求体：**
 ```json
 {
  "hostname": "web-server-01",
  "cpu": {
    "usage_percent": 45.2,
    "cores": 8
  },
  "memory": {
    "total_gb": 16,
    "used_gb": 8.5,
    "usage_percent": 53.1
  },
  "disk": [
    {
      "mount": "/",
      "total_gb": 100,
      "used_gb": 60,
      "usage_percent": 60.0
    }
  ],
  "network": {
    "rx_bytes": 1024000,
    "tx_bytes": 512000
  },
  "uptime_seconds": 864000
 }
 ```
 **响应：**
 ```json
 {
  "code": 200,
  "message": "上报成功",
  "data": null
 }
 ```
 ### GET /agent/latest — 各主机最新指标 (需 JWT)
 获取所有在线主机的最近一次上报指标。仅返回 3 分钟内活跃且匹配 servers 表的主机。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": [
    {
      "hostname": "web-server-01",
      "cpu": { "usage_percent": 45.2 },
      "memory": { "usage_percent": 53.1 },
      "disk": [{"usage_percent": 60.0}],
      "network": { "rx_bytes": 1024000, "tx_bytes": 512000 },
      "uptime_seconds": 864000,
      "reported_at": "2025-06-18T10:30:00Z"
    }
  ]
 }
 ```
 ### GET /agent/history/:hostname — 历史趋势 (?hours=N)
 查询指定主机在最近 N 小时内的指标历史数据。
 **查询参数：**
 | 参数 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
 | `hours` | int | 24 | 查询最近多少小时的数据 |
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": [
    {
      "hostname": "web-server-01",
      "cpu": { "usage_percent": 45.2 },
      "memory": { "usage_percent": 53.1 },
      "reported_at": "2025-06-18T10:30:00Z"
    }
  ]
 }
 ```
 ---
 ### Agent 告警规则
 #### GET /agent/rules — 规则列表
 获取所有 Agent 告警规则。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": [
    {
      "id": 1,
      "name": "CPU 使用率过高",
      "metric": "cpu.usage_percent",
      "condition": ">",
      "threshold": 80,
      "hostname": "*",
      "enabled": true,
      "created_at": "2025-06-18T10:00:00Z"
    }
  ]
 }
 ```
 #### POST /agent/rules — 创建规则
 创建一条 Agent 告警规则。
 **请求体：**
 ```json
 {
  "name": "CPU 使用率过高",
  "metric": "cpu.usage_percent",
  "condition": ">",
  "threshold": 80,
  "hostname": "*"
 }
 ```
 #### POST /agent/rules/quick-setup — 一键创建默认规则
 一键创建默认告警规则（CPU / 内存 / 磁盘 / 网络，阈值 80%），作用于所有在线主机。
 **请求体：** 无（可选传空 JSON `{}`）
 **响应：**
 ```json
 {
  "code": 200,
  "message": "默认规则创建成功",
  "data": {
    "created": 4
  }
 }
 ```
 默认创建的规则包括：
 | 规则名称 | 指标 | 条件 | 阈值 |
 |----------|------|------|------|
 | CPU 使用率过高 | `cpu.usage_percent` | `>` | 80 |
 | 内存使用率过高 | `memory.usage_percent` | `>` | 80 |
 | 磁盘使用率过高 | `disk.usage_percent` | `>` | 80 |
 | 网络带宽过高 | `network.total_bytes` | `>` | 80 |
 #### PUT /agent/rules/:id — 更新规则
 更新指定告警规则。
 #### DELETE /agent/rules/:id — 删除规则
 删除指定告警规则。
 ---
 ### Agent 告警事件
 #### GET /agent/alerts — 告警事件列表
 获取 Agent 触发的告警事件列表。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": {
    "list": [
      {
        "id": 1,
        "rule_id": 1,
        "rule_name": "CPU 使用率过高",
        "hostname": "web-server-01",
        "metric": "cpu.usage_percent",
        "value": 92.5,
        "threshold": 80,
        "status": "firing",
        "fired_at": "2025-06-18T10:30:00Z",
        "resolved_at": null
      }
    ],
    "total": 1
  }
 }
 ```
 #### POST /agent/alerts/:id/resolve — 恢复告警
 手动将指定告警事件标记为已恢复。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "告警已恢复",
  "data": null
 }
 ```
 ---
 ### Agent 远程任务
 #### POST /agent/tasks — 下发远程任务
 向指定主机下发远程任务（如执行脚本、重启服务等）。
 **请求体：**
 ```json
 {
  "hostname": "web-server-01",
  "command": "systemctl restart nginx",
  "description": "重启 Nginx 服务",
  "timeout_seconds": 30
 }
 ```
 **响应：**
 ```json
 {
  "code": 200,
  "message": "任务已下发",
  "data": {
    "task_id": "550e8400-e29b-41d4-a716-446655440000",
    "status": "pending"
  }
 }
 ```
 #### GET /agent/tasks — 任务列表
 获取所有远程任务的列表（支持分页和筛选）。
 **查询参数：**
 | 参数 | 类型 | 说明 |
 |------|------|------|
 | `hostname` | string | 按主机名筛选 |
 | `status` | string | 按状态筛选：`pending`、`running`、`success`、`failed` |
 | `page` | int | 页码 (默认 1) |
 | `page_size` | int | 每页数量 (默认 20) |
 #### GET /agent/tasks/:id — 任务详情
 获取指定远程任务的详细信息及执行结果。
 #### GET /agent/tasks/poll?hostname=xx — Agent 拉取任务 (无需 JWT)
 Agent 主动轮询拉取分配给自己的待执行任务。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": [
    {
      "task_id": "550e8400-e29b-41d4-a716-446655440000",
      "command": "systemctl restart nginx",
      "timeout_seconds": 30
    }
  ]
 }
 ```
 #### POST /agent/tasks/:task_id/result — Agent 回传结果 (无需 JWT)
 Agent 执行完任务后，回传执行结果。
 **请求体：**
 ```json
 {
  "status": "success",
  "stdout": "nginx restarted successfully\n",
  "stderr": "",
  "exit_code": 0,
  "duration_ms": 2500
 }
 ```
 ---
 ### Agent K线聚合
 #### POST /agent/aggregate — 触发聚合
 手动触发 K 线数据聚合任务（通常由定时任务自动执行）。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "聚合任务已触发",
  "data": null
 }
 ```
 #### GET /agent/kline — 查询 K 线
 查询主机性能指标的 K 线（聚合）数据。
 **查询参数：**
 | 参数 | 类型 | 必填 | 说明 |
 |------|------|------|------|
 | `hostname` | string | 否 | 主机名，不传则返回所有主机 |
 | `metric` | string | 否 | 指标名，如 `cpu.usage_percent` |
 | `interval` | string | 否 | 聚合间隔：`1m`、`5m`、`15m`、`1h`、`1d` |
 | `from` | string | 否 | 起始时间 (ISO 8601) |
 | `to` | string | 否 | 结束时间 (ISO 8601) |
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": [
    {
      "hostname": "web-server-01",
      "metric": "cpu.usage_percent",
      "timestamp": "2025-06-18T10:00:00Z",
      "open": 45.0,
      "high": 92.5,
      "low": 40.0,
      "close": 55.0,
      "avg": 53.2,
      "count": 60
    }
  ]
 }
 ```
 ---
 ### Agent 二进制分发 (无需 JWT)
 提供 Agent 二进制文件及安装脚本的下载。
 #### GET /agent/arch — 版本信息 + 下载链接
 获取当前 Agent 版本信息及各架构对应的下载链接。
 **响应：**
 ```json
 {
  "code": 200,
  "message": "success",
  "data": {
    "version": "v1.2.3",
    "released_at": "2025-06-18",
    "downloads": {
      "linux_amd64": "/api/v1/agent/aiops-agent-linux-amd64",
      "linux_arm64": "/api/v1/agent/aiops-agent-linux-arm64",
      "darwin_arm64": "/api/v1/agent/aiops-agent-darwin-arm64"
    },
    "install_script": "/api/v1/agent/install.sh"
  }
 }
 ```
 #### GET /agent/aiops-agent-linux-amd64 — x86_64 二进制
 下载 Linux x86_64 架构的 Agent 二进制文件。
 响应为二进制流 (`Content-Type: application/octet-stream`)。
 #### GET /agent/aiops-agent-linux-arm64 — ARM64 二进制
 下载 Linux ARM64 架构的 Agent 二进制文件。
 响应为二进制流 (`Content-Type: application/octet-stream`)。
 #### GET /agent/aiops-agent-darwin-arm64 — macOS 二进制
 下载 macOS Apple Silicon (ARM64) 架构的 Agent 二进制文件。
 响应为二进制流 (`Content-Type: application/octet-stream`)。
 #### GET /agent/install.sh — 一键安装脚本
 下载 Agent 一键安装脚本。
 响应为 Shell 脚本文本 (`Content-Type: text/plain`)。
@@ -1807,3 +1807,28 @@ cd ~/devops/aiops
  - 后端 `scripts/mock.go` 644 行（已废弃种子脚本），可考虑直接删除（mocks 已迁移到真实 API）
  - 前端 `services/api.ts` 752 行超 700 行硬上限，可按模块拆分（userApi/dashboardApi/serverApi... 各拆独立文件 barrel re-export），风险较高需谨慎
  - 回到 dev-log 早期建议：用户消息气泡中【平台实时数据】块可折叠展示
 ## 2026-06-18 Agent 监控指标上报修复 + 一键报警 + 品牌统一
 ### 诊断与修复
 - **Agent hostname 与 servers 表不匹配导致指标更新静默失败**: ReceiveReport 原 WHERE 两参数都填 agent hostname，hostname 不匹配任何 server → RowsAffected=0 → 静默失败（agent_reports 有数据但 servers 不更新）
  - 修复: Agent 启动时探测本机 IP（net.Dial("udp")）在 JSON 中含 ip 字段；后端用 req.IP 作 OR ip 匹配
  - 修复: 改用 h.db.Exec() 原始 SQL 避免 GORM soft-delete 自动条件干扰
 - **Agent 未采集系统信息导致 servers.os 为空**: 新建 agent/collector/system.go（读 /etc/os-release PRETTY_NAME + /proc/version kernel），启动采集并前 3 次上报携带
 - **告警引擎离线检测以 agent_reports hostname 为中心而非 servers IP**: 同一服务器可能有多个 hostname 交替上报，旧 hostname 超 3 分钟触发离线告警但服务器实际在线
  - 修复: checkOfflineAlerts 改为以 servers IP 为中心 — 遍历服务器 IP，检查 3 分钟内是否有任何 agent 对应该 IP → 有则在线
 - **Agent latest API 过滤过期 hostname**: GetLatestReports SQL 添加 WHERE report_time >= NOW() - 3 MINUTE + AND s.id IS NOT NULL 双重过滤，监控大屏不再显示离线/过期主机
 - **主机名自动同步**: ReceiveReport 发现 hostname 不匹配但 IP 匹配时，CASE WHEN 自动更新 servers 表 hostname 字段
 ### 一键报警
 - 后端新增 POST /api/v1/agent/rules/quick-setup 接口
 - 自动检测所有 agent_status=online 的主机
 - 为每台主机创建 CPU使用率（Warn）/内存使用率（Warn）/磁盘使用率（Warn）/网络带宽使用率（Warn）4 条默认规则（阈值 80%）
 - 前端 AlertCenter 规则列表从 agentApi.listRules() 拉取（之前调 alertCenterApi.getRules() 走的空路由）
 - 规则切换/删除/编辑 全部对接 agentApi
 ### 品牌统一
 - EZOps → AIOps 全局替换: frontend/backend/agent/scripts 全量扫描替换
 - 小写 ezops（Go module path/launchd plist/JWT secret）保留不改避免破坏编译/运行时
 - WebShell 欢迎语/Login 标题/LLM system prompt 全部统一为 AIOps
@@ -116,10 +116,22 @@ aiops/
 │   │   └── mock.go              # Mock 数据生成
 │   ├── config.yaml              # 配置文件（SQLite 默认）
 │   ├── go.mod                   # Go 模块定义
-│   └── Dockerfile               # Docker 构建
+│   ├── Dockerfile               # Docker 构建
 │
 ├── agent/                       # 监控 Agent (Go, 独立 module ezops/agent)
 │   ├── main.go                  # CLI 入口 (-server/-interval/-token/-hostname)
 │   ├── collector/               # CPU/mem/disk/port/system 采集器 (/proc)
 │   ├── model/model.go           # 上报数据结构 (Report/CPUStat/MemStat/...)
 │   ├── model/model_ext.go       # 扩展类型 (NetworkStat/DiskIOStat/SystemStat)
 │   ├── reporter/http.go         # HTTP POST 上报
 │   ├── task/                    # 远程任务执行 (云助手模式)
 │   ├── deploy/                  # systemd service + install.sh 一键安装
 │   ├── Makefile                 # 交叉编译 amd64+arm64+darwin-arm64
 │   └── bin/                     # 编译产物 (gitignore)
 │
 ├── docs/                        # 开发文档
 │   ├── README.md                # 文档索引
 │   ├── dev-log.md               # 开发日志
 │   ├── project-structure.md     # 本文件
 │   ├── quick-start.md           # 快速开始
 │   ├── api-reference.md         # API 接口
@@ -144,7 +156,7 @@ aiops/
 | 技术 | 版本 | 用途 |
 |------|------|------|
-| React | 18+ | 前端框架 |
+| React | 19+ | 前端框架 |
 | TypeScript | 5+ | 类型安全 |
 | Vite | 7+ | 构建工具 |
 | Tailwind CSS | 3+ | 样式框架 |
@@ -31,6 +31,7 @@ import { AIPredictiveAnalytics } from '@/components/aiops/AIPredictiveAnalytics'
 import AlertCenter from '@/components/monitor/alert-center/AlertCenter';
 import TraceManager from '@/components/monitor/trace/TraceManager';
 import HostMonitorDashboard from '@/components/monitor/dashboard/HostMonitorDashboard';
 import GrafanaDashboard from '@/components/monitor/dashboard/GrafanaDashboard';
 import { MonitorCenter } from '@/pages/MonitorCenter';
 import { MetricsExplorer } from '@/pages/MetricsExplorer';
 import DatasourcePage from '@/components/monitor/datasource/DatasourcePage';
@@ -72,11 +73,11 @@ function App() {
            <Route path="deploy" element={<AppReleaseManager />} />
            {/* 监控告警 */}
            <Route path="metrics" element={<MetricsExplorer />} />
            <Route path="alert-center" element={<AlertCenter />} />
            <Route path="trace" element={<TraceManager />} />
            <Route path="dashboards" element={<HostMonitorDashboard />} />
            <Route path="datasources" element={<DatasourcePage />} />
            <Route path="trace" element={<TraceManager />} />
            <Route path="dashboards" element={<GrafanaDashboard />} />
            <Route path="alerts" element={<AlertManager />} />
            <Route path="alert-center" element={<AlertCenter />} />
            <Route path="logs" element={<AlertManager />} />
            <Route path="approval" element={<ApprovalFlowManager />} />
            {/* 自动化运维 */}
@@ -88,9 +88,8 @@ const menuItems: MenuItem[] = [
    children: [
      { id: 'grafana', name: '监控大屏', icon: Monitor, path: '/dashboards' },
      { id: 'monitor-center', name: '资源监控', icon: Activity, path: '/monitor-center' },
      { id: 'metrics', name: '指标监控', icon: Cpu, path: '/metrics' },
      { id: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
-      { id: 'alert-center', name: '告警服务', icon: Bell, path: '/alert-center' },
+      { id: 'alert-center', name: '告警中心', icon: Bell, path: '/alert-center' },
      { id: 'datasources', name: '数据源', icon: Database, path: '/datasources' },
    ],
  },
@@ -2,7 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import {
  AlertTriangle, AlertCircle, CheckCircle, Zap, Search, RefreshCw,
-  Eye, Check, VolumeX,
+  Eye, Check, VolumeX, Plus, Rocket,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -14,14 +14,17 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Switch } from '@/components/ui/switch';
 import { toast } from 'sonner';
-import { alertCenterApi } from '@/services/api';
+import { useConfirm } from '@/components/ui/confirm-dialog';
 import { alertCenterApi, agentApi } from '@/services/api';
 import {
  type Alert, type AlertRule, mapAlert, getSeverityBadge, getStatusBadge,
 } from './alert-center-helpers';
 import { AlertDetailDialog, AlertSilenceDialog } from './AlertCenterDetail';
 import { AlertChannelsTab } from './AlertChannelsTab';
 import { AlertRuleDialog } from '@/components/monitor/AlertRuleDialog';
 const AlertCenter: React.FC = () => {
  const _confirm = useConfirm();
  const [alerts, setAlerts] = useState<Alert[]>([]);
  const [rules, setRules] = useState<AlertRule[]>([]);
  const [loading, setLoading] = useState(false);
@@ -33,6 +36,10 @@ const AlertCenter: React.FC = () => {
  const [detailOpen, setDetailOpen] = useState(false);
  const [silenceOpen, setSilenceOpen] = useState(false);
  const [stats, setStats] = useState({ firing: 0, critical: 0, warning: 0, resolved: 0 });
  // 规则弹框
  const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<any>(null);
  const [quickSetupLoading, setQuickSetupLoading] = useState(false);
  useEffect(() => {
    fetchData();
@@ -67,8 +74,19 @@ const AlertCenter: React.FC = () => {
  const fetchRules = async () => {
    try {
-      const res = await alertCenterApi.getRules();
+      const res = await agentApi.listRules();
-      setRules(res.list || []);
+      // agentApi.listRules returns {code, data: AgentRule[]} — map to AlertRule for UI
      const raw = (Array.isArray(res) ? res : (res.list || [])) as any[];
      setRules(raw.map(r => ({
        id: r.id,
        name: r.name,
        description: `${r.metric} ${r.operator} ${r.threshold}%`,
        enabled: r.enabled,
        severity: 'warning',
        type: r.metric,
        hostname: r.hostname || '全部主机',
        threshold: r.threshold,
      })) as AlertRule[]);
    } catch {
      toast.error('获取告警规则失败');
    }
@@ -107,7 +125,7 @@ const AlertCenter: React.FC = () => {
  const toggleRule = async (ruleId: string, enabled: boolean) => {
    try {
-      await alertCenterApi.toggleRule(ruleId);
+      await agentApi.updateRule(Number(ruleId), { enabled });
      setRules(rules.map(r => String(r.id) === ruleId ? { ...r, enabled } : r));
      toast.success('规则状态已更新');
    } catch {
@@ -115,6 +133,33 @@ const AlertCenter: React.FC = () => {
    }
  };
  const handleOpenAddRule = () => { setEditingRule(null); setRuleDialogOpen(true); };
  const handleEditRule = (rule: AlertRule) => { setEditingRule(rule); setRuleDialogOpen(true); };
  const handleRuleDialogClose = () => { setRuleDialogOpen(false); setEditingRule(null); };
  const handleQuickSetup = async () => {
    const ok = await _confirm({
      title: '一键报警',
      description: '将为 Agent 在线的全部主机创建 CPU使用率、内存使用率、磁盘使用率、网络带宽使用率 四条默认告警规则（阈值 80%，连续 5 次触发）。',
      confirmText: '确认创建',
    });
    if (!ok) return;
    setQuickSetupLoading(true);
    try {
      const res = await agentApi.quickSetup('ecs');
      toast.success(typeof res === 'string' ? res : (res?.message || '默认告警规则创建成功'));
      fetchRules();
    } catch {
      toast.error('创建失败，请检查 Agent 主机是否在线');
    } finally { setQuickSetupLoading(false); }
  };
  const handleDeleteRule = async (rule: AlertRule) => {
    const ok = await _confirm({ title: '删除规则', description: `确定删除规则「${rule.name}」？`, confirmText: '删除', variant: 'destructive' });
    if (!ok) return;
    try { await agentApi.deleteRule(Number(rule.id)); toast.success('已删除'); fetchRules(); } catch { toast.error('删除失败'); }
  };
  const filteredAlerts = alerts.filter(alert => {
    const matchSearch = alert.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                       alert.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -311,11 +356,27 @@ const AlertCenter: React.FC = () => {
        {/* 告警规则 Tab */}
        <TabsContent value="rules" className="space-y-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-2">
              <Button onClick={handleOpenAddRule}>
                <Plus className="w-4 h-4 mr-1" />添加规则
              </Button>
              <Button variant="secondary" onClick={handleQuickSetup} disabled={quickSetupLoading}>
                <Rocket className="w-4 h-4 mr-1" />
                {quickSetupLoading ? '创建中…' : '一键报警'}
              </Button>
            </div>
            <Button variant="outline" onClick={fetchRules}>
              <RefreshCw className="w-4 h-4 mr-2" />
              刷新
            </Button>
          </div>
          {rules.length === 0 ? (
            <div className="text-center py-12 text-muted-foreground">
              <AlertTriangle className="w-10 h-10 mx-auto mb-2 opacity-50" />
              <p className="text-sm">暂无告警规则</p>
              <p className="text-xs mt-1">点击「添加规则」或「一键报警」快速创建</p>
            </div>
          ) : (
          <div className="grid grid-cols-1 gap-4">
            {rules.map((rule) => (
              <Card key={rule.id}>
@@ -353,6 +414,8 @@ const AlertCenter: React.FC = () => {
                      })()}
                    </div>
                    <div className="flex items-center gap-2">
                      <Button variant="ghost" size="sm" onClick={() => handleEditRule(rule)}>编辑</Button>
                      <Button variant="ghost" size="sm" className="text-red-400" onClick={() => handleDeleteRule(rule)}>删除</Button>
                      <Switch
                        checked={rule.enabled}
                        onCheckedChange={(checked) => toggleRule(String(rule.id), checked)}
@@ -363,6 +426,7 @@ const AlertCenter: React.FC = () => {
              </Card>
            ))}
          </div>
          )}
        </TabsContent>
        {/* 通知渠道 Tab — 自包含子组件 */}
@@ -383,6 +447,13 @@ const AlertCenter: React.FC = () => {
        onOpenChange={setSilenceOpen}
        onSilence={handleSilence}
      />
      <AlertRuleDialog
        open={ruleDialogOpen}
        onOpenChange={handleRuleDialogClose}
        editingRule={editingRule}
        notifyChannels={[]}
        onSaved={() => { handleRuleDialogClose(); fetchRules(); }}
      />
    </div>
  );
 };
@@ -1,751 +1,249 @@
 // 监控大屏 — 标签页切换 Agent / Zabbix / Prometheus + 自定义仪表盘 // Logan.Li
 import React, { useState, useEffect } from 'react';
 import {
-  Monitor, Settings, Plus, Edit, Trash2, Copy, Eye, Download, RefreshCw,
+  Monitor, Plus, RefreshCw, Maximize2, Minimize2, BarChart3, Clock,
-  Maximize2, Minimize2, Save, X, ChevronDown, BarChart3, LineChart, PieChart,
+  Server, Activity, Database, Wifi, WifiOff, ArrowUpDown, ArrowUp, ArrowDown,
-  Activity, Cpu, Database, Server, Globe, Zap, AlertTriangle, TrendingUp, HardDrive,
+  ExternalLink
  TrendingDown, Clock, Calendar, Filter, Search, ArrowUpDown, ArrowUp, ArrowDown,
  Wifi, WifiOff
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
-  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter
 } from '@/components/ui/dialog';
-import {
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue
 } from '@/components/ui/select';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
 import { toast } from 'sonner';
-import { useConfirm } from '@/components/ui/confirm-dialog';
+import { dashboardApi, promDatasourceApi, zabbixDatasourceApi } from '@/services/api';
 import { dashboardApi } from '@/services/api';
 import { GrafanaPanelContent } from './GrafanaPanelContent';
 import { ZabbixDashboard } from './ZabbixDashboard';
 import { PrometheusDashboard } from './PrometheusDashboard';
 import { http } from '@/services/http';
 import { asList } from '@/components/agent/agentUtils';
-interface Dashboard {
+// ═══════════ Tab 配置 ═══════════
-  id: string;
+type TabId = 'agent' | 'zabbix' | 'prometheus' | 'dashboard';
-  name: string;
+const TABS: { id: TabId; label: string; icon: React.ReactNode }[] = [
-  description: string;
+  { id: 'agent', label: 'Agent 主机', icon: <Server className="w-3.5 h-3.5" /> },
-  datasource: 'prometheus' | 'zabbix' | 'skywalking' | 'custom';
+  { id: 'zabbix', label: 'Zabbix', icon: <Activity className="w-3.5 h-3.5" /> },
-  datasourceUrl: string;
+  { id: 'prometheus', label: 'Prometheus', icon: <Activity className="w-3.5 h-3.5" /> },
-  panels: Panel[];
+  { id: 'dashboard', label: '自定义', icon: <Monitor className="w-3.5 h-3.5" /> },
-  createdAt: string;
+];
  updatedAt: string;
  createdBy: string;
  isDefault: boolean;
 }
 export interface Panel {
  id: string;
  title: string;
  type: 'graph' | 'stat' | 'gauge' | 'table' | 'pie' | 'heatmap' | 'text';
  query: string;
  datasource: string;
  width: number;
  height: number;
  x: number;
  y: number;
  options: PanelOptions;
 }
 interface PanelOptions {
  unit?: string;
  min?: number;
  max?: number;
  thresholds?: Threshold[];
  legend?: boolean;
  tooltip?: boolean;
  refreshInterval?: number;
 }
 interface Threshold {
  value: number;
  color: string;
  name: string;
 }
 interface Datasource {
  id: string;
  name: string;
  type: 'prometheus' | 'zabbix' | 'skywalking' | 'influxdb' | 'elasticsearch';
  url: string;
  status: 'connected' | 'disconnected' | 'error';
 }
 // Agent 主机完整信息（对齐后端 AgentLatestResponse）
 interface AgentHost {
  hostname: string;
  ip: string;
  cpu_usage: number;
  cpu_cores: number;
  mem_usage: number;
  mem_total: number;
  mem_used: number;
  disk_usage: number;
  disk_info: string;
  net_info: string;
  report_time: string;
  agent_version: string;
  agent_status: string;
  os: string;
  region: string;
 }
 // ═══════════ Agent 主机监控表格 ═══════════
 interface AgentHost { hostname: string; ip: string; cpu_usage: number; cpu_cores: number; mem_usage: number; mem_total: number; mem_used: number; disk_usage: number; agent_version: string; agent_status: string; os: string; region: string; }
 type SortField = 'hostname' | 'agent_version' | 'agent_status' | 'cpu_usage' | 'mem_usage' | 'disk_usage' | 'region' | 'ip';
-const GrafanaDashboard: React.FC = () => {
+const AgentTab: React.FC = () => {
  const _confirm = useConfirm();
  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
  const [datasources, setDatasources] = useState<Datasource[]>([]);
  const [activeDashboard, setActiveDashboard] = useState<Dashboard | null>(null);
  const [loading, setLoading] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [addPanelOpen, setAddPanelOpen] = useState(false);
  const [datasourceOpen, setDatasourceOpen] = useState(false);
  const [newDashboard, setNewDashboard] = useState({
    name: '',
    description: '',
    datasource: 'prometheus' as const,
    datasourceUrl: ''
  });
  const [newPanel, setNewPanel] = useState({
    title: '',
    type: 'graph' as const,
    query: '',
    width: 6,
    height: 4
  });
  const [newDatasource, setNewDatasource] = useState({
    name: '',
    type: 'prometheus' as const,
    url: ''
  });
  // ==================== Agent 主机监控 ====================
  const [hosts, setHosts] = useState<AgentHost[]>([]);
-  const [hostsLoading, setHostsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-  const [sortField, setSortField] = useState<SortField>('cpu_usage');
+  const [sf, setSf] = useState<SortField>('cpu_usage');
-  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+  const [sd, setSd] = useState<'asc' | 'desc'>('desc');
-
+  const [page, setPage] = useState(1);
-  const fetchHosts = async () => {
+  const [pageSize, setPageSize] = useState(10);
-    try {
+  const totalPages = Math.max(1, Math.ceil(hosts.length / pageSize));
-      const data = await http.get('/agent/latest');
+  const fetch = async () => { try { setHosts(asList(await http.get('/agent/latest'))); } catch {} finally { setLoading(false); } };
-      setHosts(asList(data));
+  useEffect(() => { fetch(); const t = setInterval(fetch, 30000); return () => clearInterval(t); }, []);
-    } catch { /* 后端未就绪时静默 */ }
+  const toggle = (f: SortField) => { if (sf === f) setSd(d => d === 'asc' ? 'desc' : 'asc'); else { setSf(f); setSd('desc'); } };
-    finally { setHostsLoading(false); }
+  const sorted = [...hosts].sort((a, b) => {
-  };
+    let va: any = (a as any)[sf] ?? '', vb: any = (b as any)[sf] ?? '';
-
+    if (sf === 'agent_status') { va = a.agent_status || ''; vb = b.agent_status || ''; }
-  useEffect(() => {
+    if (typeof va === 'number') return sd === 'asc' ? va - vb : vb - va;
-    fetchHosts();
+    return sd === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
    const timer = setInterval(fetchHosts, 30000);
    return () => clearInterval(timer);
  }, []);
  // 排序
  const toggleSort = (field: SortField) => {
    if (sortField === field) {
      setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDir('desc');
    }
  };
  const sortedHosts = [...hosts].sort((a, b) => {
    let va: any, vb: any;
    if (sortField === 'agent_status') {
      va = a.agent_status || '';
      vb = b.agent_status || '';
    } else {
      va = (a as any)[sortField] ?? '';
      vb = (b as any)[sortField] ?? '';
    }
    if (typeof va === 'number' && typeof vb === 'number') {
      return sortDir === 'asc' ? va - vb : vb - va;
    }
    return sortDir === 'asc'
      ? String(va).localeCompare(String(vb))
      : String(vb).localeCompare(String(va));
  });
-
+  const paged = sorted.slice((page - 1) * pageSize, page * pageSize);
-  const SortIcon = ({ field }: { field: SortField }) => {
+  const SI = ({ f }: { f: SortField }) => sf !== f ? <ArrowUpDown className="w-3 h-3 text-slate-500" /> : sd === 'asc' ? <ArrowUp className="w-3 h-3 text-emerald-400" /> : <ArrowDown className="w-3 h-3 text-emerald-400" />;
-    if (sortField !== field) return <ArrowUpDown className="w-3 h-3 text-slate-500" />;
+  const bar = (v: number, l: string) => (
-    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3 text-emerald-400" /> : <ArrowDown className="w-3 h-3 text-emerald-400" />;
+    <div className="flex items-center gap-2 min-w-[90px]"><div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden"><div className={`h-full rounded-full transition-all duration-500 ${v >= 80 ? 'bg-orange-500' : 'bg-emerald-500'}`} style={{ width: `${Math.min(v, 100)}%` }} /></div><span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'text-orange-400' : ''}`}>{l}</span></div>
  };
  const usageBar = (val: number, label: string) => {
    const pct = Math.min(val, 100);
    const isWarn = val >= 80;
    const barColor = isWarn ? 'bg-orange-500' : 'bg-emerald-500';
    const textColor = isWarn ? 'text-orange-400' : '';
    return (
      <div className="flex items-center gap-2 min-w-[90px]">
        <div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden">
          <div
            className={`h-full rounded-full transition-all duration-500 ${barColor}`}
            style={{ width: `${pct}%` }}
          />
        </div>
        <span className={`w-14 text-right text-xs font-mono tabular-nums ${textColor}`}>
          {label}
        </span>
      </div>
  );
-  };
+  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载中…</p></div>;
-
+  if (!hosts.length) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Server className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">暂无 Agent 上报数据</p><p className="text-xs mt-1">请确保至少一台主机安装了 AIOps Agent</p></div>;
  // ==================== 仪表盘 CRUD ====================
  useEffect(() => {
    fetchDashboards();
    fetchDatasources();
  }, []);
  const fetchDashboards = async () => {
    setLoading(true);
    try {
      const res = await dashboardApi.getDashboards();
      setDashboards(res.data || []);
      if (res.data?.length > 0 && !activeDashboard) {
        setActiveDashboard(res.data[0]);
      }
    } catch (error) {
      toast.error('获取仪表盘失败');
    } finally {
      setLoading(false);
    }
  };
  const fetchDatasources = async () => {
    try {
      const res = await dashboardApi.getDatasources();
      setDatasources(res.data || []);
    } catch (error) {
      toast.error('获取数据源失败');
    }
  };
  const handleCreateDashboard = async () => {
    if (!newDashboard.name) {
      toast.error('请输入仪表盘名称');
      return;
    }
    try {
      await dashboardApi.createDashboard({
        ...newDashboard,
        panels: []
      });
      toast.success('仪表盘创建成功');
      setCreateOpen(false);
      setNewDashboard({ name: '', description: '', datasource: 'prometheus', datasourceUrl: '' });
      fetchDashboards();
    } catch (error) {
      toast.error('创建失败');
    }
  };
  const handleAddPanel = async () => {
    if (!newPanel.title || !newPanel.query || !activeDashboard) {
      toast.error('请填写完整信息');
      return;
    }
    try {
      const panel: Panel = {
        id: Date.now().toString(),
        ...newPanel,
        datasource: activeDashboard.datasource,
        x: 0,
        y: 0,
        options: {
          unit: '',
          legend: true,
          tooltip: true,
          refreshInterval: 30
        }
      };
      await dashboardApi.updateDashboard(activeDashboard.id, {
        ...activeDashboard,
        panels: [...activeDashboard.panels, panel]
      });
      toast.success('面板添加成功');
      setAddPanelOpen(false);
      setNewPanel({ title: '', type: 'graph', query: '', width: 6, height: 4 });
      fetchDashboards();
    } catch (error) {
      toast.error('添加失败');
    }
  };
  const handleAddDatasource = async () => {
    if (!newDatasource.name || !newDatasource.url) {
      toast.error('请填写完整信息');
      return;
    }
    try {
      await dashboardApi.createDatasource(newDatasource);
      toast.success('数据源添加成功');
      setDatasourceOpen(false);
      setNewDatasource({ name: '', type: 'prometheus', url: '' });
      fetchDatasources();
    } catch (error) {
      toast.error('添加失败');
    }
  };
  const handleDeleteDashboard = async (id: string) => {
    { const ok = await _confirm({ title: '删除仪表盘', description: '确定删除此仪表盘吗？', confirmText: '删除', variant: 'destructive' }); if (!ok) return; }
    try {
      await dashboardApi.deleteDashboard(id);
      toast.success('删除成功');
      if (activeDashboard?.id === id) {
        setActiveDashboard(null);
      }
      fetchDashboards();
    } catch (error) {
      toast.error('删除失败');
    }
  };
  const getDatasourceIcon = (type: string) => {
    switch (type) {
      case 'prometheus': return <Activity className="w-4 h-4" />;
      case 'zabbix': return <Server className="w-4 h-4" />;
      case 'skywalking': return <Globe className="w-4 h-4" />;
      case 'influxdb': return <Database className="w-4 h-4" />;
      default: return <Database className="w-4 h-4" />;
    }
  };
  const getPanelIcon = (type: string) => {
    switch (type) {
      case 'graph': return <LineChart className="w-4 h-4" />;
      case 'stat': return <Activity className="w-4 h-4" />;
      case 'gauge': return <Cpu className="w-4 h-4" />;
      case 'pie': return <PieChart className="w-4 h-4" />;
      case 'table': return <BarChart3 className="w-4 h-4" />;
      default: return <BarChart3 className="w-4 h-4" />;
    }
  };
  return (
    <div className={`space-y-4 ${fullscreen ? 'fixed inset-0 z-50 bg-background p-4' : ''}`}>
      {/* ===== 顶部工具栏 ===== */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Select
            value={activeDashboard?.id}
            onValueChange={(id) => {
              const dashboard = dashboards.find(d => d.id === id);
              if (dashboard) setActiveDashboard(dashboard);
            }}
          >
            <SelectTrigger className="w-[250px]">
              <SelectValue placeholder="选择仪表盘" />
            </SelectTrigger>
            <SelectContent>
              {dashboards.map(d => (
                <SelectItem key={d.id} value={d.id}>
                  <div className="flex items-center gap-2">
                    {getDatasourceIcon(d.datasource)}
                    {d.name}
                    {d.isDefault && <Badge variant="outline" className="text-xs">默认</Badge>}
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {activeDashboard && (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Clock className="w-4 h-4" />
              <span>更新于 {activeDashboard.updatedAt}</span>
            </div>
          )}
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={fetchDashboards}>
            <RefreshCw className="w-4 h-4 mr-2" />
            刷新
          </Button>
          {activeDashboard && (
            <>
              <Button variant="outline" size="sm" onClick={() => setAddPanelOpen(true)}>
                <Plus className="w-4 h-4 mr-2" />
                添加面板
              </Button>
            </>
          )}
          <Button variant="outline" size="sm" onClick={() => setFullscreen(!fullscreen)}>
            {fullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
          </Button>
          <Button variant="outline" size="sm" onClick={() => setDatasourceOpen(true)}>
            <Database className="w-4 h-4 mr-2" />
            数据源
          </Button>
          <Button size="sm" onClick={() => setCreateOpen(true)}>
            <Plus className="w-4 h-4 mr-2" />
            新建仪表盘
          </Button>
        </div>
      </div>
      {/* ===== 仪表盘内容 ===== */}
      {activeDashboard ? (
        <div className="space-y-4">
          {/* 仪表盘信息 */}
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-bold">{activeDashboard.name}</h2>
              <p className="text-sm text-muted-foreground">{activeDashboard.description}</p>
            </div>
            <div className="flex items-center gap-2">
              <Badge variant="outline" className="gap-1">
                {getDatasourceIcon(activeDashboard.datasource)}
                {activeDashboard.datasource}
              </Badge>
            </div>
          </div>
          {/* ===== Agent 主机监控 — 默认表格面板 ===== */}
          <Card className="bg-[var(--dg-bg-secondary)] border-emerald-500/20">
            <CardHeader className="py-3 px-4 pb-2">
              <div className="flex items-center gap-2">
                <Server className="h-4 w-4 text-emerald-400" />
                <CardTitle className="text-sm font-medium text-[var(--dg-text-primary)]">Agent 主机监控</CardTitle>
                <Badge variant="outline" className="text-[10px] bg-emerald-500/10 text-emerald-400 border-emerald-500/30">默认</Badge>
                <span className="text-[10px] text-[var(--dg-text-muted)] ml-auto">每 30s 刷新</span>
              </div>
            </CardHeader>
            <CardContent className="px-4 pb-3 pt-0">
              {hostsLoading ? (
                <div className="text-center py-12 text-[var(--dg-text-muted)]">
                  <Activity className="h-6 w-6 mx-auto mb-2 animate-spin text-slate-600" />
                  <p className="text-xs">加载中…</p>
                </div>
              ) : hosts.length === 0 ? (
                <div className="text-center py-12 text-[var(--dg-text-muted)]">
                  <Server className="h-8 w-8 mx-auto mb-2 text-slate-600" />
                  <p className="text-sm">暂无 Agent 上报数据</p>
                  <p className="text-xs mt-1">请确保至少一台主机安装了 AIOps Agent 并正常上报</p>
                </div>
              ) : (
    <div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
      <table className="w-full text-xs">
-                    <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
+        <thead className="bg-[var(--dg-bg-tertiary)] border-b"><tr>
-                      <tr>
+          {['hostname','agent_version','agent_status','cpu_usage','mem_usage','disk_usage','region','ip'].map(f => (
-                        {[
+            <th key={f} className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] cursor-pointer hover:text-[var(--dg-text-primary)] select-none whitespace-nowrap" onClick={() => toggle(f as SortField)}>
-                          { field: 'hostname', label: '主机名' },
+              <div className="flex items-center gap-1">{{hostname:'主机名',agent_version:'Agent版本',agent_status:'状态',cpu_usage:'CPU',mem_usage:'内存',disk_usage:'磁盘',region:'区域',ip:'IP'}[f]}<SI f={f as SortField} /></div>
                          { field: 'agent_version', label: 'Agent 版本' },
                          { field: 'agent_status', label: '状态' },
                          { field: 'cpu_usage', label: 'CPU 使用率' },
                          { field: 'mem_usage', label: '内存使用率' },
                          { field: 'disk_usage' as SortField, label: '磁盘使用率' },
                          { field: 'region', label: '所在区域' },
                          { field: 'ip', label: 'IP 地址' },
                        ].map(({ field, label }) => (
                          <th
                            key={field}
                            className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] cursor-pointer hover:text-[var(--dg-text-primary)] select-none whitespace-nowrap"
                            onClick={() => toggleSort(field as SortField)}
                          >
                            <div className="flex items-center gap-1">
                              {label}
                              <SortIcon field={field as SortField} />
                            </div>
            </th>
-                        ))}
+          ))}</tr></thead>
                      </tr>
                    </thead>
        <tbody>
-                      {sortedHosts.map((host, i) => {
+          {paged.map((h, i) => (
-                        const isOnline = host.agent_status === 'online';
+            <tr key={h.hostname + i} className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50">
-                        return (
+              <td className="px-3 py-2.5 font-medium text-[var(--dg-text-primary)]">{h.hostname}</td>
-                          <tr
+              <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{h.agent_version || '—'}</td>
-                            key={host.hostname + i}
+              <td className="px-3 py-2.5"><Badge className={`text-[10px] ${h.agent_status==='online'?'bg-emerald-500/20 text-emerald-400':'bg-slate-500/10 text-slate-400'}`}>{h.agent_status==='online'?<><Wifi className="w-3 h-3 mr-1"/>在线</>:<><WifiOff className="w-3 h-3 mr-1"/>离线</>}</Badge></td>
-                            className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50 transition-colors"
+              <td className="px-3 py-2.5">{bar(Number(h.cpu_usage||0), `${Number(h.cpu_usage||0).toFixed(1)}%`)}</td>
-                          >
+              <td className="px-3 py-2.5">{bar(Number(h.mem_usage||0), `${Number(h.mem_usage||0).toFixed(1)}%`)}</td>
-                            <td className="px-3 py-2.5 whitespace-nowrap">
+              <td className="px-3 py-2.5">{bar(Number(h.disk_usage||0), `${Number(h.disk_usage||0).toFixed(1)}%`)}</td>
-                              <span className="font-medium text-[var(--dg-text-primary)]">{host.hostname}</span>
+              <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.region||'—'}</td>
-                            </td>
+              <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{h.ip||'—'}</td>
                            <td className="px-3 py-2.5 whitespace-nowrap text-[var(--dg-text-secondary)] font-mono">
                              {host.agent_version || '—'}
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap">
                              <Badge
                                variant={isOnline ? 'default' : 'secondary'}
                                className={`text-[10px] ${isOnline ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30' : 'bg-slate-500/10 text-slate-400 border-slate-500/20'}`}
                              >
                                {isOnline ? <Wifi className="w-3 h-3 mr-1" /> : <WifiOff className="w-3 h-3 mr-1" />}
                                {isOnline ? '在线' : '离线'}
                              </Badge>
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap">
                              {usageBar(Number(host.cpu_usage || 0), `${Number(host.cpu_usage || 0).toFixed(1)}%`)}
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap">
                              {usageBar(Number(host.mem_usage || 0), `${Number(host.mem_usage || 0).toFixed(1)}%`)}
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap">
                              {usageBar(Number(host.disk_usage || 0), `${Number(host.disk_usage || 0).toFixed(1)}%`)}
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap text-[var(--dg-text-secondary)]">
                              {host.region || '—'}
                            </td>
                            <td className="px-3 py-2.5 whitespace-nowrap font-mono text-[var(--dg-text-secondary)]">
                              {host.ip || '—'}
                            </td>
            </tr>
-                        );
+          ))}
                      })}
        </tbody>
      </table>
      {hosts.length > pageSize && (
        <div className="flex items-center justify-between px-3 py-2 bg-[var(--dg-bg-tertiary)] border-t border-[var(--dg-border)] text-xs">
          <div className="flex items-center gap-2 text-[var(--dg-text-muted)]">
            <span>共 {hosts.length} 条</span>
            <select className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded px-2 py-0.5 text-xs" value={pageSize} onChange={e => { setPageSize(Number(e.target.value)); setPage(1); }}>
              <option value={10}>10/页</option>
              <option value={20}>20/页</option>
              <option value={30}>30/页</option>
            </select>
          </div>
          <div className="flex items-center gap-1">
            <button className="px-2 py-0.5 rounded hover:bg-[var(--dg-bg-primary)] disabled:opacity-30" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</button>
            <span className="px-2 text-[var(--dg-text-primary)]">{page} / {totalPages}</span>
            <button className="px-2 py-0.5 rounded hover:bg-[var(--dg-bg-primary)] disabled:opacity-30" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</button>
          </div>
        </div>
      )}
            </CardContent>
          </Card>
          {/* Zabbix 数据源面板 */}
          <ZabbixDashboard />
          {/* Prometheus 数据源面板 */}
          <PrometheusDashboard />
          {/* 面板网格 */}
          <div className="grid grid-cols-12 gap-4">
            {activeDashboard.panels.map((panel) => (
              <Card
                key={panel.id}
                className={`col-span-${panel.width}`}
                style={{ gridColumn: `span ${panel.width}`, minHeight: `${panel.height * 80}px` }}
              >
                <CardHeader className="py-3 px-4">
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-sm font-medium flex items-center gap-2">
                      {getPanelIcon(panel.type)}
                      {panel.title}
                    </CardTitle>
    </div>
-                </CardHeader>
+  );
-                <CardContent className="p-4 pt-0 flex-1">
+};
-                  <GrafanaPanelContent panel={panel} />
+
-                </CardContent>
+// ═══════════ 数据源 Wrapper ═══════════
 const ZabbixTab: React.FC = () => {
  const [ds, setDs] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    zabbixDatasourceApi.list().then((r: any) => {
      const list = r?.data || r || [];
      setDs(list.find((d: any) => d.is_default) || list[0] || null);
    }).catch(() => {}).finally(() => setLoading(false));
  }, []);
  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载数据源…</p></div>;
  if (!ds) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Database className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">未配置 Zabbix 数据源</p><a href="/datasources" className="text-xs text-blue-400 hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a></div>;
  return <ZabbixDashboard dsUrl={ds.url} dsUsername={ds.username} dsPassword={ds.password} />;
 };
 const PrometheusTab: React.FC = () => {
  const [ds, setDs] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    promDatasourceApi.list().then((r: any) => {
      const list = r?.data || r || [];
      setDs(list.find((d: any) => d.is_default) || list[0] || null);
    }).catch(() => {}).finally(() => setLoading(false));
  }, []);
  if (loading) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Activity className="h-6 w-6 mx-auto mb-2 animate-spin" /><p className="text-xs">加载数据源…</p></div>;
  if (!ds) return <div className="text-center py-20 text-[var(--dg-text-muted)]"><Database className="h-8 w-8 mx-auto mb-2" /><p className="text-sm">未配置 Prometheus 数据源</p><a href="/datasources" className="text-xs text-blue-400 hover:underline inline-flex items-center gap-1">前往配置 <ExternalLink className="w-3 h-3" /></a></div>;
  return <PrometheusDashboard dsUrl={ds.url} />;
 };
 // ═══════════ 自定义仪表盘 ═══════════
 interface Dashboard { id: string; name: string; description: string; datasource: string; datasourceUrl: string; panels: Panel[]; createdAt: string; updatedAt: string; createdBy: string; isDefault: boolean; }
 export interface Panel { id: string; title: string; type: string; query: string; datasource: string; width: number; height: number; x: number; y: number; options: any; }
 const DashboardTab: React.FC = () => {
  const [dashboards, setDashboards] = useState<Dashboard[]>([]);
  const [active, setActive] = useState<Dashboard | null>(null);
  const [createOpen, setCreateOpen] = useState(false);
  const [addOpen, setAddOpen] = useState(false);
  const [nd, setNd] = useState({ name: '', description: '', datasource: 'prometheus' as const, datasourceUrl: '' });
  const [np, setNp] = useState({ title: '', type: 'graph' as const, query: '', width: 6, height: 4 });
  const fetch = async () => {
    try { const res = await dashboardApi.getDashboards(); const list = res.data || []; setDashboards(list); if (list.length > 0 && !active) setActive(list[0]); } catch {}
  };
  useEffect(() => { fetch(); }, []);
  const create = async () => {
    if (!nd.name) { toast.error('请输入名称'); return; }
    try { await dashboardApi.createDashboard({ ...nd, panels: [] }); toast.success('创建成功'); setCreateOpen(false); setNd({ name: '', description: '', datasource: 'prometheus', datasourceUrl: '' }); fetch(); } catch { toast.error('创建失败'); }
  };
  const addPanel = async () => {
    if (!np.title || !np.query || !active) return;
    try {
      const p: Panel = { id: Date.now().toString(), ...np, datasource: active.datasource, x: 0, y: 0, options: { legend: true, tooltip: true, refreshInterval: 30 } };
      await dashboardApi.updateDashboard(active.id, { ...active, panels: [...active.panels, p] });
      toast.success('面板添加成功'); setAddOpen(false); setNp({ title: '', type: 'graph', query: '', width: 6, height: 4 }); fetch();
    } catch { toast.error('添加失败'); }
  };
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Select value={active?.id} onValueChange={id => { const d = dashboards.find(x => x.id === id); if (d) setActive(d); }}>
          <SelectTrigger className="w-[240px] h-8 text-xs"><SelectValue placeholder="选择仪表盘" /></SelectTrigger>
          <SelectContent>{dashboards.map(d => <SelectItem key={d.id} value={d.id}>{d.name}{d.isDefault ? ' (默认)' : ''}</SelectItem>)}</SelectContent>
        </Select>
        <Button variant="outline" size="sm" className="h-8 text-[10px]" onClick={fetch}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button>
        {active && <Button variant="outline" size="sm" className="h-8 text-[10px]" onClick={() => setAddOpen(true)}><Plus className="w-3 h-3 mr-1" />添加面板</Button>}
        <Button variant="outline" size="sm" className="h-8 text-[10px]" onClick={() => setCreateOpen(true)}><Plus className="w-3 h-3 mr-1" />新建</Button>
      </div>
      {active ? (
        active.panels.length === 0 ? (
          <div className="text-center py-16 text-[var(--dg-text-muted)]"><BarChart3 className="w-10 h-10 mx-auto mb-2 opacity-50" /><p className="text-xs">暂无面板</p></div>
        ) : (
          <div className="grid grid-cols-12 gap-3">
            {active.panels.map(p => (
              <Card key={p.id} style={{ gridColumn: `span ${p.width}`, minHeight: `${p.height * 80}px` }}>
                <CardHeader className="py-2 px-3"><CardTitle className="text-[11px] font-medium">{p.title}</CardTitle></CardHeader>
                <CardContent className="p-3 pt-0"><GrafanaPanelContent panel={p} /></CardContent>
              </Card>
            ))}
            {activeDashboard.panels.length === 0 && (
              <div className="col-span-12 py-16 text-center text-muted-foreground">
                <BarChart3 className="w-16 h-16 mx-auto mb-4 opacity-50" />
                <p>暂无面板，点击"添加面板"开始创建</p>
              </div>
            )}
          </div>
          </div>
        )
      ) : (
-        <div className="py-16 text-center text-muted-foreground">
+        <div className="text-center py-16 text-[var(--dg-text-muted)]"><Monitor className="w-10 h-10 mx-auto mb-2 opacity-50" /><p className="text-xs">暂无仪表盘</p></div>
-          <Monitor className="w-16 h-16 mx-auto mb-4 opacity-50" />
+      )}
-          <p>请选择一个仪表盘或创建新的仪表盘</p>
+
-          <Button className="mt-4" onClick={() => setCreateOpen(true)}>
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}><DialogContent><DialogHeader><DialogTitle>新建仪表盘</DialogTitle></DialogHeader>
-            <Plus className="w-4 h-4 mr-2" />
+        <div className="space-y-3"><div><Label>名称</Label><Input value={nd.name} onChange={e => setNd({ ...nd, name: e.target.value })} /></div>
-            新建仪表盘
+          <div><Label>数据源</Label><Select value={nd.datasource} onValueChange={v => setNd({ ...nd, datasource: v as any })}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="prometheus">Prometheus</SelectItem><SelectItem value="zabbix">Zabbix</SelectItem><SelectItem value="skywalking">SkyWalking</SelectItem><SelectItem value="custom">自定义</SelectItem></SelectContent></Select></div></div>
        <DialogFooter><Button variant="outline" onClick={() => setCreateOpen(false)}>取消</Button><Button onClick={create}>创建</Button></DialogFooter></DialogContent></Dialog>
      <Dialog open={addOpen} onOpenChange={setAddOpen}><DialogContent><DialogHeader><DialogTitle>添加面板</DialogTitle></DialogHeader>
        <div className="space-y-3"><div><Label>标题</Label><Input value={np.title} onChange={e => setNp({ ...np, title: e.target.value })} /></div>
          <div><Label>类型</Label><Select value={np.type} onValueChange={v => setNp({ ...np, type: v as any })}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="graph">折线图</SelectItem><SelectItem value="stat">数值</SelectItem><SelectItem value="gauge">仪表盘</SelectItem><SelectItem value="table">表格</SelectItem></SelectContent></Select></div>
          <div><Label>查询</Label><Input value={np.query} onChange={e => setNp({ ...np, query: e.target.value })} /></div></div>
        <DialogFooter><Button variant="outline" onClick={() => setAddOpen(false)}>取消</Button><Button onClick={addPanel}>添加</Button></DialogFooter></DialogContent></Dialog>
    </div>
  );
 };
 // ═══════════ 主组件 ═══════════
 const GrafanaDashboard: React.FC = () => {
  const [tab, setTab] = useState<TabId>('agent');
  const [fullscreen, setFullscreen] = useState(false);
  return (
    <div className={`space-y-4 ${fullscreen ? 'fixed inset-0 z-50 bg-background p-4 overflow-auto' : ''}`}>
      {/* Tab 切换栏 */}
      <div className="flex items-center gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`flex items-center gap-1.5 px-4 py-2 rounded-md text-xs font-medium transition-colors ${
              tab === t.id
                ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] shadow-sm'
                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
            }`}
          >
            {t.icon}
            {t.label}
          </button>
        ))}
        <div className="ml-auto">
          <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setFullscreen(!fullscreen)}>
            {fullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
          </Button>
        </div>
-      )}
+      </div>
-      {/* 新建仪表盘对话框 */}
+      {/* Tab 内容 */}
-      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+      <div className="min-h-[50vh]">
-        <DialogContent>
+        {tab === 'agent' && <AgentTab />}
-          <DialogHeader>
+        {tab === 'zabbix' && <ZabbixTab />}
-            <DialogTitle>新建仪表盘</DialogTitle>
+        {tab === 'prometheus' && <PrometheusTab />}
-            <DialogDescription>创建一个新的监控仪表盘</DialogDescription>
+        {tab === 'dashboard' && <DashboardTab />}
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>名称</Label>
              <Input
                value={newDashboard.name}
                onChange={(e) => setNewDashboard({ ...newDashboard, name: e.target.value })}
                placeholder="仪表盘名称"
              />
      </div>
            <div>
              <Label>描述</Label>
              <Input
                value={newDashboard.description}
                onChange={(e) => setNewDashboard({ ...newDashboard, description: e.target.value })}
                placeholder="仪表盘描述"
              />
            </div>
            <div>
              <Label>数据源类型</Label>
              <Select
                value={newDashboard.datasource}
                onValueChange={(v) => setNewDashboard({ ...newDashboard, datasource: v as any })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="prometheus">Prometheus</SelectItem>
                  <SelectItem value="zabbix">Zabbix</SelectItem>
                  <SelectItem value="skywalking">SkyWalking</SelectItem>
                  <SelectItem value="custom">自定义</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>数据源 URL</Label>
              <Input
                value={newDashboard.datasourceUrl}
                onChange={(e) => setNewDashboard({ ...newDashboard, datasourceUrl: e.target.value })}
                placeholder="http://prometheus:9090"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setCreateOpen(false)}>取消</Button>
            <Button onClick={handleCreateDashboard}>创建</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      {/* 添加面板对话框 */}
      <Dialog open={addPanelOpen} onOpenChange={setAddPanelOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>添加面板</DialogTitle>
            <DialogDescription>向当前仪表盘添加一个监控面板</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label>面板标题</Label>
              <Input
                value={newPanel.title}
                onChange={(e) => setNewPanel({ ...newPanel, title: e.target.value })}
                placeholder="CPU 使用率"
              />
            </div>
            <div>
              <Label>图表类型</Label>
              <Select
                value={newPanel.type}
                onValueChange={(v) => setNewPanel({ ...newPanel, type: v as any })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="graph">折线图</SelectItem>
                  <SelectItem value="stat">数值</SelectItem>
                  <SelectItem value="gauge">仪表盘</SelectItem>
                  <SelectItem value="pie">饼图</SelectItem>
                  <SelectItem value="table">表格</SelectItem>
                  <SelectItem value="text">文本</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>PromQL / 查询语句</Label>
              <Input
                value={newPanel.query}
                onChange={(e) => setNewPanel({ ...newPanel, query: e.target.value })}
                placeholder="rate(node_cpu_seconds_total[5m])"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setAddPanelOpen(false)}>取消</Button>
            <Button onClick={handleAddPanel}>添加</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      {/* 数据源对话框 */}
      <Dialog open={datasourceOpen} onOpenChange={setDatasourceOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>管理数据源</DialogTitle>
            <DialogDescription>配置 Prometheus / Zabbix / SkyWalking 等外部数据源连接</DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            {datasources.length === 0 ? (
              <p className="text-sm text-muted-foreground py-4 text-center">暂无数据源配置</p>
            ) : (
              datasources.map(ds => (
                <div key={ds.id} className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
                  <div className="flex items-center gap-2">
                    {getDatasourceIcon(ds.type)}
                    <div>
                      <p className="text-sm font-medium">{ds.name}</p>
                      <p className="text-xs text-muted-foreground">{ds.url}</p>
                    </div>
                  </div>
                  <Badge
                    variant={ds.status === 'connected' ? 'default' : 'secondary'}
                    className={ds.status === 'connected' ? 'bg-green-500' : ds.status === 'error' ? 'bg-red-500' : ''}
                  >
                    {ds.status === 'connected' ? '已连接' : ds.status === 'error' ? '错误' : '已断开'}
                  </Badge>
                </div>
              ))
            )}
          </div>
          <Separator className="my-2" />
          <div className="space-y-3">
            <div>
              <Label>数据源名称</Label>
              <Input
                value={newDatasource.name}
                onChange={(e) => setNewDatasource({ ...newDatasource, name: e.target.value })}
                placeholder="My Prometheus"
              />
            </div>
            <div>
              <Label>类型</Label>
              <Select
                value={newDatasource.type}
                onValueChange={(v) => setNewDatasource({ ...newDatasource, type: v as any })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="prometheus">Prometheus</SelectItem>
                  <SelectItem value="zabbix">Zabbix</SelectItem>
                  <SelectItem value="skywalking">SkyWalking</SelectItem>
                  <SelectItem value="influxdb">InfluxDB</SelectItem>
                  <SelectItem value="elasticsearch">Elasticsearch</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label>URL</Label>
              <Input
                value={newDatasource.url}
                onChange={(e) => setNewDatasource({ ...newDatasource, url: e.target.value })}
                placeholder="http://prometheus:9090"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDatasourceOpen(false)}>关闭</Button>
            <Button onClick={handleAddDatasource}>添加数据源</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
 };
@@ -1,356 +1,41 @@
-// Prometheus 数据源监控面板 — K8s / Node / Pod / JVM // Logan.Li
+// Prometheus 数据源面板 — 接受外部配置 // Logan.Li
 import React, { useState, useEffect } from 'react';
-import {
+import { Server, Loader2, Activity, Cpu, RefreshCw, AlertTriangle, Container, Zap, ExternalLink } from 'lucide-react';
  Server, Loader2, Activity, Cpu, HardDrive, Network, RefreshCw,
  Plug, Settings, X, CheckCircle2, AlertTriangle, Container,
  BarChart3, Globe, Zap, TrendingUp, TrendingDown
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { toast } from 'sonner';
 import { http } from '@/services/http';
-const LS_KEY = 'aiops_prometheus_ds';
+interface Props { dsUrl?: string; }
 function getSavedDS(): { url: string } | null {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (raw) return JSON.parse(raw);
  } catch {}
  return null;
 }
 function saveDS(ds: { url: string }) { localStorage.setItem(LS_KEY, JSON.stringify(ds)); }
 // 小进度条组件
 const MiniBar = ({ val, label, color }: { val: number; label: string; color?: string }) => {
  const pct = Math.min(val, 100);
  const c = color || (val >= 80 ? 'bg-orange-500' : 'bg-purple-500');
  return (
    <div className="flex items-center gap-1.5 min-w-[80px]">
      <div className="flex-1 h-2 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden">
-        <div className={`h-full rounded-full transition-all ${c}`} style={{ width: `${pct}%` }} />
+        <div className={`h-full rounded-full ${color || 'bg-purple-500'}`} style={{ width: `${pct}%` }} />
      </div>
-      <span className="w-14 text-right text-[11px] font-mono tabular-nums text-[var(--dg-text-secondary)]">{label}</span>
+      <span className="w-14 text-right text-[11px] font-mono text-[var(--dg-text-secondary)]">{label}</span>
    </div>
  );
 };
-const fmtBps = (bps: number): string => {
+const fmtBytes = (b: number) => {
-  if (!bps || bps === 0) return '—';
+  if (!b) return '—';
  if (bps > 1e9) return `${(bps / 1e9).toFixed(1)} GB/s`;
  if (bps > 1e6) return `${(bps / 1e6).toFixed(1)} MB/s`;
  if (bps > 1e3) return `${(bps / 1e3).toFixed(1)} KB/s`;
  return `${bps.toFixed(1)} B/s`;
 };
 const fmtBytes = (b: number): string => {
  if (!b || b === 0) return '—';
  if (b > 1e9) return `${(b / 1e9).toFixed(1)} GB`;
  if (b > 1e6) return `${(b / 1e6).toFixed(1)} MB`;
-  if (b > 1e3) return `${(b / 1e3).toFixed(1)} KB`;
+  return `${(b / 1e3).toFixed(1)} KB`;
-  return `${b.toFixed(1)} B`;
+};
 const fmtBps = (b: number) => {
  if (!b) return '—';
  if (b > 1e9) return `${(b / 1e9).toFixed(1)} GB/s`;
  if (b > 1e6) return `${(b / 1e6).toFixed(1)} MB/s`;
  if (b > 1e3) return `${(b / 1e3).toFixed(1)} KB/s`;
  return `${b.toFixed(1)} B/s`;
 };
 // ============================================
 // K8s 面板
 // ============================================
 const K8sPanel: React.FC<{ data: any }> = ({ data }) => (
  <div className="space-y-4">
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
        <CardContent className="p-3 text-center">
          <div className="text-2xl font-bold text-purple-400">
            {data.podCount?.[0]?.value || 0}
          </div>
          <div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Pods</div>
        </CardContent>
      </Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
        <CardContent className="p-3 text-center">
          <div className="text-2xl font-bold text-blue-400">
            {data.deployCount?.[0]?.value || 0}
          </div>
          <div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Deployments</div>
        </CardContent>
      </Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
        <CardContent className="p-3 text-center">
          <div className="text-2xl font-bold text-emerald-400">
            {data.nodeCount?.[0]?.value || 0}
          </div>
          <div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Nodes</div>
        </CardContent>
      </Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
        <CardContent className="p-3 text-center">
          <div className="text-2xl font-bold text-amber-400">
            {data.nsPods?.length || 0}
          </div>
          <div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Namespaces</div>
        </CardContent>
      </Card>
    </div>
    {/* Node CPU / Memory 利用率 */}
    <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
      <div className="text-xs font-medium text-[var(--dg-text-primary)] mb-2 flex items-center gap-1.5"><Cpu className="w-3 h-3 text-purple-400" />节点资源利用率</div>
      <div className="space-y-2 max-h-60 overflow-y-auto">
        {(data.nodeCPU || []).map((n: any, i: number) => {
          const mem = (data.nodeMem || []).find((m: any) => m.node === n.node);
          return (
            <div key={i} className="flex items-center gap-3 text-[11px]">
              <span className="w-28 truncate text-[var(--dg-text-secondary)]" title={n.node}>{n.node}</span>
              <MiniBar val={Number(n.value || 0)} label={`${Number(n.value || 0).toFixed(1)}%`} />
              <MiniBar val={Number(mem?.value || 0)} label={`${Number(mem?.value || 0).toFixed(1)}%`} color="bg-blue-500" />
            </div>
          );
        })}
      </div>
    </div>
  </div>
 );
 // ============================================
 // Node 面板
 // ============================================
 const NodePanel: React.FC<{ data: any }> = ({ data }) => {
  const cpuItems = data.cpuUsage || [];
  const memItems = data.memUsage || [];
  const diskItems = data.diskUsage || [];
  const upItems = data.up || [];
  const netRx = data.netRx || [];
  const netTx = data.netTx || [];
  return (
    <div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
      <table className="w-full text-xs">
        <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
          <tr>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">节点</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">状态</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">CPU</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">内存</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">磁盘</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">流入</th>
            <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">流出</th>
          </tr>
        </thead>
        <tbody>
          {(data.nodes || []).map((n: any, i: number) => {
            const instance = n.instance || n.exported_instance || '';
            const cpu = cpuItems.find((c: any) => c.instance === instance);
            const mem = memItems.find((m: any) => m.instance === instance);
            const disk = diskItems.find((d: any) => d.instance === instance);
            const up = upItems.find((u: any) => u.instance === instance);
            const rx = netRx.find((r: any) => r.instance === instance);
            const tx = netTx.find((t: any) => t.instance === instance);
            const isUp = up?.value === 1;
            return (
              <tr key={i} className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50">
                <td className="px-3 py-2 whitespace-nowrap font-medium text-[var(--dg-text-primary)]">
                  {n.nodename || instance}
                </td>
                <td className="px-3 py-2">
                  <Badge className={`text-[10px] ${isUp ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}`}>
                    {isUp ? 'UP' : 'DOWN'}
                  </Badge>
                </td>
                <td className="px-3 py-2"><MiniBar val={Number(cpu?.value || 0)} label={`${Number(cpu?.value || 0).toFixed(1)}%`} /></td>
                <td className="px-3 py-2"><MiniBar val={Number(mem?.value || 0)} label={`${Number(mem?.value || 0).toFixed(1)}%`} color="bg-blue-500" /></td>
                <td className="px-3 py-2"><MiniBar val={Number(disk?.value || 0)} label={`${Number(disk?.value || 0).toFixed(1)}%`} color="bg-amber-500" /></td>
                <td className="px-3 py-2 font-mono text-[var(--dg-text-secondary)]">{fmtBps(Number(rx?.value || 0))}</td>
                <td className="px-3 py-2 font-mono text-[var(--dg-text-secondary)]">{fmtBps(Number(tx?.value || 0))}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
 };
 // ============================================
 // Pod 面板
 // ============================================
 const PodPanel: React.FC<{ data: any }> = ({ data }) => {
  const cpuItems = data.cpuTop || [];
  const memItems = data.memTop || [];
  const running = data.running?.[0]?.value || 0;
  const pending = data.pending?.[0]?.value || 0;
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-4 gap-3">
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-emerald-400">{running}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Running</div></CardContent></Card>
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-amber-400">{pending}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Pending</div></CardContent></Card>
      </div>
      <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
        <div className="text-xs font-medium text-[var(--dg-text-primary)] mb-2">CPU Top 10</div>
        <div className="space-y-1.5 max-h-40 overflow-y-auto">
          {cpuItems.map((p: any, i: number) => (
            <div key={i} className="flex items-center gap-2 text-[11px]">
              <span className="w-10 text-right text-[var(--dg-text-muted)]">{i + 1}</span>
              <span className="w-32 truncate text-[var(--dg-text-secondary)]" title={p.pod}>{p.pod}</span>
              <MiniBar val={Number(p.value || 0) * 100} label={`${Number(p.value || 0).toFixed(2)}c`} color="bg-purple-500" />
            </div>
          ))}
        </div>
      </div>
      <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
        <div className="text-xs font-medium text-[var(--dg-text-primary)] mb-2">内存 Top 10</div>
        <div className="space-y-1.5 max-h-40 overflow-y-auto">
          {memItems.map((p: any, i: number) => (
            <div key={i} className="flex items-center gap-2 text-[11px]">
              <span className="w-10 text-right text-[var(--dg-text-muted)]">{i + 1}</span>
              <span className="w-32 truncate text-[var(--dg-text-secondary)]" title={p.pod}>{p.pod}</span>
              <span className="ml-auto text-[var(--dg-text-primary)]">{fmtBytes(Number(p.value || 0))}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
 };
 // ============================================
 // JVM 面板
 // ============================================
 const JvmPanel: React.FC<{ data: any }> = ({ data }) => {
  const heap = Number(data.heapUsed?.[0]?.value || 0);
  const nonHeap = Number(data.nonHeapUsed?.[0]?.value || 0);
  const threads = Number(data.threadCount?.[0]?.value || 0);
  const uptime = Number(data.uptime?.[0]?.value || 0);
  const uptimeStr = uptime > 86400 ? `${(uptime / 86400).toFixed(1)}d` : `${(uptime / 3600).toFixed(1)}h`;
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-[var(--dg-text-primary)]">{uptimeStr}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Uptime</div></CardContent></Card>
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><MiniBar val={heap} label={`${heap.toFixed(1)}%`} color={heap > 80 ? 'bg-orange-500' : 'bg-purple-500'} /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Heap</div></CardContent></Card>
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><MiniBar val={nonHeap} label={`${nonHeap.toFixed(1)}%`} color="bg-blue-500" /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Non-Heap</div></CardContent></Card>
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-emerald-400">{threads}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Threads</div></CardContent></Card>
        <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-amber-400">{Number(data.gcPause?.[0]?.value || 0).toFixed(3)}</div><div className="text-[10px] text-[var(--dg-text-muted)]">GC Pause (s)</div></CardContent></Card>
      </div>
    </div>
  );
 };
 // ============================================
 // 主组件
 // ============================================
 export const PrometheusDashboard: React.FC = () => {
  const [connected, setConnected] = useState(false);
  const [loading, setLoading] = useState(false);
  const [url, setUrl] = useState('');
  const [error, setError] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [targets, setTargets] = useState(0);
  const [tab, setTab] = useState('k8s');
  // Dashboard 数据
  const [k8sData, setK8sData] = useState<any>({});
  const [nodeData, setNodeData] = useState<any>({});
  const [podData, setPodData] = useState<any>({});
  const [jvmData, setJvmData] = useState<any>({});
  useEffect(() => {
    const saved = getSavedDS();
    if (saved) { setUrl(saved.url); doConnect(saved.url); }
  }, []);
  const doConnect = async (u: string) => {
    setLoading(true); setError('');
    try {
      const data: any = await http.post('/prometheus/connect', { url: u });
      setConnected(true); setTargets(data.targets || 0);
      saveDS({ url: u });
      toast.success(`Prometheus 连接成功，${data.targets} 个 targets`);
      loadAllDashboards(u);
    } catch (e: any) {
      setConnected(false); setError(e.message || '连接失败');
    } finally { setLoading(false); }
  };
  const loadAllDashboards = async (u: string) => {
    for (const t of ['k8s', 'node', 'pod', 'jvm']) {
      try {
        const data: any = await http.post('/prometheus/dashboard', { url: u, type: t });
        const items: any = {};
        for (const [k, v] of Object.entries(data || {})) {
          items[k] = Array.isArray(v) ? v : ((v as any)?.data?.result ? parsePrune((v as any).data.result) : v);
        }
        if (t === 'k8s') setK8sData(items);
        if (t === 'node') setNodeData(items);
        if (t === 'pod') setPodData(items);
        if (t === 'jvm') setJvmData(items);
      } catch {}
    }
  };
  const handleConnect = () => {
    if (!url) { toast.error('请输入 Prometheus URL'); return; }
    doConnect(url);
  };
  const refresh = () => { if (url) { doConnect(url); } };
  return (
    <Card className="bg-[var(--dg-bg-secondary)] border-purple-500/20">
      <CardHeader className="py-3 px-4 pb-2">
        <div className="flex items-center gap-2">
          <Activity className="h-4 w-4 text-purple-400" />
          <CardTitle className="text-sm font-medium text-[var(--dg-text-primary)]">Prometheus 监控</CardTitle>
          {connected && <Badge className="text-[10px] bg-purple-500/10 text-purple-400 border-purple-500/30">{targets} targets</Badge>}
          {connected && <div className="ml-auto flex items-center gap-2">
            <Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refresh}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button>
            <Button variant="ghost" size="sm" className="h-6 px-2 text-[10px] text-red-400" onClick={() => { setConnected(false); localStorage.removeItem(LS_KEY); }}>
              <X className="w-3 h-3 mr-1" />断开
            </Button>
          </div>}
        </div>
      </CardHeader>
      <CardContent className="px-4 pb-3 pt-0">
        {loading ? (
          <div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-purple-400" /><p className="text-xs text-[var(--dg-text-muted)]">连接中...</p></div>
        ) : !connected ? (
          <div>
            {error && <div className="mb-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400 flex items-start gap-2"><AlertTriangle className="h-4 w-4 mt-0.5" /><span>{error}</span></div>}
            {!showForm ? (
              <div className="text-center py-8 text-[var(--dg-text-muted)]">
                <Plug className="h-8 w-8 mx-auto mb-2 text-slate-600" />
                <p className="text-sm">接入 Prometheus 以显示 K8s/Node/JVM 监控</p>
                <Button size="sm" variant="outline" className="mt-4" onClick={() => setShowForm(true)}><Settings className="w-3 h-3 mr-1" />配置连接</Button>
              </div>
            ) : (
              <div className="max-w-md mx-auto p-4 space-y-3 rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">
                <div className="flex items-center justify-between"><span className="text-sm font-medium">Prometheus 连接</span><Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setShowForm(false)}><X className="w-3 h-3" /></Button></div>
                <div><Label className="text-xs">URL</Label><Input className="h-8 text-xs mt-1" placeholder="http://prometheus:9090" value={url} onChange={e => setUrl(e.target.value)} /></div>
                <Button size="sm" className="w-full" onClick={handleConnect}><CheckCircle2 className="w-3 h-3 mr-1" />连接</Button>
              </div>
            )}
          </div>
        ) : (
          <Tabs value={tab} onValueChange={setTab}>
            <TabsList className="bg-[var(--dg-bg-tertiary)] mb-3">
              <TabsTrigger value="k8s" className="text-xs"><Container className="w-3 h-3 mr-1" />K8s 集群</TabsTrigger>
              <TabsTrigger value="node" className="text-xs"><Server className="w-3 h-3 mr-1" />节点</TabsTrigger>
              <TabsTrigger value="pod" className="text-xs"><Box className="w-3 h-3 mr-1" />Pod</TabsTrigger>
              <TabsTrigger value="jvm" className="text-xs"><Zap className="w-3 h-3 mr-1" />JVM</TabsTrigger>
            </TabsList>
            <TabsContent value="k8s"><K8sPanel data={k8sData} /></TabsContent>
            <TabsContent value="node"><NodePanel data={nodeData} /></TabsContent>
            <TabsContent value="pod"><PodPanel data={podData} /></TabsContent>
            <TabsContent value="jvm"><JvmPanel data={jvmData} /></TabsContent>
          </Tabs>
        )}
      </CardContent>
    </Card>
  );
 };
 // helper
 function parsePrune(result: any[]): any[] {
  return (result || []).map((r: any) => {
    const m: any = { ...(r.metric || {}) };
@@ -359,7 +44,151 @@ function parsePrune(result: any[]): any[] {
  });
 }
-// inline Box icon
+const Box = (p: any) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>;
-const Box = (props: any) => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>;
+
 const K8sPanel: React.FC<{ d: any }> = ({ d }) => (
  <div className="space-y-4">
    <div className="grid grid-cols-4 gap-3">
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-purple-400">{d.podCount?.[0]?.value || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Pods</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-blue-400">{d.deployCount?.[0]?.value || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Deployments</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-emerald-400">{d.nodeCount?.[0]?.value || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Nodes</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)]"><CardContent className="p-3 text-center"><div className="text-2xl font-bold text-amber-400">{d.nsPods?.length || 0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Namespaces</div></CardContent></Card>
    </div>
    <div className="rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3 max-h-60 overflow-y-auto">
      <div className="text-xs font-medium mb-2 flex items-center gap-1"><Cpu className="w-3 h-3 text-purple-400" />节点 CPU / 内存利用率</div>
      {(d.nodeCPU || []).map((n: any, i: number) => {
        const mem = (d.nodeMem || []).find((m: any) => m.node === n.node);
        return <div key={i} className="flex items-center gap-3 text-[11px] mb-1.5"><span className="w-28 truncate" title={n.node}>{n.node}</span><MiniBar val={Number(n.value||0)} label={`${Number(n.value||0).toFixed(1)}%`} /><MiniBar val={Number(mem?.value||0)} label={`${Number(mem?.value||0).toFixed(1)}%`} color="bg-blue-500" /></div>;
      })}
    </div>
  </div>
 );
 const NodePanel: React.FC<{ d: any }> = ({ d }) => (
  <div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
    <table className="w-full text-xs">
      <thead className="bg-[var(--dg-bg-tertiary)]"><tr><th className="px-3 py-2 text-left">节点</th><th className="px-3 py-2 text-left">状态</th><th className="px-3 py-2 text-left">CPU</th><th className="px-3 py-2 text-left">内存</th><th className="px-3 py-2 text-left">磁盘</th><th className="px-3 py-2 text-left">流入</th><th className="px-3 py-2 text-left">流出</th></tr></thead>
      <tbody>
        {(d.nodes || []).map((n: any, i: number) => {
          const inst = n.instance || n.exported_instance || '';
          const cpu = (d.cpuUsage||[]).find((x:any)=>x.instance===inst);
          const mem = (d.memUsage||[]).find((x:any)=>x.instance===inst);
          const disk = (d.diskUsage||[]).find((x:any)=>x.instance===inst);
          const up = (d.up||[]).find((x:any)=>x.instance===inst);
          const rx = (d.netRx||[]).find((x:any)=>x.instance===inst);
          const tx = (d.netTx||[]).find((x:any)=>x.instance===inst);
          return <tr key={i} className="border-b border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
            <td className="px-3 py-2 font-medium">{n.nodename||inst}</td>
            <td className="px-3 py-2"><Badge className={`text-[10px] ${up?.value===1?'bg-emerald-500/20 text-emerald-400':'bg-red-500/20 text-red-400'}`}>{up?.value===1?'UP':'DOWN'}</Badge></td>
            <td className="px-3 py-2"><MiniBar val={Number(cpu?.value||0)} label={`${Number(cpu?.value||0).toFixed(1)}%`} /></td>
            <td className="px-3 py-2"><MiniBar val={Number(mem?.value||0)} label={`${Number(mem?.value||0).toFixed(1)}%`} color="bg-blue-500" /></td>
            <td className="px-3 py-2"><MiniBar val={Number(disk?.value||0)} label={`${Number(disk?.value||0).toFixed(1)}%`} color="bg-amber-500" /></td>
            <td className="px-3 py-2 font-mono text-[var(--dg-text-secondary)]">{fmtBps(Number(rx?.value||0))}</td>
            <td className="px-3 py-2 font-mono text-[var(--dg-text-secondary)]">{fmtBps(Number(tx?.value||0))}</td>
          </tr>;
        })}
      </tbody>
    </table>
  </div>
 );
 const PodPanel: React.FC<{ d: any }> = ({ d }) => (
  <div className="space-y-4">
    <div className="grid grid-cols-4 gap-3">
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-emerald-400">{d.running?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Running</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-xl font-bold text-amber-400">{d.pending?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Pending</div></CardContent></Card>
    </div>
    <div className="rounded-lg bg-[var(--dg-bg-primary)] p-3 max-h-40 overflow-y-auto"><div className="text-xs font-medium mb-2">CPU Top 10</div>{(d.cpuTop||[]).map((p:any,i:number)=><div key={i} className="flex items-center gap-2 text-[11px] mb-1"><span className="w-10 text-right text-[var(--dg-text-muted)]">{i+1}</span><span className="w-32 truncate" title={p.pod}>{p.pod}</span><MiniBar val={Number(p.value||0)*100} label={`${Number(p.value||0).toFixed(2)}c`} color="bg-purple-500" /></div>)}</div>
    <div className="rounded-lg bg-[var(--dg-bg-primary)] p-3 max-h-40 overflow-y-auto"><div className="text-xs font-medium mb-2">内存 Top 10</div>{(d.memTop||[]).map((p:any,i:number)=><div key={i} className="flex items-center gap-2 text-[11px] mb-1"><span className="w-10 text-right text-[var(--dg-text-muted)]">{i+1}</span><span className="w-32 truncate" title={p.pod}>{p.pod}</span><span className="ml-auto">{fmtBytes(Number(p.value||0))}</span></div>)}</div>
  </div>
 );
 const JvmPanel: React.FC<{ d: any }> = ({ d }) => {
  const h = Number(d.heapUsed?.[0]?.value||0);
  const uptime = Number(d.uptime?.[0]?.value||0);
  return (
    <div className="grid grid-cols-5 gap-3">
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold">{uptime>86400?`${(uptime/86400).toFixed(1)}d`:`${(uptime/3600).toFixed(1)}h`}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Uptime</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><MiniBar val={h} label={`${h.toFixed(1)}%`} color={h>80?'bg-orange-500':'bg-purple-500'} /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Heap</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><MiniBar val={Number(d.nonHeapUsed?.[0]?.value||0)} label={`${Number(d.nonHeapUsed?.[0]?.value||0).toFixed(1)}%`} color="bg-blue-500" /><div className="text-[10px] text-[var(--dg-text-muted)] mt-1">Non-Heap</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-emerald-400">{d.threadCount?.[0]?.value||0}</div><div className="text-[10px] text-[var(--dg-text-muted)]">Threads</div></CardContent></Card>
      <Card className="bg-[var(--dg-bg-primary)]"><CardContent className="p-3 text-center"><div className="text-lg font-bold text-amber-400">{Number(d.gcPause?.[0]?.value||0).toFixed(3)}</div><div className="text-[10px] text-[var(--dg-text-muted)]">GC Pause (s)</div></CardContent></Card>
    </div>
  );
 };
 export const PrometheusDashboard: React.FC<Props> = ({ dsUrl }) => {
  const [connected, setConnected] = useState(false);
  const [loading, setLoading] = useState(false);
  const [targets, setTargets] = useState(0);
  const [error, setError] = useState('');
  const [tab, setTab] = useState('k8s');
  const [k8sD, setK8sD] = useState<any>({});
  const [nodeD, setNodeD] = useState<any>({});
  const [podD, setPodD] = useState<any>({});
  const [jvmD, setJvmD] = useState<any>({});
  useEffect(() => {
    if (dsUrl) doConnect(dsUrl);
  }, [dsUrl]);
  const doConnect = async (u: string) => {
    setLoading(true); setError('');
    try {
      const data: any = await http.post('/prometheus/connect', { url: u });
      setConnected(true); setTargets(data.targets||0);
      loadAll(u);
    } catch (e: any) { setConnected(false); setError(e.message||'连接失败'); }
    finally { setLoading(false); }
  };
  const loadAll = async (u: string) => {
    for (const t of ['k8s','node','pod','jvm']) {
      try {
        const data: any = await http.post('/prometheus/dashboard', { url: u, type: t });
        const items: any = {};
        for (const [k, v] of Object.entries(data||{}))
          items[k] = Array.isArray(v) ? v : ((v as any)?.data?.result ? parsePrune((v as any).data.result) : v);
        if (t==='k8s') setK8sD(items); if (t==='node') setNodeD(items);
        if (t==='pod') setPodD(items); if (t==='jvm') setJvmD(items);
      } catch {}
    }
  };
  const refresh = () => { if (dsUrl) doConnect(dsUrl); };
  if (!connected && !error) return null;
  return (
    <Card className="bg-[var(--dg-bg-secondary)] border-purple-500/20">
      <CardHeader className="py-3 px-4 pb-2">
        <div className="flex items-center gap-2">
          <Activity className="h-4 w-4 text-purple-400" />
          <CardTitle className="text-sm font-medium">Prometheus 监控</CardTitle>
          {connected && <Badge className="text-[10px] bg-purple-500/10 text-purple-400">{targets} targets</Badge>}
          {connected && <div className="ml-auto"><Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refresh}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button></div>}
        </div>
      </CardHeader>
      <CardContent className="px-4 pb-3 pt-0">
        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-purple-400" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400"><AlertTriangle className="h-4 w-4 inline mr-1" />{error}</div>)
        : (
          <Tabs value={tab} onValueChange={setTab}>
            <TabsList className="bg-[var(--dg-bg-tertiary)] mb-3">
              <TabsTrigger value="k8s" className="text-xs"><Container className="w-3 h-3 mr-1" />K8s</TabsTrigger>
              <TabsTrigger value="node" className="text-xs"><Server className="w-3 h-3 mr-1" />Node</TabsTrigger>
              <TabsTrigger value="pod" className="text-xs"><Box className="w-3 h-3 mr-1" />Pod</TabsTrigger>
              <TabsTrigger value="jvm" className="text-xs"><Zap className="w-3 h-3 mr-1" />JVM</TabsTrigger>
            </TabsList>
            <TabsContent value="k8s"><K8sPanel d={k8sD} /></TabsContent>
            <TabsContent value="node"><NodePanel d={nodeD} /></TabsContent>
            <TabsContent value="pod"><PodPanel d={podD} /></TabsContent>
            <TabsContent value="jvm"><JvmPanel d={jvmD} /></TabsContent>
          </Tabs>
        )}
      </CardContent>
    </Card>
  );
 };
 export default PrometheusDashboard;
@@ -1,301 +1,125 @@
-// Zabbix 数据源监控面板 — 镜像 Grafana Dashboard 5456 + 5363 // Logan.Li
+// Zabbix 数据源监控面板 — 接受外部配置 // Logan.Li
 import React, { useState, useEffect } from 'react';
 import {
  Server, Wifi, WifiOff, Loader2, AlertTriangle, Activity,
  Cpu, HardDrive, Network, Clock, RefreshCw, Plug, Settings,
-  ArrowUpDown, ArrowUp, ArrowDown, X, CheckCircle2
+  ArrowUpDown, ArrowUp, ArrowDown, ExternalLink
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
 import { toast } from 'sonner';
 import { http } from '@/services/http';
 interface ZabbixHost {
-  hostid: string;
+  hostid: string; hostname: string; name: string; ip: string; available: string;
-  hostname: string;
+  cpu_usage: number; memory_usage: number; disk_usage: number; load5: number;
-  name: string;
+  net_in_bps: number; net_out_bps: number; problem_count: number; uptime_days: number;
-  ip: string;
+  cpu_count: number; total_memory_gb: number;
  available: string;       // 0=未知 1=可用 2=不可用
  cpu_usage: number;
  memory_usage: number;
  disk_usage: number;
  load5: number;
  net_in_bps: number;
  net_out_bps: number;
  problem_count: number;
  uptime_days: number;
  cpu_count: number;
  total_memory_gb: number;
 }
 interface ZabbixData {
  version: string;
  hosts: ZabbixHost[];
  total: number;
 }
 type SortField = 'hostname' | 'cpu_usage' | 'memory_usage' | 'disk_usage' | 'load5' | 'net_in_bps' | 'net_out_bps' | 'problem_count' | 'uptime_days' | 'ip';
-const LS_KEY = 'aiops_zabbix_ds';
+interface Props { dsUrl?: string; dsUsername?: string; dsPassword?: string; }
-function getSavedDS(): { url: string; username: string; password: string } | null {
+export const ZabbixDashboard: React.FC<Props> = ({ dsUrl, dsUsername, dsPassword }) => {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (raw) return JSON.parse(raw);
  } catch {}
  return null;
 }
 function saveDS(ds: { url: string; username: string; password: string }) {
  localStorage.setItem(LS_KEY, JSON.stringify(ds));
 }
 export const ZabbixDashboard: React.FC = () => {
  const [connected, setConnected] = useState(false);
  const [loading, setLoading] = useState(false);
  const [hosts, setHosts] = useState<ZabbixHost[]>([]);
  const [version, setVersion] = useState('');
  const [error, setError] = useState('');
  const [url, setUrl] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showForm, setShowForm] = useState(false);
  const [sortField, setSortField] = useState<SortField>('cpu_usage');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
  // 尝试用保存的凭据自动连接
  useEffect(() => {
-    const saved = getSavedDS();
+    if (dsUrl && dsUsername && dsPassword) doConnect(dsUrl, dsUsername, dsPassword);
-    if (saved) {
+  }, [dsUrl, dsUsername, dsPassword]);
      setUrl(saved.url);
      setUsername(saved.username);
      setPassword(saved.password);
      doConnect(saved.url, saved.username, saved.password);
    }
  }, []);
  const doConnect = async (u: string, un: string, pw: string) => {
-    setLoading(true);
+    setLoading(true); setError('');
    setError('');
    try {
-      const data: ZabbixData = await http.post('/zabbix/connect', { url: u, username: un, password: pw });
+      const data: any = await http.post('/zabbix/connect', { url: u, username: un, password: pw });
      setHosts(data.hosts || []);
      setVersion(data.version || '');
      setConnected(true);
-      saveDS({ url: u, username: un, password: pw });
+    } catch (e: any) { setConnected(false); setError(e.message || '连接失败'); }
-      toast.success(`Zabbix ${data.version} 连接成功，${data.total} 台主机`);
+    finally { setLoading(false); }
    } catch (e: any) {
      setConnected(false);
      setError(e.message || '连接失败');
    } finally {
      setLoading(false);
    }
  };
-  const handleConnect = () => {
+  const refresh = () => { if (dsUrl && dsUsername && dsPassword) doConnect(dsUrl, dsUsername, dsPassword); };
-    if (!url || !username || !password) {
+  const toggleSort = (f: SortField) => {
-      toast.error('请填写完整连接信息');
+    if (sortField === f) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
-      return;
+    else { setSortField(f); setSortDir('desc'); }
    }
    doConnect(url, username, password);
  };
-
+  const sorted = [...hosts].sort((a, b) => {
-  const handleDisconnect = () => {
+    const va = (a as any)[sortField] ?? '', vb = (b as any)[sortField] ?? '';
-    setConnected(false);
+    if (typeof va === 'number') return sortDir === 'asc' ? va - vb : vb - va;
    setHosts([]);
    setError('');
    localStorage.removeItem(LS_KEY);
    toast.info('已断开 Zabbix 连接');
  };
  const refreshData = () => {
    if (url && username && password) doConnect(url, username, password);
  };
  const toggleSort = (field: SortField) => {
    if (sortField === field) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortField(field); setSortDir('desc'); }
  };
  const sortedHosts = [...hosts].sort((a, b) => {
    const va = (a as any)[sortField] ?? '';
    const vb = (b as any)[sortField] ?? '';
    if (typeof va === 'number' && typeof vb === 'number') {
      return sortDir === 'asc' ? va - vb : vb - va;
    }
    return sortDir === 'asc' ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
  });
-  const SortIcon = ({ field }: { field: SortField }) => {
+  const SI = ({ f }: { f: SortField }) => {
-    if (sortField !== field) return <ArrowUpDown className="w-3 h-3 text-slate-500" />;
+    if (sortField !== f) return <ArrowUpDown className="w-3 h-3 text-slate-500" />;
    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3 text-blue-400" /> : <ArrowDown className="w-3 h-3 text-blue-400" />;
  };
-  const usageBar = (val: number, label: string) => {
+  const bar = (v: number, label: string) => (
    const pct = Math.min(val, 100);
    const isWarn = val >= 80;
    return (
    <div className="flex items-center gap-2 min-w-[90px]">
      <div className="flex-1 h-2.5 rounded-full bg-[var(--dg-bg-tertiary)] overflow-hidden">
-          <div className={`h-full rounded-full transition-all duration-500 ${isWarn ? 'bg-orange-500' : 'bg-blue-500'}`}
+        <div className={`h-full rounded-full transition-all duration-500 ${v >= 80 ? 'bg-orange-500' : 'bg-blue-500'}`} style={{ width: `${Math.min(v, 100)}%` }} />
            style={{ width: `${pct}%` }} />
      </div>
-        <span className={`w-14 text-right text-xs font-mono tabular-nums ${isWarn ? 'text-orange-400' : ''}`}>{label}</span>
+      <span className={`w-14 text-right text-xs font-mono tabular-nums ${v >= 80 ? 'text-orange-400' : ''}`}>{label}</span>
    </div>
  );
  const fmtBps = (b: number): string => {
    if (!b || b === 0) return '—';
    if (b > 1e9) return `${(b / 1e9).toFixed(1)} GB/s`;
    if (b > 1e6) return `${(b / 1e6).toFixed(1)} MB/s`;
    if (b > 1e3) return `${(b / 1e3).toFixed(1)} KB/s`;
    return `${b.toFixed(1)} B/s`;
  };
-  const fmtBps = (bps: number): string => {
+  if (!connected && !loading && !error) return null; // 无配置时静默，由 wrapper 处理
    if (!bps || bps === 0) return '—';
    if (bps > 1e9) return `${(bps / 1e9).toFixed(1)} GB/s`;
    if (bps > 1e6) return `${(bps / 1e6).toFixed(1)} MB/s`;
    if (bps > 1e3) return `${(bps / 1e3).toFixed(1)} KB/s`;
    return `${bps.toFixed(1)} B/s`;
  };
  const getAvailBadge = (avail: string) => {
    return avail === '1'
      ? <Badge className="text-[10px] bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><Wifi className="w-3 h-3 mr-1" />可用</Badge>
      : <Badge className="text-[10px] bg-red-500/20 text-red-400 border-red-500/30"><WifiOff className="w-3 h-3 mr-1" />不可用</Badge>;
  };
  const getPriorityColor = (count: number) => {
    if (count === 0) return '';
    if (count <= 2) return 'text-amber-400';
    return 'text-red-400';
  };
  return (
    <Card className="bg-[var(--dg-bg-secondary)] border-blue-500/20">
      <CardHeader className="py-3 px-4 pb-2">
        <div className="flex items-center gap-2">
          <Activity className="h-4 w-4 text-blue-400" />
-          <CardTitle className="text-sm font-medium text-[var(--dg-text-primary)]">Zabbix 主机监控</CardTitle>
+          <CardTitle className="text-sm font-medium">Zabbix 主机监控</CardTitle>
-          {version && <Badge className="text-[10px] bg-blue-500/10 text-blue-400 border-blue-500/30">v{version}</Badge>}
+          {version && <Badge className="text-[10px] bg-blue-500/10 text-blue-400">v{version}</Badge>}
-          {connected && (
+          {connected && <span className="text-[10px] text-[var(--dg-text-muted)] ml-2">{hosts.length} 台</span>}
-            <>
+          {connected && <div className="ml-auto flex gap-1"><Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refresh}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button></div>}
              <span className="text-[10px] text-[var(--dg-text-muted)] ml-2">{hosts.length} 台主机</span>
              <div className="ml-auto flex items-center gap-2">
                <Button variant="ghost" size="sm" className="h-6 px-2 text-[10px]" onClick={refreshData}><RefreshCw className="w-3 h-3 mr-1" />刷新</Button>
                <Button variant="ghost" size="sm" className="h-6 px-2 text-[10px] text-red-400" onClick={handleDisconnect}><X className="w-3 h-3 mr-1" />断开</Button>
              </div>
            </>
          )}
        </div>
      </CardHeader>
      <CardContent className="px-4 pb-3 pt-0">
-        {loading ? (
+        {loading ? (<div className="text-center py-12"><Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-blue-400" /><p className="text-xs text-[var(--dg-text-muted)]">连接中…</p></div>)
-          <div className="text-center py-12 text-[var(--dg-text-muted)]">
+        : error ? (<div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400 flex items-start gap-2"><AlertTriangle className="h-4 w-4 mt-0.5" /><span>{error}</span></div>)
-            <Loader2 className="h-6 w-6 mx-auto mb-2 animate-spin text-blue-400" />
+        : hosts.length === 0 ? (<div className="text-center py-8 text-[var(--dg-text-muted)]"><Server className="h-8 w-8 mx-auto mb-2 text-slate-600" /><p className="text-sm">未找到被监控的 Zabbix 主机</p></div>)
-            <p className="text-xs">正在连接 Zabbix...</p>
+        : (
          </div>
        ) : !connected ? (
          <div>
            {error && (
              <div className="mb-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400 flex items-start gap-2">
                <AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0" />
                <span>{error}</span>
              </div>
            )}
            {!showForm ? (
              <div className="text-center py-8 text-[var(--dg-text-muted)]">
                <Plug className="h-8 w-8 mx-auto mb-2 text-slate-600" />
                <p className="text-sm">接入 Zabbix 数据源以显示主机监控</p>
                <p className="text-xs mt-1 mb-4">支持 Zabbix 5.0 / 6.0 / 7.0</p>
                <div className="flex gap-2 justify-center">
                  <Button size="sm" variant="outline" onClick={() => setShowForm(true)}>
                    <Settings className="w-3 h-3 mr-1" />配置连接
                  </Button>
                </div>
              </div>
            ) : (
              <div className="max-w-md mx-auto p-4 space-y-3 rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)]">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium text-[var(--dg-text-primary)]">Zabbix 连接配置</span>
                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setShowForm(false)}><X className="w-3 h-3" /></Button>
                </div>
                <div>
                  <Label className="text-xs">API URL</Label>
                  <Input className="h-8 text-xs mt-1" placeholder="http://zabbix.example.com/api_jsonrpc.php"
                    value={url} onChange={e => setUrl(e.target.value)} />
                </div>
                <div>
                  <Label className="text-xs">用户名</Label>
                  <Input className="h-8 text-xs mt-1" placeholder="Admin" value={username}
                    onChange={e => setUsername(e.target.value)} />
                </div>
                <div>
                  <Label className="text-xs">密码</Label>
                  <Input className="h-8 text-xs mt-1" type="password" placeholder="••••••••" value={password}
                    onChange={e => setPassword(e.target.value)} />
                </div>
                <Button size="sm" className="w-full" onClick={handleConnect}>
                  <CheckCircle2 className="w-3 h-3 mr-1" />连接 Zabbix
                </Button>
              </div>
            )}
          </div>
        ) : hosts.length === 0 ? (
          <div className="text-center py-8 text-[var(--dg-text-muted)]">
            <Server className="h-8 w-8 mx-auto mb-2 text-slate-600" />
            <p className="text-sm">未找到被监控的 Zabbix 主机</p>
          </div>
        ) : (
          <div className="overflow-x-auto rounded-lg border border-[var(--dg-border)]">
            <table className="w-full text-xs">
-              <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]">
+              <thead className="bg-[var(--dg-bg-tertiary)] border-b border-[var(--dg-border)]"><tr>
                <tr>
                {[
-                    { field: 'hostname' as SortField, label: '主机名', w: '' },
+                  { f: 'hostname' as SortField, l: '主机名' },{ f: 'cpu_usage' as SortField, l: 'CPU' },{ f: 'memory_usage' as SortField, l: '内存' },
-                    { field: 'ip' as SortField, label: 'IP', w: '' },
+                  { f: 'disk_usage' as SortField, l: '磁盘' },{ f: 'load5' as SortField, l: 'Load5' },{ f: 'net_in_bps' as SortField, l: '流入' },
-                    { field: 'cpu_usage' as SortField, label: 'CPU', w: 'min-w-[90px]' },
+                  { f: 'net_out_bps' as SortField, l: '流出' },{ f: 'problem_count' as SortField, l: '问题' },{ f: 'uptime_days' as SortField, l: '运行' },
-                    { field: 'memory_usage' as SortField, label: '内存', w: 'min-w-[90px]' },
+                ].map(({ f, l }) => (
-                    { field: 'disk_usage' as SortField, label: '磁盘', w: 'min-w-[90px]' },
+                  <th key={f} className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] cursor-pointer hover:text-[var(--dg-text-primary)] select-none whitespace-nowrap" onClick={() => toggleSort(f)}>
-                    { field: 'load5' as SortField, label: 'Load5', w: '' },
+                    <div className="flex items-center gap-1">{l}<SI f={f} /></div></th>
-                    { field: 'net_in_bps' as SortField, label: '流入', w: '' },
+                ))}</tr></thead>
                    { field: 'net_out_bps' as SortField, label: '流出', w: '' },
                    { field: 'problem_count' as SortField, label: '问题', w: '' },
                    { field: 'uptime_days' as SortField, label: '运行', w: '' },
                  ].map(({ field, label, w }) => (
                    <th key={field}
                      className={`px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] cursor-pointer hover:text-[var(--dg-text-primary)] select-none whitespace-nowrap ${w}`}
                      onClick={() => toggleSort(field)}>
                      <div className="flex items-center gap-1">{label}<SortIcon field={field} /></div>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
-                {sortedHosts.map((host, i) => (
+                {sorted.map((h, i) => (
-                  <tr key={host.hostid || i} className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50 transition-colors">
+                  <tr key={h.hostid || i} className="border-b border-[var(--dg-border)] last:border-0 hover:bg-[var(--dg-bg-tertiary)]/50">
-                    <td className="px-3 py-2.5 whitespace-nowrap">
+                    <td className="px-3 py-2.5 whitespace-nowrap"><Badge className={`text-[10px] ${h.available === '1' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400'}`}><Wifi className="w-3 h-3 mr-1" />{h.available === '1' ? 'UP' : 'DOWN'}</Badge> <span className="font-medium text-[var(--dg-text-primary)] ml-1">{h.name || h.hostname}</span></td>
-                      <div className="flex items-center gap-1.5">
+                    <td className="px-3 py-2.5">{bar(Number(h.cpu_usage || 0), `${Number(h.cpu_usage || 0).toFixed(1)}%`)}</td>
-                        {getAvailBadge(host.available)}
+                    <td className="px-3 py-2.5">{bar(Number(h.memory_usage || 0), `${Number(h.memory_usage || 0).toFixed(1)}%`)}</td>
-                        <span className="font-medium text-[var(--dg-text-primary)]">{host.name || host.hostname}</span>
+                    <td className="px-3 py-2.5">{bar(Number(h.disk_usage || 0), `${Number(h.disk_usage || 0).toFixed(1)}%`)}</td>
-                      </div>
+                    <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.load5 > 0 ? h.load5.toFixed(1) : '—'}</td>
-                    </td>
+                    <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{fmtBps(h.net_in_bps)}</td>
-                    <td className="px-3 py-2.5 whitespace-nowrap font-mono text-[var(--dg-text-secondary)]">{host.ip || '—'}</td>
+                    <td className="px-3 py-2.5 font-mono text-[var(--dg-text-secondary)]">{fmtBps(h.net_out_bps)}</td>
-                    <td className="px-3 py-2.5">{usageBar(Number(host.cpu_usage || 0), `${Number(host.cpu_usage || 0).toFixed(1)}%`)}</td>
+                    <td className="px-3 py-2.5 text-center"><span className={`font-mono font-bold ${h.problem_count > 0 ? (h.problem_count > 2 ? 'text-red-400' : 'text-amber-400') : 'text-emerald-400'}`}>{h.problem_count > 0 ? <><AlertTriangle className="w-3 h-3 inline mr-1" />{h.problem_count}</> : '0'}</span></td>
-                    <td className="px-3 py-2.5">{usageBar(Number(host.memory_usage || 0), `${Number(host.memory_usage || 0).toFixed(1)}%`)}</td>
+                    <td className="px-3 py-2.5 text-[var(--dg-text-secondary)]">{h.uptime_days > 0 ? `${h.uptime_days}d` : '—'}</td>
                    <td className="px-3 py-2.5">{usageBar(Number(host.disk_usage || 0), `${Number(host.disk_usage || 0).toFixed(1)}%`)}</td>
                    <td className="px-3 py-2.5 whitespace-nowrap text-[var(--dg-text-secondary)]">{host.load5 > 0 ? host.load5.toFixed(1) : '—'}</td>
                    <td className="px-3 py-2.5 whitespace-nowrap font-mono text-[var(--dg-text-secondary)]">{fmtBps(host.net_in_bps)}</td>
                    <td className="px-3 py-2.5 whitespace-nowrap font-mono text-[var(--dg-text-secondary)]">{fmtBps(host.net_out_bps)}</td>
                    <td className="px-3 py-2.5 whitespace-nowrap text-center">
                      <span className={`font-mono font-bold ${getPriorityColor(host.problem_count)}`}>
                        {host.problem_count > 0
                          ? <span className="inline-flex items-center gap-1"><AlertTriangle className="w-3 h-3" />{host.problem_count}</span>
                          : <span className="text-emerald-400">0</span>}
                      </span>
                    </td>
                    <td className="px-3 py-2.5 whitespace-nowrap text-[var(--dg-text-secondary)]">
                      {host.uptime_days > 0 ? `${host.uptime_days}d` : '—'}
                    </td>
                  </tr>
                ))}
              </tbody>
@@ -499,6 +499,7 @@ export const agentApi = {
  createRule: (data: any) => http.post('/agent/rules', data),
  updateRule: (id: number, data: any) => http.put(`/agent/rules/${id}`, data),
  deleteRule: (id: number) => http.delete(`/agent/rules/${id}`),
  quickSetup: (type?: string) => http.post('/agent/rules/quick-setup', { type: type || 'ecs' }),
  listAlerts: (params?: Record<string, string>) => http.get('/agent/alerts', params),
  resolveAlert: (id: number) => http.post(`/agent/alerts/${id}/resolve`),
 };
@@ -646,6 +647,16 @@ export const alertCenterApi = {
  toggleRule: async (id: number | string) => {
    return http.post(`/alerts/rules/${id}/toggle`);
  },
  createRule: async (data: any) => {
    return http.post('/alerts/rules', data);
  },
  deleteRule: async (id: number | string) => {
    return http.delete(`/alerts/rules/${id}`);
  },
  // 一键报警 — 后端批量创建默认规则
  quickSetup: async (type: string = 'ecs') => {
    return http.post('/alerts/quick-setup', { type });
  },
 };
 // ==================== 站点拨测 API ====================