refactor: 全局代码模块化重构 — 所有文件<700行

后端 handler 拆分: - automation.go(1067→4文件), server.go(1011→5文件), ldap.go(815→3文件), user.go(704→2文件) 前端组件拆分: - SystemManager(1782→569), AlertManager(1133→220), K8sClusters(1062→4文件) - Dashboard(941→4文件), ServerManager(905→640), ApprovalFlow(830→548) - AlertCenter(775→693), AIPredictiveAnalytics(760→670) - CloudBilling(728→663), GrafanaDashboard(717→643), sidebar(726→689) Mock 数据模块化: - mocks/data.ts(2552行→barrel+11个domain模块) 新增 CLAUDE.md 项目全局开发规范修复: AlertCenter/LogManager ListResponse.data→.list 类型不匹配验证: go build ✅ + tsc --noEmit ✅ + npm run build ✅
2026-06-15 01:32:15 +08:00
1 parent e8dbe65955
commit 73b5a48df9
@@ -0,0 +1,145 @@
+import {
+  Check, ChevronRight, AlertCircle, AlertTriangle, Info,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from '@/components/ui/dialog';
+import type { Alert } from './AlertCenter';
+
+function getSeverityBadge(severity: string) {
+  switch (severity) {
+    case 'critical':
+      return <Badge variant="destructive" className="gap-1"><AlertCircle className="w-3 h-3" />严重</Badge>;
+    case 'warning':
+      return <Badge variant="default" className="bg-orange-500 gap-1"><AlertTriangle className="w-3 h-3" />警告</Badge>;
+    case 'info':
+      return <Badge variant="default" className="bg-blue-500 gap-1"><Info className="w-3 h-3" />信息</Badge>;
+    default:
+      return <Badge variant="secondary">未知</Badge>;
+  }
+}
+
+export function AlertDetailDialog({
+  alert,
+  open,
+  onOpenChange,
+  onAcknowledge,
+}: {
+  alert: Alert | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAcknowledge: (id: string) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {alert?.title}
+            {alert && getSeverityBadge(alert.severity)}
+          </DialogTitle>
+        </DialogHeader>
+        {alert && (
+          <div className="space-y-4">
+            <div>
+              <Label className="text-muted-foreground">描述</Label>
+              <p className="mt-1">{alert.description}</p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label className="text-muted-foreground">来源</Label>
+                <p className="font-medium">{alert.source}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">服务</Label>
+                <p className="font-medium">{alert.service}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">指标</Label>
+                <p className="font-medium">{alert.metric}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">当前值 / 阈值</Label>
+                <p className="font-medium">{alert.value} / {alert.threshold}</p>
+              </div>
+              <div>
+                <Label className="text-muted-foreground">开始时间</Label>
+                <p className="font-medium">{alert.startedAt}</p>
+              </div>
+              {alert.resolvedAt && (
+                <div>
+                  <Label className="text-muted-foreground">解决时间</Label>
+                  <p className="font-medium">{alert.resolvedAt}</p>
+                </div>
+              )}
+            </div>
+            <div>
+              <Label className="text-muted-foreground">标签</Label>
+              <div className="flex flex-wrap gap-2 mt-1">
+                {Object.entries(alert.labels).map(([k, v]) => (
+                  <Badge key={k} variant="outline">{k}={v}</Badge>
+                ))}
+              </div>
+            </div>
+            {alert.runbookUrl && (
+              <div>
+                <Label className="text-muted-foreground">处理手册</Label>
+                <a href={alert.runbookUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline block mt-1">
+                  查看处理手册 →
+                </a>
+              </div>
+            )}
+          </div>
+        )}
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>关闭</Button>
+          {alert?.status === 'firing' && (
+            <Button onClick={() => { onAcknowledge(alert.id); onOpenChange(false); }}>
+              <Check className="w-4 h-4 mr-2" />
+              确认告警
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function AlertSilenceDialog({
+  alert,
+  open,
+  onOpenChange,
+  onSilence,
+}: {
+  alert: Alert | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSilence: (id: string, duration: string) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>静默告警</DialogTitle>
+          <DialogDescription>选择静默持续时间</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2">
+          {['1h', '4h', '8h', '24h', '7d'].map((duration) => (
+            <Button
+              key={duration}
+              variant="outline"
+              className="w-full justify-between"
+              onClick={() => alert && onSilence(alert.id, duration)}
+            >
+              <span>静默 {duration}</span>
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}