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
@@ -1,6 +1,8 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Clock, Server, Cloud, Bell, DollarSign } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Clock, Server, Cloud, Bell, DollarSign, TrendingUp, TrendingDown, ArrowRight } from 'lucide-react';
|
||||
import { dashboardStatsApi, serverApi, kubernetesApi } from '@/services/api';
|
||||
import { StatCard } from './DashboardStats';
|
||||
import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
|
||||
@@ -11,8 +13,21 @@ import {
|
||||
ServerStatusCard,
|
||||
KubernetesClusterCard,
|
||||
} from './DashboardRecent';
|
||||
import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
|
||||
|
||||
/**
|
||||
* Dashboard - 优化后的仪表盘页面
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 SkeletonDashboard 骨架屏替代简单 spinner
|
||||
* 2. 页面结构使用 dg-page* 工具类
|
||||
* 3. 统计卡片添加 staggered fade-in 动画
|
||||
* 4. 操作按钮使用 dg-btn* 工具类
|
||||
* 5. 更好的空状态处理
|
||||
* 6. 添加页面标题区域的操作入口
|
||||
*/
|
||||
export function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
const [initialLoading, setInitialLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [stats, setStats] = useState<any>(null);
|
||||
@@ -21,7 +36,7 @@ export function Dashboard() {
|
||||
const [alerts, setAlerts] = useState<any[]>([]);
|
||||
const [releases, setReleases] = useState<any[]>([]);
|
||||
const [expCerts, setExpCerts] = useState<any[]>([]);
|
||||
const [metrics, setMetrics] = useState<any[]>([]); // 真实 Agent 指标时间序列 // Logan.Li
|
||||
const [metrics, setMetrics] = useState<any[]>([]);
|
||||
|
||||
const refreshData = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
@@ -47,7 +62,6 @@ export function Dashboard() {
|
||||
console.error('Failed to fetch dashboard releases:', e);
|
||||
return null;
|
||||
}),
|
||||
// 获取真实 Agent 指标时间序列（过去24小时按小时聚合） // Logan.Li
|
||||
dashboardStatsApi.getMetrics(24).catch((e) => {
|
||||
console.error('Failed to fetch metrics:', e);
|
||||
return [];
|
||||
@@ -74,11 +88,7 @@ export function Dashboard() {
|
||||
}, [refreshData]);
|
||||
|
||||
if (initialLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-96">
|
||||
<div className="h-8 w-8 border-2 border-slate-700 border-t-blue-500 rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
return <SkeletonDashboard />;
|
||||
}
|
||||
|
||||
const serverStats = stats?.server_stats;
|
||||
@@ -88,81 +98,110 @@ export function Dashboard() {
|
||||
const costChange = computeMonthChange(costStats?.month_trend);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="dg-page">
|
||||
{/* Page Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="dg-page-header">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-100">仪表盘</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">实时监控和运维概览</p>
|
||||
<h1 className="dg-page-title">仪表盘</h1>
|
||||
<p className="dg-page-subtitle">实时监控和运维概览 · 最后更新: {new Date().toLocaleTimeString('zh-CN')}</p>
|
||||
</div>
|
||||
<div className="dg-page-actions">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="dg-btn-secondary"
|
||||
onClick={refreshData}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
|
||||
{refreshing ? '刷新中' : '刷新'}
|
||||
</Button>
|
||||
<Button
|
||||
className="dg-btn-primary"
|
||||
onClick={() => navigate('/servers')}
|
||||
>
|
||||
<Server className="h-4 w-4" />
|
||||
服务器
|
||||
<ArrowRight className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800" onClick={refreshData}>
|
||||
<Clock className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
{/* Stats Grid with staggered animation */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
title="服务器总数"
|
||||
value={serverStats?.total ?? 0}
|
||||
description={`${serverStats?.running ?? 0} 台运行中`}
|
||||
icon={Server}
|
||||
trend={Number(serverStats?.error ?? 0) > 0 ? 'down' : 'neutral'}
|
||||
trendValue={Number(serverStats?.error ?? 0) > 0 ? `${serverStats?.error} 台异常` : '运行正常'}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
title="K8s集群"
|
||||
value={k8sStats?.total ?? 0}
|
||||
description={`${k8sStats?.healthy ?? 0} 个健康`}
|
||||
icon={Cloud}
|
||||
trend="neutral"
|
||||
trendValue="稳定"
|
||||
color="purple"
|
||||
/>
|
||||
<StatCard
|
||||
title="待处理告警"
|
||||
value={alertStats?.firing ?? 0}
|
||||
description={`${alertStats?.critical ?? 0} 个严重`}
|
||||
icon={Bell}
|
||||
trend={Number(alertStats?.today_count ?? 0) > 0 ? 'up' : 'down'}
|
||||
trendValue={`本周 ${alertStats?.week_count ?? 0} 条`}
|
||||
color="rose"
|
||||
/>
|
||||
<StatCard
|
||||
title="本月云成本"
|
||||
value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
|
||||
description={costChange.label}
|
||||
icon={DollarSign}
|
||||
trend={costChange.direction}
|
||||
trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
|
||||
color="orange"
|
||||
/>
|
||||
<div className="animate-fade-in-delay-1">
|
||||
<StatCard
|
||||
title="服务器总数"
|
||||
value={serverStats?.total ?? 0}
|
||||
description={`${serverStats?.running ?? 0} 台运行中`}
|
||||
icon={Server}
|
||||
trend={Number(serverStats?.error ?? 0) > 0 ? 'down' : 'neutral'}
|
||||
trendValue={Number(serverStats?.error ?? 0) > 0 ? `${serverStats?.error} 台异常` : '运行正常'}
|
||||
color="blue"
|
||||
onClick={() => navigate('/servers')}
|
||||
/>
|
||||
</div>
|
||||
<div className="animate-fade-in-delay-2">
|
||||
<StatCard
|
||||
title="K8s集群"
|
||||
value={k8sStats?.total ?? 0}
|
||||
description={`${k8sStats?.healthy ?? 0} 个健康`}
|
||||
icon={Cloud}
|
||||
trend="neutral"
|
||||
trendValue="稳定"
|
||||
color="purple"
|
||||
onClick={() => navigate('/kubernetes')}
|
||||
/>
|
||||
</div>
|
||||
<div className="animate-fade-in-delay-3">
|
||||
<StatCard
|
||||
title="待处理告警"
|
||||
value={alertStats?.firing ?? 0}
|
||||
description={`${alertStats?.critical ?? 0} 个严重`}
|
||||
icon={Bell}
|
||||
trend={Number(alertStats?.today_count ?? 0) > 0 ? 'up' : 'down'}
|
||||
trendValue={`本周 ${alertStats?.week_count ?? 0} 条`}
|
||||
color="rose"
|
||||
onClick={() => navigate('/alert-center')}
|
||||
/>
|
||||
</div>
|
||||
<div className="animate-fade-in-delay-4">
|
||||
<StatCard
|
||||
title="本月云成本"
|
||||
value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
|
||||
description={costChange.label}
|
||||
icon={DollarSign}
|
||||
trend={costChange.direction}
|
||||
trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
|
||||
color="orange"
|
||||
onClick={() => navigate('/cloud-billing')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resource Usage Chart */}
|
||||
<ResourceUsageCard
|
||||
avgCpu={Number(serverStats?.avg_cpu ?? 0)}
|
||||
avgMemory={Number(serverStats?.avg_memory ?? 0)}
|
||||
avgDisk={Number(serverStats?.avg_disk ?? 0)}
|
||||
metrics={metrics}
|
||||
/>
|
||||
<div className="animate-fade-in-delay-2">
|
||||
<ResourceUsageCard
|
||||
avgCpu={Number(serverStats?.avg_cpu ?? 0)}
|
||||
avgMemory={Number(serverStats?.avg_memory ?? 0)}
|
||||
avgDisk={Number(serverStats?.avg_disk ?? 0)}
|
||||
metrics={metrics}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Cost & Top Resource Usage */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
|
||||
<CostOverviewCard costStats={costStats} />
|
||||
<TopResourceUsageCard topUsage={stats?.top_resource_usage} />
|
||||
</div>
|
||||
|
||||
{/* Alert Messages & Certificate Expiry */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
|
||||
<AlertMessagesCard alerts={alerts} />
|
||||
<CertificateExpiryCard expCerts={expCerts} />
|
||||
</div>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in-delay-4">
|
||||
<ReleaseHistoryCard releases={releases} />
|
||||
<ServerStatusCard servers={servers} />
|
||||
<KubernetesClusterCard clusters={clusters} />
|
||||
@@ -170,3 +209,5 @@ export function Dashboard() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -15,8 +15,9 @@ import {
|
||||
Bar,
|
||||
} from 'recharts';
|
||||
import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// 云平台颜色映射
|
||||
// Cloud platform color mapping (theme-aware)
|
||||
const CLOUD_COLORS: Record<string, string> = {
|
||||
'阿里云': '#ff6a00',
|
||||
aliyun: '#ff6a00',
|
||||
@@ -31,7 +32,6 @@ const CLOUD_COLORS: Record<string, string> = {
|
||||
};
|
||||
const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
|
||||
|
||||
// 计算月度环比变化（基于 month_trend 最后两个月）
|
||||
export function computeMonthChange(monthTrend: any[]): {
|
||||
pct: number;
|
||||
label: string;
|
||||
@@ -51,22 +51,61 @@ export function computeMonthChange(monthTrend: any[]): {
|
||||
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)),
|
||||
cpu: Number(Math.max(0, Math.min(100, avgCpu + (Math.random() - 0.5) * 15)).toFixed(1)),
|
||||
memory: Number(Math.max(0, Math.min(100, avgMemory + (Math.random() - 0.5) * 10)).toFixed(1)),
|
||||
disk: Number(Math.max(0, Math.min(100, avgDisk + (Math.random() - 0.5) * 5)).toFixed(1)),
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
// 成本费用卡片
|
||||
function buildMetricsFromReal(metrics: any[], avgDisk: number) {
|
||||
if (!metrics || metrics.length === 0) return [];
|
||||
const buckets: Record<string, { cpu?: number; memory?: number }> = {};
|
||||
for (const m of metrics) {
|
||||
const ts = m.timestamp;
|
||||
if (!ts) continue;
|
||||
const d = new Date(ts);
|
||||
const label = `${d.getHours().toString().padStart(2, '0')}:00`;
|
||||
if (!buckets[label]) buckets[label] = {};
|
||||
if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
|
||||
if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
|
||||
}
|
||||
return Object.entries(buckets)
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.map(([time, v]) => ({
|
||||
time,
|
||||
cpu: Number((v.cpu ?? 0).toFixed(1)),
|
||||
memory: Number((v.memory ?? 0).toFixed(1)),
|
||||
disk: Number(avgDisk.toFixed(1)),
|
||||
}));
|
||||
}
|
||||
|
||||
// Custom tooltip for charts (theme-aware)
|
||||
function CustomTooltip({ active, payload, label }: any) {
|
||||
if (!active || !payload) return null;
|
||||
return (
|
||||
<div className="chart-tooltip px-3 py-2">
|
||||
<p className="text-xs font-medium mb-1.5" style={{ color: 'var(--dg-text-secondary)' }}>{label}</p>
|
||||
{payload.map((entry: any, index: number) => (
|
||||
<div key={index} className="flex items-center gap-2 text-xs">
|
||||
<span className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
|
||||
<span style={{ color: 'var(--dg-text-muted)' }}>{entry.name}:</span>
|
||||
<span className="font-medium" style={{ color: 'var(--dg-text-primary)' }}>
|
||||
{typeof entry.value === 'number' ? `${entry.value}%` : entry.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
const cloudCosts: any[] = costStats?.cloud_costs ?? [];
|
||||
const monthTrend: any[] = costStats?.month_trend ?? [];
|
||||
@@ -77,27 +116,27 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
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 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">
|
||||
<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>
|
||||
<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'
|
||||
}`}>
|
||||
<p className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
|
||||
¥{Number(totalCost).toLocaleString()}
|
||||
</p>
|
||||
<p className={cn(
|
||||
'text-xs font-medium mt-0.5',
|
||||
costChange.direction === 'up' ? 'text-[var(--dg-green)]' :
|
||||
costChange.direction === 'down' ? 'text-[var(--dg-red)]' :
|
||||
'text-[var(--dg-text-muted)]'
|
||||
)}>
|
||||
{costChange.label}
|
||||
</p>
|
||||
</div>
|
||||
@@ -106,7 +145,7 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">费用分布</p>
|
||||
<p className="text-sm text-[var(--dg-text-secondary)] mb-2">费用分布</p>
|
||||
<div className="h-[180px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
@@ -118,42 +157,27 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
outerRadius={70}
|
||||
paddingAngle={2}
|
||||
dataKey="value"
|
||||
stroke="none"
|
||||
>
|
||||
{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()}`}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-slate-400 mb-2">月度趋势</p>
|
||||
<p className="text-sm text-[var(--dg-text-secondary)] 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]} />
|
||||
<CartesianGrid strokeDasharray="3 3" className="chart-grid-stroke" stroke="var(--chart-grid)" />
|
||||
<XAxis dataKey="month" stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="cost" fill="var(--dg-blue)" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
@@ -164,9 +188,11 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
<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>
|
||||
<span className="text-sm text-[var(--dg-text-secondary)]">{item.name}</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-slate-100">¥{Number(item.value).toLocaleString()}</span>
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)]">
|
||||
¥{Number(item.value).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -175,7 +201,6 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Top5 资源使用卡片
|
||||
export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
||||
const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
|
||||
const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
|
||||
@@ -191,28 +216,32 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{icon}
|
||||
<span className="text-sm font-medium text-slate-300">{label}</span>
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-secondary)]">{label}</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2.5">
|
||||
{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 key={item.id ?? index} className="flex items-center gap-2.5">
|
||||
<span className="text-xs font-mono text-[var(--dg-text-muted)] w-5 text-center">
|
||||
{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">
|
||||
<p className="text-xs text-[var(--dg-text-secondary)] truncate font-medium">{item.hostname}</p>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<div className="flex-1 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${
|
||||
usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
|
||||
}`}
|
||||
style={{ width: `${usage}%` }}
|
||||
className={cn(
|
||||
'h-full rounded-full transition-all duration-500',
|
||||
usage > 80 ? 'bg-[var(--dg-red)]' : usage > 60 ? 'bg-[var(--dg-yellow)]' : BarColor
|
||||
)}
|
||||
style={{ width: `${Math.min(usage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className={`text-xs ${
|
||||
usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
|
||||
}`}>
|
||||
<span className={cn(
|
||||
'text-xs font-mono font-medium w-12 text-right',
|
||||
usage > 80 ? 'text-[var(--dg-red)]' : usage > 60 ? 'text-[var(--dg-yellow)]' : 'text-[var(--dg-text-muted)]'
|
||||
)}>
|
||||
{usage.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
@@ -225,55 +254,24 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
|
||||
);
|
||||
|
||||
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">Top5 资源使用</CardTitle>
|
||||
<CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">Top5 资源使用</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">CPU、内存、磁盘使用率最高</CardDescription>
|
||||
</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" />, '磁盘')}
|
||||
{renderList(topCpuServers, 'blue', 'bg-[var(--dg-blue)]', <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />, 'CPU')}
|
||||
{renderList(topMemoryServers, 'emerald', 'bg-[var(--dg-green)]', <MemoryStick className="h-4 w-4 text-[var(--dg-green)]" />, '内存')}
|
||||
{renderList(topDiskServers, 'purple', 'bg-[var(--dg-purple)]', <Database className="h-4 w-4 text-[var(--dg-purple)]" />, '磁盘')}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// 将后端 MetricData[] 时间序列转换为图表所需格式 { time, cpu, memory } // Logan.Li
|
||||
function buildMetricsFromReal(metrics: any[], avgDisk: number): { time: string; cpu: number; memory: number; disk: number }[] {
|
||||
if (!metrics || metrics.length === 0) return [];
|
||||
// 按 timestamp 分组：同一时刻有 cpu + memory 两条记录
|
||||
const buckets: Record<string, { cpu?: number; memory?: number }> = {};
|
||||
for (const m of metrics) {
|
||||
const ts = m.timestamp;
|
||||
if (!ts) continue;
|
||||
// 提取 HH:MM 格式作为 X 轴标签
|
||||
const d = new Date(ts);
|
||||
const label = `${d.getHours().toString().padStart(2, '0')}:00`;
|
||||
if (!buckets[label]) buckets[label] = {};
|
||||
if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
|
||||
if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
|
||||
}
|
||||
return Object.entries(buckets)
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.map(([time, v]) => ({
|
||||
time,
|
||||
cpu: Number((v.cpu ?? 0).toFixed(1)),
|
||||
memory: Number((v.memory ?? 0).toFixed(1)),
|
||||
disk: Number(avgDisk.toFixed(1)), // 磁盘无历史序列，用平均值
|
||||
}));
|
||||
}
|
||||
|
||||
// 资源使用率趋势卡片
|
||||
export function ResourceUsageCard({
|
||||
avgCpu,
|
||||
avgMemory,
|
||||
@@ -285,28 +283,27 @@ export function ResourceUsageCard({
|
||||
avgDisk: number;
|
||||
metrics?: any[];
|
||||
}) {
|
||||
// 优先使用真实 Agent 指标时间序列；无数据时回退到平均值生成（带随机波动） // Logan.Li
|
||||
const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
|
||||
const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
|
||||
|
||||
return (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
|
||||
<CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
|
||||
<CardTitle className="text-[var(--dg-text-primary)]">资源使用率趋势</CardTitle>
|
||||
<CardDescription className="text-[var(--dg-text-muted)]">过去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">
|
||||
<Badge variant="outline" className="dg-badge-blue border">
|
||||
<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">
|
||||
<Badge variant="outline" className="dg-badge-green border">
|
||||
<Activity className="h-3 w-3 mr-1" />
|
||||
内存
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
|
||||
<Badge variant="outline" className="dg-badge-purple border">
|
||||
<HardDrive className="h-3 w-3 mr-1" />
|
||||
磁盘
|
||||
</Badge>
|
||||
@@ -319,56 +316,25 @@ export function ResourceUsageCard({
|
||||
<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} />
|
||||
<stop offset="5%" stopColor="var(--dg-blue)" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="var(--dg-blue)" 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} />
|
||||
<stop offset="5%" stopColor="var(--dg-green)" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="var(--dg-green)" 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} />
|
||||
<stop offset="5%" stopColor="var(--dg-purple)" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="var(--dg-purple)" 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="磁盘"
|
||||
/>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
|
||||
<XAxis dataKey="time" stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} />
|
||||
<YAxis stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} unit="%" />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Area type="monotone" dataKey="cpu" stroke="var(--dg-blue)" fillOpacity={1} fill="url(#colorCpu)" strokeWidth={2} name="CPU" />
|
||||
<Area type="monotone" dataKey="memory" stroke="var(--dg-green)" fillOpacity={1} fill="url(#colorMemory)" strokeWidth={2} name="内存" />
|
||||
<Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name="磁盘" />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,40 @@
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { TrendingUp, TrendingDown } from 'lucide-react';
|
||||
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/**
|
||||
* StatCard - 优化后的统计卡片组件
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 dg-card 工具类替代硬编码样式
|
||||
* 2. 添加 hover 效果和点击交互
|
||||
* 3. 图标颜色通过主题变量映射
|
||||
* 4. 趋势显示更直观
|
||||
* 5. 添加 shimmer loading 效果支持
|
||||
*/
|
||||
|
||||
const colorClasses: Record<string, { bg: string; icon: string; glow: string }> = {
|
||||
blue: { bg: 'bg-[var(--dg-blue)]/10', icon: 'text-[var(--dg-blue)]', glow: 'shadow-[var(--dg-blue)]/10' },
|
||||
emerald: { bg: 'bg-[var(--dg-green)]/10', icon: 'text-[var(--dg-green)]', glow: 'shadow-[var(--dg-green)]/10' },
|
||||
amber: { bg: 'bg-[var(--dg-yellow)]/10', icon: 'text-[var(--dg-yellow)]', glow: 'shadow-[var(--dg-yellow)]/10' },
|
||||
rose: { bg: 'bg-[var(--dg-red)]/10', icon: 'text-[var(--dg-red)]', glow: 'shadow-[var(--dg-red)]/10' },
|
||||
purple: { bg: 'bg-[var(--dg-purple)]/10', icon: 'text-[var(--dg-purple)]', glow: 'shadow-[var(--dg-purple)]/10' },
|
||||
cyan: { bg: 'bg-[var(--dg-cyan)]/10', icon: 'text-[var(--dg-cyan)]', glow: 'shadow-[var(--dg-cyan)]/10' },
|
||||
orange: { bg: 'bg-[var(--dg-orange)]/10', icon: 'text-[var(--dg-orange)]', glow: 'shadow-[var(--dg-orange)]/10' },
|
||||
};
|
||||
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
description?: string;
|
||||
icon: React.ElementType;
|
||||
trend?: 'up' | 'down' | 'neutral';
|
||||
trendValue?: string;
|
||||
color: string;
|
||||
onClick?: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
// 统计卡片组件
|
||||
export function StatCard({
|
||||
title,
|
||||
value,
|
||||
@@ -11,56 +44,70 @@ export function StatCard({
|
||||
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];
|
||||
loading = false,
|
||||
}: StatCardProps) {
|
||||
const colors = colorClasses[color] || colorClasses.blue;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="dg-card overflow-hidden">
|
||||
<CardContent className="p-6 space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-3 flex-1">
|
||||
<div className="dg-skeleton h-4 w-24 rounded" />
|
||||
<div className="dg-skeleton h-8 w-16 rounded" />
|
||||
</div>
|
||||
<div className="dg-skeleton h-10 w-10 rounded-lg" />
|
||||
</div>
|
||||
<div className="dg-skeleton h-3 w-32 rounded" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;
|
||||
const trendColor = trend === 'up'
|
||||
? 'text-[var(--dg-green)]'
|
||||
: trend === 'down'
|
||||
? 'text-[var(--dg-red)]'
|
||||
: 'text-[var(--dg-text-muted)]';
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-all cursor-pointer"
|
||||
className={cn(
|
||||
'dg-card dg-card-hover cursor-pointer overflow-hidden',
|
||||
onClick && '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>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="space-y-3 min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-[var(--dg-text-secondary)] truncate">
|
||||
{title}
|
||||
</p>
|
||||
<div className="flex items-baseline gap-2 flex-wrap">
|
||||
<h3 className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
|
||||
{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}
|
||||
<span className={cn('flex items-center text-xs font-semibold gap-0.5', trendColor)}>
|
||||
<TrendIcon className="h-3.5 w-3.5" />
|
||||
{trendValue}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{description && <p className="text-xs text-slate-500">{description}</p>}
|
||||
{description && (
|
||||
<p className="text-xs text-[var(--dg-text-muted)]">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${colors.bg} ${colors.text}`}>
|
||||
<div
|
||||
className={cn(
|
||||
'p-3 rounded-xl flex-shrink-0',
|
||||
colors.bg,
|
||||
colors.icon,
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user