fix: 飞书告警改用交互卡片展示 + 通知渠道与联系人合并为通知管理Tab

- 飞书: sendFeishuCard 改用 msg_type=interactive 卡片格式(header+template+fields+note)
- 飞书: splitLines 处理 \n 转义 → 卡片字段逐行渲染 lark_md
- 飞书: header.template 按级别着色(red/orange/green/blue)
- 飞书: 测试通知改为卡片格式: 测试时间/来源/状态
- UI: 合并通知渠道+报警联系人为一个「通知管理」Tab(4列Tab栏)
- UI: 通知管理下分【渠道配置】+【报警联系人】两个区域

backend/internal/api/handlers/alert_channels.go

@@ -10,6 +10,7 @@ import (
 	"io"
 	"net/http"
 	"strconv"
+	"strings"
 	"time"
 
 	"ezops/internal/models"
@@ -236,7 +237,7 @@ func sendFeishuTest(configJSON string) error {
 	}
 
 	title := "✅ AIOps 告警测试通知"
-	content := fmt.Sprintf("通知渠道连通性测试成功\\n测试时间：%s\\n来源：AIOps 智能运维平台", time.Now().Format("2006-01-02 15:04:05"))
+	content := fmt.Sprintf("**测试时间**：%s\\n**来源**：AIOps 智能运维平台\\n**状态**：连通性测试成功 🎉", time.Now().Format("2006-01-02 15:04:05"))
 
 	return sendFeishuCard(cfg.URL, cfg.Secret, title, content, "green")
 }
@@ -283,16 +284,70 @@ func sendFeishuRecovery(configJSON, title, content string) error {
 	return sendFeishuCard(cfg.URL, cfg.Secret, title, content, "green")
 }
 
