feat: 定时任务编辑入口全栈打通 + 修复ApprovalFlow编译错误 + 完成大文件拆分重构

- CronJobManager: 编辑按钮接通 onClick → openEdit(job)，弹出编辑对话框预填数据，
  复用新建/编辑共用 Dialog（editingId 区分模式），标题/按钮文案动态切换，
  保存时根据 editingId 调用 createJob 或 updateJob — 消除占位按钮
- ApprovalFlow: 修复 API 方法名不匹配导致 tsc -b 编译失败
  (getInstances→getProcesses, getMyApprovals→getProcesses({status:'pending'}),
   approveInstance→approveProcess, rejectInstance→rejectProcess)
  + 添加 ApprovalFlowManager 导出别名兼容 App.tsx 导入
- 合并已完成的大文件拆分重构: automation.go→automation_cron/script/playbook,
  ldap.go→ldap_ou/ldap_users, server.go→cloud_accounts/domain/platform/region,
  user.go→user_admin; 前端 Dashboard/K8s/Server/Approval/Monitor 子组件拆分
  // Logan.Li

frontend/src/components/dashboard/Dashboard.tsx

@@ -1,790 +1,16 @@
 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 {
-  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 { Clock, Activity, Server, Cloud, Bell, DollarSign } from 'lucide-react';
 import { dashboardStatsApi, serverApi, k8sApi } from '@/services/api';
-
-// 云平台颜色映射
-const CLOUD_COLORS: Record<string, string> = {
-  '阿里云': '#ff6a00',
-  aliyun: '#ff6a00',
-  AWS: '#ff9900',
-  aws: '#ff9900',
-  '腾讯云': '#006eff',
-  tencent: '#006eff',
-  '华为云': '#ff0000',
-  huawei: '#ff0000',
-  Azure: '#0078d4',
-  azure: '#0078d4',
-};
-const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
-
-// 计算月度环比变化（基于 month_trend 最后两个月）
-function computeMonthChange(monthTrend: any[]): {
-  pct: number;
-  label: string;
-  direction: 'up' | 'down' | 'neutral';
-} {
-  if (!monthTrend || monthTrend.length < 2) {
-    return { pct: 0, label: '暂无数据', direction: 'neutral' };
-  }
-  const cur = Number(monthTrend[monthTrend.length - 1].cost ?? 0);
-  const prev = Number(monthTrend[monthTrend.length - 2].cost ?? 0);
-  if (prev === 0) {
-    return { pct: 0, label: cur > 0 ? '新增费用' : '持平', direction: 'neutral' };
-  }
-  const pct = ((cur - prev) / prev) * 100;
-  const direction = pct > 0.05 ? 'up' : pct < -0.05 ? 'down' : 'neutral';
-  const label = `${pct > 0 ? '+' : ''}${pct.toFixed(1)}% 较上月`;
-  return { pct, label, direction };
-}
-
-// 根据平均值生成24小时趋势数据（无实时指标时使用）
-function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
-  const data = [];
-  for (let i = points - 1; i >= 0; i--) {
-    const d = new Date(Date.now() - i * 60 * 60 * 1000);
-    data.push({
-      time: `${d.getHours().toString().padStart(2, '0')}:00`,
-      cpu: Number(Math.max(0, avgCpu + (Math.random() - 0.5) * 15).toFixed(1)),
-      memory: Number(Math.max(0, avgMemory + (Math.random() - 0.5) * 10).toFixed(1)),
-      disk: Number(Math.max(0, avgDisk + (Math.random() - 0.5) * 5).toFixed(1)),
-    });
-  }
-  return data;
-}
-
-// 统计卡片组件
-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({ costStats }: { costStats: any }) {
-  const cloudCosts: any[] = costStats?.cloud_costs ?? [];
-  const monthTrend: any[] = costStats?.month_trend ?? [];
-
-  const costData = cloudCosts.map((c, i) => ({
-    name: c.cloud,
-    value: c.cost,
-    color: CLOUD_COLORS[c.cloud] || FALLBACK_CLOUD_COLORS[i % FALLBACK_CLOUD_COLORS.length],
-  }));
-  const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
-  const totalCost =
-    costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
-  const costChange = computeMonthChange(monthTrend);
-
-  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">¥{Number(totalCost).toLocaleString()}</p>
-            <p className={`text-xs ${
-              costChange.direction === 'up'
-                ? 'text-emerald-400'
-                : costChange.direction === 'down'
-                ? 'text-red-400'
-                : 'text-slate-500'
-            }`}>
-              {costChange.label}
-            </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">¥{Number(item.value).toLocaleString()}</span>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// 告警消息卡片
-function AlertMessagesCard({ alerts }: { alerts: any[] }) {
-  const recentAlerts = alerts.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.rule_name}</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.created_at ? new Date(alert.created_at).toLocaleString() : ''}
-                </span>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </CardContent>
-    </Card>
-  );
-}
-
-// Top5 资源使用卡片
-function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
-  const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
-  const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
-  const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
-
-  const renderList = (
-    items: any[],
-    color: string,
-    BarColor: string,
-    icon: React.ReactNode,
-    label: string
-  ) => (
-    <div>
-      <div className="flex items-center gap-2 mb-3">
-        {icon}
-        <span className="text-sm font-medium text-slate-300">{label}</span>
-      </div>
-      <div className="space-y-2">
-        {items.map((item, index) => {
-          const usage = Number(item.usage ?? 0);
-          return (
-            <div key={item.id ?? index} 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">{item.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 ${
-                        usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
-                      }`}
-                      style={{ width: `${usage}%` }}
-                    />
-                  </div>
-                  <span className={`text-xs ${
-                    usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
-                  }`}>
-                    {usage.toFixed(1)}%
-                  </span>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-
-  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 */}
-          {renderList(topCpuServers, 'blue', 'bg-blue-400', <Cpu className="h-4 w-4 text-blue-400" />, 'CPU')}
-          {/* Memory Top5 */}
-          {renderList(topMemoryServers, 'emerald', 'bg-emerald-400', <MemoryStick className="h-4 w-4 text-emerald-400" />, '内存')}
-          {/* Disk Top5 */}
-          {renderList(topDiskServers, 'purple', 'bg-purple-400', <Database className="h-4 w-4 text-purple-400" />, '磁盘')}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// 证书到期卡片
-function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
-  const expiringDomains = (expCerts ?? [])
-    .map((d) => ({
-      ...d,
-      daysUntilExpiry: d.days_until_expiry ?? Math.ceil((new Date(d.expire_date).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.expire_date?.substring(0, 10)}</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({
-  avgCpu,
-  avgMemory,
-  avgDisk,
-}: {
-  avgCpu: number;
-  avgMemory: number;
-  avgDisk: number;
-}) {
-  const data = generateMetricsData(avgCpu, avgMemory, avgDisk, 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({ releases }: { releases: any[] }) {
-  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">
-          {releases.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.app_name}</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.commit_id}</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({ servers }: { servers: any[] }) {
-  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 {Number(server.cpu_usage ?? 0).toFixed(1)}%</p>
-                <p className="text-xs text-slate-400">内存 {Number(server.memory_usage ?? 0).toFixed(1)}%</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-// K8s集群状态卡片
-function K8sClusterCard({ clusters }: { clusters: any[] }) {
-  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">
-          {clusters.map((cluster) => {
-            const cpuUsage = Number(cluster.cpu_usage ?? 0);
-            const memoryUsage = Number(cluster.memory_usage ?? 0);
-            return (
-              <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.node_count ?? cluster.nodes ?? 0}</div>
-                    <div className="text-xs text-slate-500">节点</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{cluster.pod_count ?? cluster.pods ?? 0}</div>
-                    <div className="text-xs text-slate-500">Pod</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{cpuUsage.toFixed(1)}%</div>
-                    <div className="text-xs text-slate-500">CPU</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{memoryUsage.toFixed(1)}%</div>
-                    <div className="text-xs text-slate-500">内存</div>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
+import { StatCard } from './DashboardStats';
+import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
+import {
+  AlertMessagesCard,
+  CertificateExpiryCard,
+  ReleaseHistoryCard,
+  ServerStatusCard,
+  K8sClusterCard,
+} from './DashboardRecent';
 
 export function Dashboard() {
   const [loading, setLoading] = useState(true);