feat: 前端全面优化 — 懒加载/骨架屏/错误边界/面包屑/主题增强/Glass登录页/动画系统
- 新增: ErrorBoundary, PageTransition, Breadcrumb, SkeletonCard (4组件) - 重构: App.tsx (React.lazy懒加载所有页面), index.css (55+主题变量/动画/工具类) - 优化: MainLayout (CSS变量布局+Footer), Header (搜索增强+快捷键), Sidebar (折叠Tooltip+子菜单动画) - 优化: Dashboard骨架屏+级联动画, Stats/Charts/Recent主题感知颜色 - 优化: Login.tsx Glass毛玻璃效果+密码显隐图标+光球动画 - 图表Recharts主题化(CustomTooltip/chart-grid/chart-axis) - 减少动画偏好支持(prefers-reduced-motion)
This commit is contained in:
attacker committed
1 parent
3d7932c087
commit
722587ab84
14 files changed
+2026
-969
No files matched your search
@@ -3,77 +3,123 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
|
||||
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 {
|
||||
Rocket,
|
||||
AlertTriangle,
|
||||
ArrowRight,
|
||||
Cloud,
|
||||
Shield,
|
||||
Server,
|
||||
Circle,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/**
|
||||
* DashboardRecent - 优化后的仪表盘底部卡片组件
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
|
||||
* 2. 统一的状态指示器样式
|
||||
* 3. 更好的 hover 效果和过渡动画
|
||||
* 4. ScrollArea 使用 scrollbar-thin 类
|
||||
* 5. 空状态显示更友好
|
||||
*/
|
||||
|
||||
// Status dot component
|
||||
function StatusDot({ severity }: { severity: string }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
|
||||
severity === 'critical' && 'bg-[var(--dg-red)]',
|
||||
severity === 'warning' && 'bg-[var(--dg-yellow)]',
|
||||
severity === 'info' && 'bg-[var(--dg-blue)]',
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Severity badge
|
||||
function SeverityBadge({ severity }: { severity: string }) {
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs font-medium',
|
||||
severity === 'critical' && 'dg-badge-red border',
|
||||
severity === 'warning' && 'dg-badge-yellow border',
|
||||
severity === 'info' && 'dg-badge-blue border',
|
||||
)}
|
||||
>
|
||||
{severity === 'critical' ? '严重' : severity === 'warning' ? '警告' : '提示'}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
// 告警消息卡片
|
||||
export function AlertMessagesCard({ alerts }: { alerts: any[] }) {
|
||||
const navigate = useNavigate();
|
||||
const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">告警消息</CardTitle>
|
||||
<CardDescription className="text-slate-500">最近触发的告警事件</CardDescription>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">告警消息</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">最近触发的告警事件</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/alerts')}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/alerts')}
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
<ArrowRight className="h-3.5 w-3.5 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>
|
||||
<ScrollArea className="h-[320px] scrollbar-thin">
|
||||
{recentAlerts.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
|
||||
<AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">暂无告警事件</p>
|
||||
<p className="text-xs mt-1 opacity-60">所有系统运行正常</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{recentAlerts.map((alert) => (
|
||||
<div
|
||||
key={alert.id}
|
||||
className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
|
||||
onClick={() => navigate('/alert-center')}
|
||||
>
|
||||
<StatusDot severity={alert.severity || 'info'} />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
|
||||
{alert.rule_name}
|
||||
</span>
|
||||
<SeverityBadge severity={alert.severity || 'info'} />
|
||||
</div>
|
||||
<p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 mt-1">{alert.target}</p>
|
||||
<p className="text-xs text-slate-500">{alert.message}</p>
|
||||
<span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 whitespace-nowrap">
|
||||
{alert.created_at ? new Date(alert.created_at).toLocaleString() : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 证书到期卡片
|
||||
export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
|
||||
const expiringDomains = (expCerts ?? [])
|
||||
.map((d) => ({
|
||||
@@ -86,22 +132,22 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
|
||||
const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">证书到期提醒</CardTitle>
|
||||
<CardDescription className="text-slate-500">SSL证书到期时间监控</CardDescription>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">证书到期提醒</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">SSL证书到期时间监控</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{criticalCount > 0 && (
|
||||
<Badge className="bg-red-500/20 text-red-400 border-0">
|
||||
<Badge className="dg-badge-red border">
|
||||
<AlertTriangle className="h-3 w-3 mr-1" />
|
||||
{criticalCount} 即将过期
|
||||
</Badge>
|
||||
)}
|
||||
{warningCount > 0 && (
|
||||
<Badge className="bg-amber-500/20 text-amber-400 border-0">
|
||||
<Badge className="dg-badge-yellow border">
|
||||
{warningCount} 30天内过期
|
||||
</Badge>
|
||||
)}
|
||||
@@ -109,128 +155,151 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
|
||||
</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'
|
||||
}`}
|
||||
<ScrollArea className="h-[280px] scrollbar-thin">
|
||||
{expiringDomains.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Shield className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">暂无证书数据</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1.5 pr-2">
|
||||
{expiringDomains.map((domain) => (
|
||||
<div
|
||||
key={domain.id}
|
||||
className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
|
||||
domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
|
||||
'bg-[var(--dg-green)]/10'
|
||||
)}
|
||||
>
|
||||
<Shield className={cn(
|
||||
'h-4 w-4',
|
||||
domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
|
||||
domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
|
||||
'text-[var(--dg-green)]'
|
||||
)} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">到期: {domain.expire_date?.substring(0, 10)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
|
||||
domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
|
||||
'dg-badge-green border'
|
||||
)}
|
||||
>
|
||||
{domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 发布历史卡片
|
||||
export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
|
||||
const navigate = useNavigate();
|
||||
const releaseList = releases?.slice(0, 5) ?? [];
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">发布历史</CardTitle>
|
||||
<CardDescription className="text-slate-500">今日应用发布记录</CardDescription>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">发布历史</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">今日应用发布记录</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/releases')}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/pipelines')}
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
<ArrowRight className="h-3.5 w-3.5 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"
|
||||
>
|
||||
{releaseList.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Rocket className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">暂无发布记录</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{releaseList.map((release) => (
|
||||
<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'
|
||||
}`}
|
||||
key={release.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<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
|
||||
className={cn(
|
||||
'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
|
||||
release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
|
||||
release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
|
||||
release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
|
||||
'bg-[var(--dg-yellow)]/10'
|
||||
)}
|
||||
>
|
||||
<Rocket className={cn(
|
||||
'h-4 w-4',
|
||||
release.status === 'success' ? 'text-[var(--dg-green)]' :
|
||||
release.status === 'failed' ? 'text-[var(--dg-red)]' :
|
||||
release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
|
||||
'text-[var(--dg-yellow)]'
|
||||
)} />
|
||||
</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 className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
|
||||
<Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
|
||||
{release.version}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
|
||||
<span className="text-xs text-[var(--dg-border)]">·</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs flex-shrink-0',
|
||||
release.status === 'success' ? 'dg-badge-green border' :
|
||||
release.status === 'failed' ? 'dg-badge-red border' :
|
||||
release.status === 'deploying' ? 'dg-badge-blue border' :
|
||||
'dg-badge-yellow border'
|
||||
)}
|
||||
>
|
||||
{release.status === 'success' ? '成功' :
|
||||
release.status === 'failed' ? '失败' :
|
||||
release.status === 'deploying' ? '发布中' :
|
||||
release.status === 'rolled_back' ? '已回滚' : '构建中'}
|
||||
</Badge>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 服务器状态卡片
|
||||
export function ServerStatusCard({ servers }: { servers: any[] }) {
|
||||
const navigate = useNavigate();
|
||||
const runningServers = servers.filter((s) => s.status === 'running').length;
|
||||
@@ -238,126 +307,156 @@ export function ServerStatusCard({ servers }: { servers: any[] }) {
|
||||
const maintenanceServers = servers.filter((s) => s.status === 'maintenance').length;
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">服务器状态</CardTitle>
|
||||
<CardDescription className="text-slate-500">服务器运行状态分布</CardDescription>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">服务器状态</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">服务器运行状态分布</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/servers')}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/servers')}
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
<ArrowRight className="h-3.5 w-3.5 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>
|
||||
{/* Status Summary */}
|
||||
<div className="grid grid-cols-3 gap-3 mb-4">
|
||||
<div className="text-center p-3 rounded-xl bg-[var(--dg-green)]/8 border border-[var(--dg-green)]/15">
|
||||
<div className="text-2xl font-bold text-[var(--dg-green)]">{runningServers}</div>
|
||||
<div className="text-xs text-[var(--dg-text-muted)] 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 className="text-center p-3 rounded-xl bg-[var(--dg-yellow)]/8 border border-[var(--dg-yellow)]/15">
|
||||
<div className="text-2xl font-bold text-[var(--dg-yellow)]">{maintenanceServers}</div>
|
||||
<div className="text-xs text-[var(--dg-text-muted)] 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 className="text-center p-3 rounded-xl bg-[var(--dg-text-muted)]/8 border border-[var(--dg-border)]">
|
||||
<div className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedServers}</div>
|
||||
<div className="text-xs text-[var(--dg-text-muted)] mt-1">已停止</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
|
||||
{/* Server List */}
|
||||
<div className="space-y-1.5">
|
||||
{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
|
||||
key={server.id}
|
||||
className="flex items-center gap-3 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
|
||||
>
|
||||
<Circle
|
||||
className={cn(
|
||||
'h-2.5 w-2.5 flex-shrink-0 fill-current',
|
||||
server.status === 'running' ? 'text-[var(--dg-green)]' :
|
||||
server.status === 'maintenance' ? 'text-[var(--dg-yellow)]' :
|
||||
'text-[var(--dg-text-muted)]'
|
||||
)}
|
||||
/>
|
||||
<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>
|
||||
<p className="text-sm text-[var(--dg-text-primary)] truncate">{server.hostname}</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">{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 className="text-right flex-shrink-0">
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">
|
||||
CPU <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.cpu_usage ?? 0).toFixed(1)}%</span>
|
||||
</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">
|
||||
内存 <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.memory_usage ?? 0).toFixed(1)}%</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{servers.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-6 text-[var(--dg-text-muted)]">
|
||||
<Server className="h-8 w-8 mb-2 opacity-30" />
|
||||
<p className="text-sm">暂无服务器</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// K8s集群状态卡片
|
||||
export function KubernetesClusterCard({ clusters }: { clusters: any[] }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card dg-card-hover">
|
||||
<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>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">K8s集群</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">Kubernetes集群健康状态</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/clusters')}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="dg-btn-ghost text-xs"
|
||||
onClick={() => navigate('/kubernetes')}
|
||||
>
|
||||
查看全部
|
||||
<ArrowRight className="h-4 w-4 ml-1" />
|
||||
<ArrowRight className="h-3.5 w-3.5 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>
|
||||
{clusters.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Cloud className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">暂无集群数据</p>
|
||||
</div>
|
||||
) : (
|
||||
<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.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
|
||||
onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
'text-xs',
|
||||
cluster.status === 'healthy' ? 'dg-badge-green border' :
|
||||
cluster.status === 'warning' ? 'dg-badge-yellow border' :
|
||||
'dg-badge-red border'
|
||||
)}
|
||||
>
|
||||
{cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
|
||||
</Badge>
|
||||
</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 ?? 0}</div>
|
||||
<div className="text-xs text-slate-500">节点</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-slate-200">{cluster.pod_count ?? 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 className="grid grid-cols-4 gap-2 text-center">
|
||||
{[
|
||||
{ label: '节点', value: cluster.node_count ?? 0 },
|
||||
{ label: 'Pod', value: cluster.pod_count ?? 0 },
|
||||
{ label: 'CPU', value: `${cpuUsage.toFixed(1)}%` },
|
||||
{ label: '内存', value: `${memoryUsage.toFixed(1)}%` },
|
||||
].map((item) => (
|
||||
<div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
|
||||
<div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user