71 lines
3.0 KiB
TypeScript
71 lines
3.0 KiB
TypeScript
// 服务器统计卡片组件 — 从 ServerManager 提取 // Logan.Li
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Server, Activity, RotateCw, Power } from 'lucide-react';
|
|
|
|
interface ServerStatsCardsProps {
|
|
servers: any[];
|
|
}
|
|
|
|
export function ServerStatsCards({ servers }: ServerStatsCardsProps) {
|
|
const runningCount = servers.filter((s) => s.status === 'running').length;
|
|
const maintenanceCount = servers.filter((s) => s.status === 'maintenance').length;
|
|
const stoppedCount = servers.filter((s) => s.status === 'stopped').length;
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">服务器总数</p>
|
|
<p className="text-2xl font-bold text-[var(--dg-text-primary)]">{servers.length}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
|
|
<Server className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">运行中</p>
|
|
<p className="text-2xl font-bold text-emerald-400">{runningCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
|
|
<Activity className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">维护中</p>
|
|
<p className="text-2xl font-bold text-amber-400">{maintenanceCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
|
|
<RotateCw className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--dg-text-muted)]">已停止</p>
|
|
<p className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedCount}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)]">
|
|
<Power className="h-5 w-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|