feat: 完善告警规则配置页面 — 增删改查弹窗 + 修复白屏bug + UpdateRule notify_channels序列化修复

- AlertManager: 新建/编辑告警规则弹窗(规则名称/描述/类型/数据源/表达式/级别/持续时间/通知渠道Switch)
- AlertManager: 修复白屏bug — getRules返回{list,total}未解包导致rules.map崩溃(Frontend Pitfall #1)
- AlertManager: 修复规则列表字段显示 — 原引用不存在的rule.metric/operator/threshold字段,改为rule.source/expression
- AlertManager: 新增规则删除按钮(带确认)
- alert.go: 修复UpdateRule notify_channels序列化bug — 原直接赋值[]string到text列导致500,改用toJSON()
- 同步提交前序未提交改动(WebShell/K8s/Server/Login等组件改进)

frontend/src/components/monitor/AlertManager.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -34,6 +36,7 @@ import {
   MessageSquare,
   Phone,
   VolumeX,
+  Trash2,
   Loader2,
 } from 'lucide-react';
 import { alertApi } from '@/services/api';
@@ -48,17 +51,23 @@ import {
 } from 'recharts';
 
 function hasChannel(notifyChannels: any, channel: string): boolean {
-  if (!notifyChannels) return false;
-  if (Array.isArray(notifyChannels)) return notifyChannels.includes(channel);
+  return parseChannels(notifyChannels).includes(channel);
+}
+
+// 将 notify_channels (可能是数组/JSON字符串/逗号分隔) 解析为数组
+function parseChannels(notifyChannels: any): string[] {
+  if (!notifyChannels) return [];
+  if (Array.isArray(notifyChannels)) return notifyChannels;
   if (typeof notifyChannels === 'string') {
     try {
       const parsed = JSON.parse(notifyChannels);
-      return Array.isArray(parsed) ? parsed.includes(channel) : notifyChannels.includes(channel);
+      if (Array.isArray(parsed)) return parsed;
     } catch {
-      return notifyChannels.includes(channel);
+      // 非JSON，尝试逗号分隔
     }
+    return notifyChannels.split(',').map((s) => s.trim()).filter(Boolean);
   }
-  return false;
+  return [];
 }
 
 export function AlertManager() {
@@ -70,6 +79,103 @@ export function AlertManager() {
   const [rules, setRules] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
 
+  // 告警规则弹窗状态
+  const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
+  const [editingRule, setEditingRule] = useState<any>(null);
+  const [ruleSaving, setRuleSaving] = useState(false);
+  const [ruleForm, setRuleForm] = useState({
+    name: '',
+    description: '',
+    type: 'metric',
+    source: 'prometheus',
+    expression: '',
+    severity: 'warning',
+    duration: 300,
+    notify_channels: [] as string[],
+  });
+
+  const resetRuleForm = () => {
+    setRuleForm({
+      name: '',
+      description: '',
+      type: 'metric',
+      source: 'prometheus',
+      expression: '',
+      severity: 'warning',
+      duration: 300,
+      notify_channels: [],
+    });
+    setEditingRule(null);
+  };
+
+  const openCreateRule = () => {
+    resetRuleForm();
+    setRuleDialogOpen(true);
+  };
+
+  const openEditRule = (rule: any) => {
+    setEditingRule(rule);
+    setRuleForm({
+      name: rule.name || '',
+      description: rule.description || '',
+      type: rule.type || 'metric',
+      source: rule.source || 'prometheus',
+      expression: rule.expression || '',
+      severity: rule.severity || 'warning',
+      duration: rule.duration || 300,
+      notify_channels: parseChannels(rule.notify_channels),
+    });
+    setRuleDialogOpen(true);
+  };
+
+  const handleDeleteRule = async (id: any) => {
+    if (!window.confirm('确定删除此告警规则？')) return;
+    try {
+      await alertApi.deleteRule(id);
+      loadData();
+    } catch (error) {
+      console.error('Failed to delete rule:', error);
+    }
+  };
+
+  const handleSaveRule = async () => {
+    if (!ruleForm.name.trim() || !ruleForm.expression.trim()) return;
+    setRuleSaving(true);
+    try {
+      const payload = {
+        name: ruleForm.name.trim(),
+        description: ruleForm.description.trim(),
+        type: ruleForm.type,
+        source: ruleForm.source,
+        expression: ruleForm.expression.trim(),
+        severity: ruleForm.severity,
+        duration: Number(ruleForm.duration) || 0,
+        notify_channels: ruleForm.notify_channels,
+      };
+      if (editingRule) {
+        await alertApi.updateRule(editingRule.id, payload);
+      } else {
+        await alertApi.createRule(payload);
+      }
+      setRuleDialogOpen(false);
+      resetRuleForm();
+      loadData();
+    } catch (error) {
+      console.error('Failed to save rule:', error);
+    } finally {
+      setRuleSaving(false);
+    }
+  };
+
+  const toggleNotifyChannel = (channel: string) => {
+    setRuleForm((prev) => ({
+      ...prev,
+      notify_channels: prev.notify_channels.includes(channel)
+        ? prev.notify_channels.filter((c) => c !== channel)
+        : [...prev.notify_channels, channel],
+    }));
+  };
+
   const loadData = async () => {
     try {
       setLoading(true);
@@ -78,7 +184,7 @@ export function AlertManager() {
         alertApi.getRules(),
       ]);
       setAlerts((alertsData as any)?.list || []);
-      setRules(rulesData || []);
+      setRules((rulesData as any)?.list || (Array.isArray(rulesData) ? rulesData : []));
     } catch (error) {
       console.error('Failed to load alert data:', error);
     } finally {
@@ -188,7 +294,7 @@ export function AlertManager() {
             <Settings className="h-4 w-4 mr-2" />
             通知配置
           </Button>
-          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+          <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={openCreateRule}>
             <Plus className="h-4 w-4 mr-2" />
             新建规则
           </Button>
@@ -435,7 +541,7 @@ export function AlertManager() {
                   <TableHeader>
                     <TableRow className="border-slate-800 hover:bg-transparent">
                       <TableHead className="text-slate-400">规则名称</TableHead>
-                      <TableHead className="text-slate-400">监控指标</TableHead>
+                      <TableHead className="text-slate-400">数据源</TableHead>
                       <TableHead className="text-slate-400">触发条件</TableHead>
                       <TableHead className="text-slate-400">级别</TableHead>
                       <TableHead className="text-slate-400">持续时间</TableHead>
@@ -450,18 +556,20 @@ export function AlertManager() {
                         <TableCell>
                           <div>
                             <span className="text-sm font-medium text-slate-200">{rule.name}</span>
-                            <p className="text-xs text-slate-500">{rule.description}</p>
+                            {rule.description && (
+                              <p className="text-xs text-slate-500">{rule.description}</p>
+                            )}
                           </div>
                         </TableCell>
                         <TableCell>
                           <code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
-                            {rule.metric}
+                            {rule.source || '--'}
                           </code>
                         </TableCell>
                         <TableCell>
-                          <span className="text-sm text-slate-300">
-                            {rule.operator} {rule.threshold}
-                          </span>
+                          <code className="text-xs text-blue-300">
+                            {rule.expression || '--'}
+                          </code>
                         </TableCell>
                         <TableCell>
                           {rule.severity === 'critical' ? (
@@ -503,9 +611,22 @@ export function AlertManager() {
                         </TableCell>
                         <TableCell className="text-right">
                           <div className="flex items-center justify-end gap-1">
-                            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 text-slate-400 hover:text-slate-100"
+                              onClick={() => openEditRule(rule)}
+                            >
                               <Settings className="h-4 w-4" />
                             </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 text-slate-400 hover:text-red-400"
+                              onClick={() => handleDeleteRule(rule.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
                           </div>
                         </TableCell>
                       </TableRow>
@@ -533,6 +654,147 @@ export function AlertManager() {
           </Card>
         </TabsContent>
       </Tabs>
+
+      {/* 告警规则 创建/编辑弹窗 */}
+      <Dialog open={ruleDialogOpen} onOpenChange={(open) => { setRuleDialogOpen(open); if (!open) resetRuleForm(); }}>
+        <DialogContent className="bg-slate-900 border-slate-700 text-slate-100 max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-slate-100">
+              {editingRule ? '编辑告警规则' : '新建告警规则'}
+            </DialogTitle>
+            <DialogDescription className="text-slate-500">
+              {editingRule ? '修改告警规则的触发条件和通知方式' : '配置监控指标的告警触发条件'}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
+            <div className="space-y-1.5">
+              <Label className="text-slate-300">规则名称 <span className="text-red-400">*</span></Label>
+              <Input
+                value={ruleForm.name}
+                onChange={(e) => setRuleForm({ ...ruleForm, name: e.target.value })}
+                placeholder="如：CPU 使用率告警"
+                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-slate-300">描述</Label>
+              <Textarea
+                value={ruleForm.description}
+                onChange={(e) => setRuleForm({ ...ruleForm, description: e.target.value })}
+                placeholder="规则说明"
+                rows={2}
+                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 resize-none"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-slate-300">规则类型</Label>
+                <select
+                  value={ruleForm.type}
+                  onChange={(e) => setRuleForm({ ...ruleForm, type: e.target.value })}
+                  className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                >
+                  <option value="metric">指标监控</option>
+                  <option value="log">日志告警</option>
+                  <option value="event">事件告警</option>
+                </select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-slate-300">数据源</Label>
+                <select
+                  value={ruleForm.source}
+                  onChange={(e) => setRuleForm({ ...ruleForm, source: e.target.value })}
+                  className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                >
+                  <option value="prometheus">Prometheus</option>
+                  <option value="zabbix">Zabbix</option>
+                  <option value="custom">自定义</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-slate-300">触发表达式 <span className="text-red-400">*</span></Label>
+              <Input
+                value={ruleForm.expression}
+                onChange={(e) => setRuleForm({ ...ruleForm, expression: e.target.value })}
+                placeholder="如：cpu_usage > 80"
+                className="bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-600 font-mono text-sm"
+              />
+              <p className="text-xs text-slate-600">PromQL 或指标表达式，例如 cpu_usage &gt; 80</p>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-slate-300">告警级别</Label>
+                <select
+                  value={ruleForm.severity}
+                  onChange={(e) => setRuleForm({ ...ruleForm, severity: e.target.value })}
+                  className="w-full h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+                >
+                  <option value="info">提示</option>
+                  <option value="warning">警告</option>
+                  <option value="critical">严重</option>
+                </select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-slate-300">持续时间（秒）</Label>
+                <Input
+                  type="number"
+                  value={ruleForm.duration}
+                  onChange={(e) => setRuleForm({ ...ruleForm, duration: Number(e.target.value) })}
+                  className="bg-slate-800/50 border-slate-700 text-slate-200"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-slate-300">通知渠道</Label>
+              <div className="flex items-center gap-4 pt-1">
+                {[
+                  { key: 'email', label: '邮件', icon: Mail },
+                  { key: 'sms', label: '短信', icon: Phone },
+                  { key: 'dingtalk', label: '钉钉', icon: MessageSquare },
+                ].map(({ key, label, icon: Icon }) => (
+                  <label
+                    key={key}
+                    className="flex items-center gap-2 cursor-pointer select-none text-sm text-slate-300"
+                  >
+                    <Switch
+                      checked={ruleForm.notify_channels.includes(key)}
+                      onCheckedChange={() => toggleNotifyChannel(key)}
+                      className="data-[state=checked]:bg-blue-600"
+                    />
+                    <Icon className="h-4 w-4 text-slate-400" />
+                    {label}
+                  </label>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              className="border-slate-700 text-slate-300 hover:bg-slate-800"
+              onClick={() => { setRuleDialogOpen(false); resetRuleForm(); }}
+            >
+              取消
+            </Button>
+            <Button
+              className="bg-blue-600 hover:bg-blue-700 text-white"
+              disabled={!ruleForm.name.trim() || !ruleForm.expression.trim() || ruleSaving}
+              onClick={handleSaveRule}
+            >
+              {ruleSaving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              {editingRule ? '保存修改' : '创建规则'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }