refactor: 标准化项目结构 frontend/ + backend/ + SQLite + run.sh

- 目录重构: app/ -> frontend/，与 backend/ 并列
- 数据库: 默认 SQLite（零配置），修复 DSN() bug
- run.sh: 一键启动前后端，支持 start/stop/restart/status
- Makefile: install/dev/build/lint/clean 快捷命令
- vite.config.ts: 配置 dev server 端口 5173 + API 代理到 8080
- config.yaml: SQLite 默认配置，开箱即用
- docs/: 完整开发文档（项目结构/API/数据库/规范/部署）
- 修复: GORM foreign key 关联声明
- 修复: go get gorm.io/driver/sqlite 依赖

frontend/src/components/monitor/AlertManager.tsx

@@ -0,0 +1,469 @@
+import { useState } 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 { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Bell,
+  Plus,
+  Search,
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  Clock,
+  Settings,
+  Mail,
+  MessageSquare,
+  Phone,
+  VolumeX,
+} from 'lucide-react';
+import { alertRules, alertEvents } from '@/mocks/data';
+import type { AlertEvent } from '@/types';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+
+export function AlertManager() {
+  const [activeTab, setActiveTab] = useState('events');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [severityFilter, setSeverityFilter] = useState<string>('all');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+
+  const filteredEvents = alertEvents.filter((event) => {
+    const matchesSearch =
+      event.ruleName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      event.target.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesSeverity = severityFilter === 'all' || event.severity === severityFilter;
+    const matchesStatus = statusFilter === 'all' || event.status === statusFilter;
+    return matchesSearch && matchesSeverity && matchesStatus;
+  });
+
+  const getSeverityBadge = (severity: AlertEvent['severity']) => {
+    switch (severity) {
+      case 'critical':
+        return (
+          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+            <AlertTriangle className="h-3 w-3 mr-1" />
+            严重
+          </Badge>
+        );
+      case 'warning':
+        return (
+          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+            <AlertTriangle className="h-3 w-3 mr-1" />
+            警告
+          </Badge>
+        );
+      case 'info':
+        return (
+          <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+            <Bell className="h-3 w-3 mr-1" />
+            提示
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  const getStatusBadge = (status: AlertEvent['status']) => {
+    switch (status) {
+      case 'firing':
+        return (
+          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10 animate-pulse">
+            触发中
+          </Badge>
+        );
+      case 'resolved':
+        return (
+          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+            已恢复
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  // 告警趋势数据
+  const alertTrendData = [
+    { time: '00:00', critical: 2, warning: 5, info: 8 },
+    { time: '04:00', critical: 1, warning: 3, info: 6 },
+    { time: '08:00', critical: 3, warning: 7, info: 12 },
+    { time: '12:00', critical: 5, warning: 10, info: 15 },
+    { time: '16:00', critical: 4, warning: 8, info: 10 },
+    { time: '20:00', critical: 3, warning: 6, info: 9 },
+    { time: '24:00', critical: 2, warning: 4, info: 7 },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-100">监控告警</h1>
+          <p className="text-sm text-slate-500 mt-1">告警规则管理与告警事件处理</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800">
+            <Settings className="h-4 w-4 mr-2" />
+            通知配置
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+            <Plus className="h-4 w-4 mr-2" />
+            新建规则
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">告警规则</p>
+                <p className="text-2xl font-bold text-slate-100">{alertRules.length}</p>
+              </div>
+              <div className="p-3 rounded-lg bg-blue-500/10 text-blue-400">
+                <Bell className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">触发中</p>
+                <p className="text-2xl font-bold text-red-400">
+                  {alertEvents.filter((e) => e.status === 'firing').length}
+                </p>
+              </div>
+              <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
+                <AlertTriangle className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">今日告警</p>
+                <p className="text-2xl font-bold text-amber-400">{alertEvents.length}</p>
+              </div>
+              <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
+                <Clock className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-slate-900 border-slate-800">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-slate-500">已恢复</p>
+                <p className="text-2xl font-bold text-emerald-400">
+                  {alertEvents.filter((e) => e.status === 'resolved').length}
+                </p>
+              </div>
+              <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
+                <CheckCircle className="h-5 w-5" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Alert Trend Chart */}
+      <Card className="bg-slate-900 border-slate-800">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-slate-100">告警趋势</CardTitle>
+          <CardDescription className="text-slate-500">过去24小时告警统计</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[200px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={alertTrendData}>
+                <defs>
+                  <linearGradient id="colorCritical" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#ef4444" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="#ef4444" stopOpacity={0} />
+                  </linearGradient>
+                  <linearGradient id="colorWarning" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#f59e0b" stopOpacity={0.3} />
+                    <stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                <XAxis dataKey="time" stroke="#475569" fontSize={12} />
+                <YAxis stroke="#475569" fontSize={12} />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: '#0f172a',
+                    border: '1px solid #1e293b',
+                    borderRadius: '6px',
+                    color: '#f8fafc',
+                  }}
+                />
+                <Area
+                  type="monotone"
+                  dataKey="critical"
+                  stroke="#ef4444"
+                  fillOpacity={1}
+                  fill="url(#colorCritical)"
+                  name="严重"
+                />
+                <Area
+                  type="monotone"
+                  dataKey="warning"
+                  stroke="#f59e0b"
+                  fillOpacity={1}
+                  fill="url(#colorWarning)"
+                  name="警告"
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="bg-slate-800 border border-slate-700">
+          <TabsTrigger value="events" className="data-[state=active]:bg-slate-700">
+            告警事件
+          </TabsTrigger>
+          <TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">
+            告警规则
+          </TabsTrigger>
+          <TabsTrigger value="silences" className="data-[state=active]:bg-slate-700">
+            静默规则
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="events" className="mt-4 space-y-4">
+          {/* Filters */}
+          <div className="flex items-center gap-3 flex-wrap">
+            <div className="relative w-64">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+              <Input
+                placeholder="搜索告警名称或目标..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500"
+              />
+            </div>
+            <select
+              value={severityFilter}
+              onChange={(e) => setSeverityFilter(e.target.value)}
+              className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+            >
+              <option value="all">全部级别</option>
+              <option value="critical">严重</option>
+              <option value="warning">警告</option>
+              <option value="info">提示</option>
+            </select>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className="h-9 px-3 rounded-md bg-slate-800/50 border border-slate-700 text-slate-200 text-sm"
+            >
+              <option value="all">全部状态</option>
+              <option value="firing">触发中</option>
+              <option value="resolved">已恢复</option>
+            </select>
+          </div>
+
+          {/* Events Table */}
+          <Card className="bg-slate-900 border-slate-800">
+            <CardContent className="p-0">
+              <div className="border-t border-slate-800">
+                <Table>
+                  <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>
+                      <TableHead className="text-slate-400">开始时间</TableHead>
+                      <TableHead className="text-slate-400 text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredEvents.map((event) => (
+                      <TableRow key={event.id} className="border-slate-800 hover:bg-slate-800/50">
+                        <TableCell>{getSeverityBadge(event.severity)}</TableCell>
+                        <TableCell>
+                          <span className="text-sm font-medium text-slate-200">{event.ruleName}</span>
+                        </TableCell>
+                        <TableCell>{getStatusBadge(event.status)}</TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-300">{event.target}</span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-300">{event.value}</span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-500">{event.threshold}</span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-400">
+                            {new Date(event.startedAt).toLocaleString()}
+                          </span>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex items-center justify-end gap-1">
+                            {event.status === 'firing' && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 text-slate-400 hover:text-emerald-400"
+                              >
+                                <CheckCircle className="h-4 w-4 mr-1" />
+                                确认
+                              </Button>
+                            )}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="rules" className="mt-4">
+          <Card className="bg-slate-900 border-slate-800">
+            <CardContent className="p-0">
+              <div className="border-t border-slate-800">
+                <Table>
+                  <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>
+                      <TableHead className="text-slate-400">状态</TableHead>
+                      <TableHead className="text-slate-400 text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {alertRules.map((rule) => (
+                      <TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
+                        <TableCell>
+                          <div>
+                            <span className="text-sm font-medium text-slate-200">{rule.name}</span>
+                            <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}
+                          </code>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-300">
+                            {rule.operator} {rule.threshold}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          {rule.severity === 'critical' ? (
+                            <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+                              严重
+                            </Badge>
+                          ) : rule.severity === 'warning' ? (
+                            <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+                              警告
+                            </Badge>
+                          ) : (
+                            <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+                              提示
+                            </Badge>
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-slate-300">{rule.duration / 60}分钟</span>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-1">
+                            {rule.notifyChannels.includes('email') && (
+                              <Mail className="h-4 w-4 text-slate-400" />
+                            )}
+                            {rule.notifyChannels.includes('sms') && (
+                              <Phone className="h-4 w-4 text-slate-400" />
+                            )}
+                            {rule.notifyChannels.includes('dingtalk') && (
+                              <MessageSquare className="h-4 w-4 text-slate-400" />
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Switch checked={rule.enabled} className="data-[state=checked]:bg-blue-600" />
+                        </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">
+                              <Settings className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="silences" className="mt-4">
+          <Card className="bg-slate-900 border-slate-800">
+            <CardContent className="p-8">
+              <div className="text-center">
+                <VolumeX className="h-12 w-12 mx-auto text-slate-500 mb-4" />
+                <h3 className="text-lg font-medium text-slate-300 mb-2">暂无静默规则</h3>
+                <p className="text-sm text-slate-500 mb-4">创建静默规则以临时抑制告警通知</p>
+                <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+                  <Plus className="h-4 w-4 mr-2" />
+                  创建静默规则
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}