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
2026-06-15 01:09:49 +08:00
1 parent 8be63ac168
commit a7e2351ad2
@@ -0,0 +1,349 @@
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+} from 'recharts';
+import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
+
+// 云平台颜色映射
+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 最后两个月）
+export 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;
+}
+
+// 成本费用卡片
+export 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>
+  );
+}
+
+// Top5 资源使用卡片
+export 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>
+  );
+}
+
+// 资源使用率趋势卡片
+export 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>
+  );
+}