-// sendFeishuCard 发送飞书消息（优先使用卡片格式，出错回退到文本）
+// sendFeishuCard 发送飞书交互卡片消息
 func sendFeishuCard(webhookURL, secret, title, content, color string) error {
-	// 先尝试文本格式（最可靠）
+	// 解析 content 中的字段（格式: 多行 key: value）
-	textMsg := map[string]interface{}{
+	lines := splitLines(content)
-		"msg_type": "text",
+	var fields []map[string]interface{}
-		"content": map[string]interface{}{
+	for _, line := range lines {
-			"text": title + "\n\n" + content,
+		line = strings.TrimSpace(line)
+		if line == "" {
+			continue
+		}
+		fields = append(fields, map[string]interface{}{
+			"is_short": false,
+			"text": map[string]interface{}{
+				"tag":     "lark_md",
+				"content": line,
+			},
+		})
+	}
+
+	template := color
+	if template == "red" {
+		template = "red"
+	} else if template == "orange" || template == "warning" {
+		template = "orange"
+	} else if template == "green" {
+		template = "green"
+	} else if template == "blue" || template == "info" {
+		template = "blue"
+	} else {
+		template = "red"
+	}
+
+	card := map[string]interface{}{
+		"msg_type": "interactive",
+		"card": map[string]interface{}{
+			"header": map[string]interface{}{
+				"title": map[string]interface{}{
+					"tag":     "plain_text",
+					"content": title,
+				},
+				"template": template,
+			},
+			"elements": []map[string]interface{}{
+				{
+					"tag":    "div",
+					"fields": fields,
+				},
+				{
+					"tag": "hr",
+				},
+				{
+					"tag": "note",
+					"elements": []map[string]interface{}{
+						{
+							"tag":     "plain_text",
+							"content": fmt.Sprintf("⏰ %s ｜ AIOps 智能运维平台", time.Now().Format("2006-01-02 15:04:05")),
+						},
+					},
+				},
+			},
 		},
 	}
-	body, _ := json.Marshal(textMsg)
+
+	body, _ := json.Marshal(card)
 
 	req, err := http.NewRequest("POST", webhookURL, bytes.NewReader(body))
 	if err != nil {
@@ -300,7 +355,7 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
 	}
 	req.Header.Set("Content-Type", "application/json")
 
-	// 如果有 secret，生成签名
+	// 如果有 secret，追加签名到 URL query
 	if secret != "" {
 		timestamp := time.Now().Unix()
 		sign := genFeishuSign(timestamp, secret)
@@ -322,7 +377,6 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
 		return fmt.Errorf("飞书返回错误 (HTTP %d): %s", resp.StatusCode, string(respBody))
 	}
 
-	// 检查飞书业务返回码
 	var result struct {
 		Code int    `json:"code"`
 		Msg  string `json:"msg"`
@@ -335,6 +389,13 @@ func sendFeishuCard(webhookURL, secret, title, content, color string) error {
 	return nil
 }
 
+// splitLines splits a string by newlines, handling both actual \n and escaped \\n
+func splitLines(s string) []string {
+	// First replace literal \n (from Go format strings) with actual newlines
+	s = strings.ReplaceAll(s, "\\n", "\n")
+	return strings.Split(s, "\n")
+}
+
 // buildFeishuCard 构建飞书卡片消息体（保留备用，当前使用文本格式）
 func buildFeishuCard(title, content, color string) models.FeishuCardMessage {
 	return models.FeishuCardMessage{

frontend/src/components/monitor/alert-center/AlertCenter.tsx

@@ -262,11 +262,10 @@ const AlertCenter: React.FC = () => {
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList className="grid w-full grid-cols-5 lg:w-[600px] h-9">
+        <TabsList className="grid w-full grid-cols-4 lg:w-[480px] h-9">
           <TabsTrigger value="alerts" className="text-xs">告警列表</TabsTrigger>
           <TabsTrigger value="rules" className="text-xs">告警规则</TabsTrigger>
-          <TabsTrigger value="channels" className="text-xs">通知渠道</TabsTrigger>
+          <TabsTrigger value="contacts" className="text-xs">通知管理</TabsTrigger>
-          <TabsTrigger value="contacts" className="text-xs">报警联系人</TabsTrigger>
           <TabsTrigger value="groups" className="text-xs">报警联系组</TabsTrigger>
         </TabsList>
 
@@ -502,62 +501,59 @@ const AlertCenter: React.FC = () => {
           )}
         </TabsContent>
 
-        {/* 通知渠道 Tab — 自包含子组件 */}
+        {/* 通知管理 Tab — 渠道 + 联系人合并 */}
-        <TabsContent value="channels">
-          <AlertChannelsTab refreshKey={0} />
-        </TabsContent>
-
-        {/* 报警联系人 Tab */}
         <TabsContent value="contacts" className="space-y-4">
-          <div className="flex justify-between items-center">
+          <AlertChannelsTab refreshKey={0} />
-            <Button variant="outline" onClick={fetchContacts}>
+          <div className="border-t border-border pt-4 mt-1">
-              <RefreshCw className="w-4 h-4 mr-2" />
+            <div className="flex justify-between items-center mb-3">
-              刷新
+              <h3 className="text-sm font-medium">报警联系人</h3>
-            </Button>
+              <Button size="sm" onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
-            <Button onClick={() => { setEditingContact(null); setContactDialogOpen(true); }}>
+                <Plus className="w-4 h-4 mr-1" />
-              <Plus className="w-4 h-4 mr-2" />
+                添加联系人
-              添加联系人
+              </Button>
-            </Button>
+            </div>
+            {contacts.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground border border-dashed rounded-lg text-xs">
+                暂无报警联系人，点击「添加联系人」创建
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                {contacts.map((c) => (
+                  <Card key={c.id} className="hover:border-primary/50 transition-colors">
+                    <CardHeader className="pb-2">
+                      <div className="flex items-start justify-between">
+                        <CardTitle className="text-sm">{c.name}</CardTitle>
+                      </div>
+                    </CardHeader>
+                    <CardContent className="pt-0 space-y-1 text-xs text-muted-foreground">
+                      {c.phone && <div>📱 {c.phone}</div>}
+                      {c.email && <div>📧 {c.email}</div>}
+                      <div className="flex gap-1 flex-wrap">
+                        {c.dingtalk && <Badge variant="outline" className="text-[10px]">钉钉</Badge>}
+                        {c.feishu && <Badge variant="outline" className="text-[10px]">飞书</Badge>}
+                        {c.wechat && <Badge variant="outline" className="text-[10px]">企微</Badge>}
+                      </div>
+                      <div className="flex gap-1.5 pt-1.5">
+                        <Button variant="outline" size="sm" className="h-7 text-xs flex-1"
+                          onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
+                          编辑
+                        </Button>
+                        <Button variant="outline" size="sm" className="h-7 text-xs"
+                          onClick={async () => {
+                            const ok = await _confirm({ title: '删除联系人', description: `确定删除「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
+                            if (!ok) return;
+                            try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
+                            catch { toast.error('删除失败'); }
+                          }}>
+                          删除
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            )}
           </div>
-          {contacts.length === 0 ? (
-            <div className="text-center py-16 text-muted-foreground border border-dashed rounded-lg">
-              暂无报警联系人，点击「添加联系人」创建
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-              {contacts.map((c) => (
-                <Card key={c.id} className="hover:border-primary/50 transition-colors">
-                  <CardHeader>
-                    <div className="flex items-start justify-between">
-                      <CardTitle className="text-base">{c.name}</CardTitle>
-                    </div>
-                  </CardHeader>
-                  <CardContent className="pt-0 space-y-1 text-sm text-muted-foreground">
-                    {c.phone && <div>📱 {c.phone}</div>}
-                    {c.email && <div>📧 {c.email}</div>}
-                    {c.dingtalk && <div>🔷 钉钉已配置</div>}
-                    {c.feishu && <div>🟢 飞书已配置</div>}
-                    {c.wechat && <div>💚 企业微信已配置</div>}
-                    <div className="flex gap-2 pt-2">
-                      <Button variant="outline" size="sm" className="flex-1"
-                        onClick={() => { setEditingContact(c); setContactDialogOpen(true); }}>
-                        编辑
-                      </Button>
-                      <Button variant="outline" size="sm"
-                        onClick={async () => {
-                          const ok = await _confirm({ title: '删除联系人', description: `确定删除联系人「${c.name}」？`, confirmText: '删除', variant: 'destructive' });
-                          if (!ok) return;
-                          try { await alertApi.deleteContact(c.id); toast.success('已删除'); fetchContacts(); }
-                          catch { toast.error('删除失败'); }
-                        }}>
-                        删除
-                      </Button>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
         </TabsContent>
 
         {/* 报警联系组 Tab */}