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/dashboard/Dashboard.tsx

@@ -0,0 +1,881 @@
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import {
+  Server,
+  Cloud,
+  Bell,
+  Rocket,
+  TrendingUp,
+  TrendingDown,
+  AlertTriangle,
+  CheckCircle,
+  Clock,
+  Activity,
+  Cpu,
+  HardDrive,
+  ArrowRight,
+  DollarSign,
+  Shield,
+  MemoryStick,
+  Database,
+} from 'lucide-react';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+} from 'recharts';
+import { dashboardData, servers, k8sClusters, alertEvents, appReleases, domains, generateMetricsData } from '@/mocks/data';
+import type { DashboardData } from '@/types';
+
+// 统计卡片组件
+function StatCard({
+  title,
+  value,
+  description,
+  icon: Icon,
+  trend,
+  trendValue,
+  color,
+  onClick,
+}: {
+  title: string;
+  value: string | number;
+  description?: string;
+  icon: React.ElementType;
+  trend?: 'up' | 'down' | 'neutral';
+  trendValue?: string;
+  color: string;
+  onClick?: () => void;
+}) {
+  const colorClasses: Record<string, { bg: string; text: string }> = {
+    blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
+    emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
+    amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
+    rose: { bg: 'bg-rose-500/10', text: 'text-rose-400' },
+    purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
+    cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
+    orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
+  };
+  const colors = colorClasses[color];
+
+  return (
+    <Card
+      className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-all cursor-pointer"
+      onClick={onClick}
+    >
+      <CardContent className="p-6">
+        <div className="flex items-start justify-between">
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-slate-400">{title}</p>
+            <div className="flex items-baseline gap-2">
+              <h3 className="text-2xl font-bold text-slate-100">{value}</h3>
+              {trend && trendValue && (
+                <span
+                  className={`flex items-center text-xs font-medium ${
+                    trend === 'up' ? 'text-emerald-400' : trend === 'down' ? 'text-red-400' : 'text-slate-400'
+                  }`}
+                >
+                  {trend === 'up' ? (
+                    <TrendingUp className="h-3 w-3 mr-0.5" />
+                  ) : trend === 'down' ? (
+                    <TrendingDown className="h-3 w-3 mr-0.5" />
+                  ) : null}
+                  {trendValue}
+                </span>
+              )}
+            </div>
+            {description && <p className="text-xs text-slate-500">{description}</p>}
+          </div>
+          <div className={`p-3 rounded-lg ${colors.bg} ${colors.text}`}>
+            <Icon className="h-5 w-5" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 成本费用卡片
+function CostOverviewCard() {
+  const costData = [
+    { name: '阿里云', value: 28500, color: '#ff6a00' },
+    { name: 'AWS', value: 42000, color: '#ff9900' },
+    { name: '腾讯云', value: 15800, color: '#006eff' },
+    { name: '华为云', value: 8900, color: '#ff0000' },
+    { name: 'Azure', value: 12500, color: '#0078d4' },
+  ];
+
+  const monthlyData = [
+    { month: '1月', cost: 85000 },
+    { month: '2月', cost: 92000 },
+    { month: '3月', cost: 88000 },
+    { month: '4月', cost: 95000 },
+    { month: '5月', cost: 107700 },
+  ];
+
+  const totalCost = costData.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">云成本概览</CardTitle>
+            <CardDescription className="text-slate-500">本月各云平台费用支出</CardDescription>
+          </div>
+          <div className="text-right">
+            <p className="text-2xl font-bold text-slate-100">¥{totalCost.toLocaleString()}</p>
+            <p className="text-xs text-emerald-400">+12.5% 较上月</p>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm text-slate-400 mb-2">费用分布</p>
+            <div className="h-[180px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={costData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={40}
+                    outerRadius={70}
+                    paddingAngle={2}
+                    dataKey="value"
+                  >
+                    {costData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#0f172a',
+                      border: '1px solid #1e293b',
+                      borderRadius: '6px',
+                      color: '#f8fafc',
+                    }}
+                    formatter={(value: number) => `¥${value.toLocaleString()}`}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <div>
+            <p className="text-sm text-slate-400 mb-2">月度趋势</p>
+            <div className="h-[180px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                  <XAxis dataKey="month" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
+                  <YAxis stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: '#0f172a',
+                      border: '1px solid #1e293b',
+                      borderRadius: '6px',
+                      color: '#f8fafc',
+                    }}
+                    formatter={(value: number) => `¥${value.toLocaleString()}`}
+                  />
+                  <Bar dataKey="cost" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+        </div>
+        <div className="mt-4 space-y-2">
+          {costData.map((item) => (
+            <div key={item.name} className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
+                <span className="text-sm text-slate-300">{item.name}</span>
+              </div>
+              <span className="text-sm font-medium text-slate-100">¥{item.value.toLocaleString()}</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 告警消息卡片
+function AlertMessagesCard() {
+  const recentAlerts = alertEvents.filter(a => a.status === 'firing').slice(0, 8);
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">告警消息</CardTitle>
+            <CardDescription className="text-slate-500">最近触发的告警事件</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
+            查看全部
+            <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[320px]">
+          <div className="space-y-2">
+            {recentAlerts.map((alert) => (
+              <div
+                key={alert.id}
+                className="flex items-start gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
+              >
+                <div className={`w-2 h-2 rounded-full mt-1.5 ${
+                  alert.severity === 'critical' ? 'bg-red-400' : 
+                  alert.severity === 'warning' ? 'bg-amber-400' : 'bg-blue-400'
+                }`} />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-slate-200 truncate">{alert.ruleName}</span>
+                    <Badge
+                      variant="outline"
+                      className={`text-xs ${
+                        alert.severity === 'critical'
+                          ? 'border-red-500/30 text-red-400 bg-red-500/10'
+                          : alert.severity === 'warning'
+                          ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
+                          : 'border-blue-500/30 text-blue-400 bg-blue-500/10'
+                      }`}
+                    >
+                      {alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-slate-500 mt-1">{alert.target}</p>
+                  <p className="text-xs text-slate-500">{alert.message}</p>
+                </div>
+                <span className="text-xs text-slate-500 whitespace-nowrap">{alert.startedAt}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+// Top5 资源使用卡片
+function TopResourceUsageCard() {
+  const topCpuServers = [...servers]
+    .sort((a, b) => b.cpuUsage - a.cpuUsage)
+    .slice(0, 5);
+
+  const topMemoryServers = [...servers]
+    .sort((a, b) => b.memoryUsage - a.memoryUsage)
+    .slice(0, 5);
+
+  const topDiskServers = [...servers]
+    .sort((a, b) => b.diskUsage - a.diskUsage)
+    .slice(0, 5);
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">Top5 资源使用</CardTitle>
+            <CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-3 gap-4">
+          {/* CPU Top5 */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Cpu className="h-4 w-4 text-blue-400" />
+              <span className="text-sm font-medium text-slate-300">CPU</span>
+            </div>
+            <div className="space-y-2">
+              {topCpuServers.map((server, index) => (
+                <div key={server.id} className="flex items-center gap-2">
+                  <span className="text-xs text-slate-500 w-4">{index + 1}</span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-slate-300 truncate">{server.hostname}</p>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${
+                            server.cpuUsage > 80 ? 'bg-red-400' : server.cpuUsage > 60 ? 'bg-amber-400' : 'bg-blue-400'
+                          }`}
+                          style={{ width: `${server.cpuUsage}%` }}
+                        />
+                      </div>
+                      <span className={`text-xs ${
+                        server.cpuUsage > 80 ? 'text-red-400' : server.cpuUsage > 60 ? 'text-amber-400' : 'text-slate-400'
+                      }`}>
+                        {server.cpuUsage.toFixed(1)}%
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Memory Top5 */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <MemoryStick className="h-4 w-4 text-emerald-400" />
+              <span className="text-sm font-medium text-slate-300">内存</span>
+            </div>
+            <div className="space-y-2">
+              {topMemoryServers.map((server, index) => (
+                <div key={server.id} className="flex items-center gap-2">
+                  <span className="text-xs text-slate-500 w-4">{index + 1}</span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-slate-300 truncate">{server.hostname}</p>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${
+                            server.memoryUsage > 80 ? 'bg-red-400' : server.memoryUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
+                          }`}
+                          style={{ width: `${server.memoryUsage}%` }}
+                        />
+                      </div>
+                      <span className={`text-xs ${
+                        server.memoryUsage > 80 ? 'text-red-400' : server.memoryUsage > 60 ? 'text-amber-400' : 'text-slate-400'
+                      }`}>
+                        {server.memoryUsage.toFixed(1)}%
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Disk Top5 */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <Database className="h-4 w-4 text-purple-400" />
+              <span className="text-sm font-medium text-slate-300">磁盘</span>
+            </div>
+            <div className="space-y-2">
+              {topDiskServers.map((server, index) => (
+                <div key={server.id} className="flex items-center gap-2">
+                  <span className="text-xs text-slate-500 w-4">{index + 1}</span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-slate-300 truncate">{server.hostname}</p>
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${
+                            server.diskUsage > 80 ? 'bg-red-400' : server.diskUsage > 60 ? 'bg-amber-400' : 'bg-purple-400'
+                          }`}
+                          style={{ width: `${server.diskUsage}%` }}
+                        />
+                      </div>
+                      <span className={`text-xs ${
+                        server.diskUsage > 80 ? 'text-red-400' : server.diskUsage > 60 ? 'text-amber-400' : 'text-slate-400'
+                      }`}>
+                        {server.diskUsage.toFixed(1)}%
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 证书到期卡片
+function CertificateExpiryCard() {
+  const expiringDomains = domains
+    .filter(d => d.sslEnabled)
+    .map(d => ({
+      ...d,
+      daysUntilExpiry: Math.ceil((new Date(d.sslExpireDate!).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
+    }))
+    .sort((a, b) => a.daysUntilExpiry - b.daysUntilExpiry);
+
+  const criticalCount = expiringDomains.filter(d => d.daysUntilExpiry < 30).length;
+  const warningCount = expiringDomains.filter(d => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">证书到期提醒</CardTitle>
+            <CardDescription className="text-slate-500">SSL证书到期时间监控</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            {criticalCount > 0 && (
+              <Badge className="bg-red-500/20 text-red-400 border-0">
+                <AlertTriangle className="h-3 w-3 mr-1" />
+                {criticalCount} 即将过期
+              </Badge>
+            )}
+            {warningCount > 0 && (
+              <Badge className="bg-amber-500/20 text-amber-400 border-0">
+                {warningCount} 30天内过期
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[280px]">
+          <div className="space-y-2">
+            {expiringDomains.map((domain) => (
+              <div
+                key={domain.id}
+                className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                    domain.daysUntilExpiry < 30 ? 'bg-red-500/10 text-red-400' :
+                    domain.daysUntilExpiry < 60 ? 'bg-amber-500/10 text-amber-400' :
+                    'bg-emerald-500/10 text-emerald-400'
+                  }`}>
+                    <Shield className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-slate-200">{domain.name}</p>
+                    <p className="text-xs text-slate-500">到期: {domain.sslExpireDate}</p>
+                  </div>
+                </div>
+                <Badge
+                  variant="outline"
+                  className={`text-xs ${
+                    domain.daysUntilExpiry < 30
+                      ? 'border-red-500/30 text-red-400 bg-red-500/10'
+                      : domain.daysUntilExpiry < 60
+                      ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
+                      : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                  }`}
+                >
+                  {domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
+                </Badge>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 资源使用率趋势卡片
+function ResourceUsageCard() {
+  const data = generateMetricsData(24);
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
+            <CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+              <Cpu className="h-3 w-3 mr-1" />
+              CPU
+            </Badge>
+            <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+              <Activity className="h-3 w-3 mr-1" />
+              内存
+            </Badge>
+            <Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
+              <HardDrive className="h-3 w-3 mr-1" />
+              磁盘
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[280px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+              <defs>
+                <linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                </linearGradient>
+                <linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+              <XAxis dataKey="time" stroke="#475569" fontSize={12} tickLine={false} axisLine={false} />
+              <YAxis stroke="#475569" fontSize={12} tickLine={false} axisLine={false} unit="%" />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#0f172a',
+                  border: '1px solid #1e293b',
+                  borderRadius: '6px',
+                  color: '#f8fafc',
+                }}
+              />
+              <Area
+                type="monotone"
+                dataKey="cpu"
+                stroke="#3b82f6"
+                fillOpacity={1}
+                fill="url(#colorCpu)"
+                strokeWidth={2}
+                name="CPU"
+              />
+              <Area
+                type="monotone"
+                dataKey="memory"
+                stroke="#10b981"
+                fillOpacity={1}
+                fill="url(#colorMemory)"
+                strokeWidth={2}
+                name="内存"
+              />
+              <Area
+                type="monotone"
+                dataKey="disk"
+                stroke="#a855f7"
+                fillOpacity={1}
+                fill="url(#colorDisk)"
+                strokeWidth={2}
+                name="磁盘"
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 发布历史卡片
+function ReleaseHistoryCard() {
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">发布历史</CardTitle>
+            <CardDescription className="text-slate-500">今日应用发布记录</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
+            查看全部
+            <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {appReleases.slice(0, 5).map((release) => (
+            <div
+              key={release.id}
+              className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
+            >
+              <div
+                className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                  release.status === 'success'
+                    ? 'bg-emerald-500/10 text-emerald-400'
+                    : release.status === 'failed'
+                    ? 'bg-red-500/10 text-red-400'
+                    : release.status === 'deploying'
+                    ? 'bg-blue-500/10 text-blue-400'
+                    : 'bg-amber-500/10 text-amber-400'
+                }`}
+              >
+                <Rocket className="h-4 w-4" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-slate-200">{release.appName}</span>
+                  <Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
+                    {release.version}
+                  </Badge>
+                </div>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <span className="text-xs text-slate-500">{release.environment}</span>
+                  <span className="text-xs text-slate-500">·</span>
+                  <span className="text-xs text-slate-500">{release.commitId}</span>
+                </div>
+              </div>
+              <Badge
+                variant="outline"
+                className={`text-xs ${
+                  release.status === 'success'
+                    ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                    : release.status === 'failed'
+                    ? 'border-red-500/30 text-red-400 bg-red-500/10'
+                    : release.status === 'deploying'
+                    ? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
+                    : 'border-amber-500/30 text-amber-400 bg-amber-500/10'
+                }`}
+              >
+                {release.status === 'success'
+                  ? '成功'
+                  : release.status === 'failed'
+                  ? '失败'
+                  : release.status === 'deploying'
+                  ? '发布中'
+                  : release.status === 'rolled_back'
+                  ? '已回滚'
+                  : '构建中'}
+              </Badge>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// 服务器状态卡片
+function ServerStatusCard() {
+  const runningServers = servers.filter((s) => s.status === 'running').length;
+  const stoppedServers = servers.filter((s) => s.status === 'stopped').length;
+  const maintenanceServers = servers.filter((s) => s.status === 'maintenance').length;
+
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">服务器状态</CardTitle>
+            <CardDescription className="text-slate-500">服务器运行状态分布</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
+            查看全部
+            <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-3 gap-4 mb-4">
+          <div className="text-center p-3 rounded-lg bg-emerald-500/10">
+            <div className="text-2xl font-bold text-emerald-400">{runningServers}</div>
+            <div className="text-xs text-slate-400 mt-1">运行中</div>
+          </div>
+          <div className="text-center p-3 rounded-lg bg-amber-500/10">
+            <div className="text-2xl font-bold text-amber-400">{maintenanceServers}</div>
+            <div className="text-xs text-slate-400 mt-1">维护中</div>
+          </div>
+          <div className="text-center p-3 rounded-lg bg-slate-500/10">
+            <div className="text-2xl font-bold text-slate-400">{stoppedServers}</div>
+            <div className="text-xs text-slate-400 mt-1">已停止</div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          {servers.slice(0, 4).map((server) => (
+            <div key={server.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-800/50">
+              <div
+                className={`w-2 h-2 rounded-full ${
+                  server.status === 'running'
+                    ? 'bg-emerald-400'
+                    : server.status === 'maintenance'
+                    ? 'bg-amber-400'
+                    : 'bg-slate-400'
+                }`}
+              />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-slate-200 truncate">{server.hostname}</p>
+                <p className="text-xs text-slate-500">{server.ip}</p>
+              </div>
+              <div className="text-right">
+                <p className="text-xs text-slate-400">CPU {server.cpuUsage.toFixed(1)}%</p>
+                <p className="text-xs text-slate-400">内存 {server.memoryUsage.toFixed(1)}%</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// K8s集群状态卡片
+function K8sClusterCard() {
+  return (
+    <Card className="bg-slate-900 border-slate-800">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-slate-100">K8s集群</CardTitle>
+            <CardDescription className="text-slate-500">Kubernetes集群健康状态</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100">
+            查看全部
+            <ArrowRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {k8sClusters.map((cluster) => (
+            <div key={cluster.id} className="p-3 rounded-lg bg-slate-800/50">
+              <div className="flex items-center justify-between mb-2">
+                <div className="flex items-center gap-2">
+                  <Cloud className="h-4 w-4 text-blue-400" />
+                  <span className="text-sm font-medium text-slate-200">{cluster.name}</span>
+                </div>
+                <Badge
+                  variant="outline"
+                  className={`text-xs ${
+                    cluster.status === 'healthy'
+                      ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
+                      : cluster.status === 'warning'
+                      ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
+                      : 'border-red-500/30 text-red-400 bg-red-500/10'
+                  }`}
+                >
+                  {cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-4 gap-2 text-center">
+                <div>
+                  <div className="text-sm font-medium text-slate-200">{cluster.nodes}</div>
+                  <div className="text-xs text-slate-500">节点</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-slate-200">{cluster.pods}</div>
+                  <div className="text-xs text-slate-500">Pod</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-slate-200">{cluster.cpuUsage.toFixed(1)}%</div>
+                  <div className="text-xs text-slate-500">CPU</div>
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-slate-200">{cluster.memoryUsage.toFixed(1)}%</div>
+                  <div className="text-xs text-slate-500">内存</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function Dashboard() {
+  const [data, setData] = useState<DashboardData>(dashboardData);
+
+  // 模拟实时数据更新
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setData((prev) => ({
+        ...prev,
+        cpuUsage: 60 + Math.random() * 20,
+        memoryUsage: 70 + Math.random() * 15,
+        networkUsage: 30 + Math.random() * 30,
+      }));
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  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">
+            <Clock className="h-4 w-4 mr-2" />
+            刷新
+          </Button>
+          <Button className="bg-blue-600 hover:bg-blue-700 text-white">
+            <Activity className="h-4 w-4 mr-2" />
+            实时监控
+          </Button>
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="服务器总数"
+          value={data.serverCount}
+          description={`${data.runningServers} 台运行中`}
+          icon={Server}
+          trend="up"
+          trendValue="+3 本月"
+          color="blue"
+        />
+        <StatCard
+          title="K8s集群"
+          value={data.k8sClusters}
+          description={`${data.healthyClusters} 个健康`}
+          icon={Cloud}
+          trend="neutral"
+          trendValue="稳定"
+          color="purple"
+        />
+        <StatCard
+          title="待处理告警"
+          value={data.alertCount}
+          description={`${data.criticalAlerts} 个严重`}
+          icon={Bell}
+          trend="down"
+          trendValue="-5 本周"
+          color="rose"
+        />
+        <StatCard
+          title="本月云成本"
+          value="¥107,700"
+          description="较上月 +12.5%"
+          icon={DollarSign}
+          trend="up"
+          trendValue="+12.5%"
+          color="orange"
+        />
+      </div>
+
+      {/* Resource Usage Chart */}
+      <ResourceUsageCard />
+
+      {/* Cost & Top Resource Usage */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <CostOverviewCard />
+        <TopResourceUsageCard />
+      </div>
+
+      {/* Alert Messages & Certificate Expiry */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <AlertMessagesCard />
+        <CertificateExpiryCard />
+      </div>
+
+      {/* Bottom Row */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <ReleaseHistoryCard />
+        <ServerStatusCard />
+        <K8sClusterCard />
+      </div>
+    </div>
+  );
+}