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,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { User, Lock, Palette, Check, Loader2, AlertCircle } from 'lucide-react';
|
||||
import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff } from 'lucide-react';
|
||||
import { useUserStore } from '@/store';
|
||||
import { userApi } from '@/services/api';
|
||||
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
||||
@@ -14,46 +14,7 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
/* ---------- Floating background orbs (themed light spots) ---------- */
|
||||
const ORBS = [
|
||||
{
|
||||
top: '-10%',
|
||||
left: '-5%',
|
||||
size: 520,
|
||||
color: 'var(--dg-blue)',
|
||||
opacity: 0.22,
|
||||
blur: 90,
|
||||
animation: 'login-orb-1 18s ease-in-out infinite',
|
||||
},
|
||||
{
|
||||
bottom: '-15%',
|
||||
right: '-8%',
|
||||
size: 480,
|
||||
color: 'var(--dg-purple)',
|
||||
opacity: 0.2,
|
||||
blur: 100,
|
||||
animation: 'login-orb-2 22s ease-in-out infinite',
|
||||
},
|
||||
{
|
||||
top: '30%',
|
||||
right: '10%',
|
||||
size: 320,
|
||||
color: 'var(--dg-cyan)',
|
||||
opacity: 0.16,
|
||||
blur: 70,
|
||||
animation: 'login-orb-3 16s ease-in-out infinite',
|
||||
},
|
||||
{
|
||||
bottom: '10%',
|
||||
left: '8%',
|
||||
size: 380,
|
||||
color: 'var(--dg-gradient-start)',
|
||||
opacity: 0.18,
|
||||
blur: 80,
|
||||
animation: 'login-orb-4 20s ease-in-out infinite',
|
||||
},
|
||||
];
|
||||
|
||||
/* ---------- CSS Animations ---------- */
|
||||
const ANIMATIONS = `
|
||||
@keyframes login-orb-1 {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
@@ -80,8 +41,31 @@ const ANIMATIONS = `
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes login-input-focus {
|
||||
from { box-shadow: 0 0 0 0px var(--dg-input-focus-ring); }
|
||||
to { box-shadow: 0 0 0 4px var(--dg-input-focus-ring); }
|
||||
}
|
||||
`;
|
||||
|
||||
/* ---------- Floating background orbs ---------- */
|
||||
const ORBS = [
|
||||
{ top: '-10%', left: '-5%', size: 520, color: 'var(--dg-blue)', opacity: 0.18, blur: 90, animation: 'login-orb-1 18s ease-in-out infinite' },
|
||||
{ bottom: '-15%', right: '-8%', size: 480, color: 'var(--dg-purple)', opacity: 0.16, blur: 100, animation: 'login-orb-2 22s ease-in-out infinite' },
|
||||
{ top: '30%', right: '10%', size: 320, color: 'var(--dg-cyan)', opacity: 0.12, blur: 70, animation: 'login-orb-3 16s ease-in-out infinite' },
|
||||
{ bottom: '10%', left: '8%', size: 380, color: 'var(--dg-gradient-start)', opacity: 0.14, blur: 80, animation: 'login-orb-4 20s ease-in-out infinite' },
|
||||
];
|
||||
|
||||
/**
|
||||
* Login - 优化后的登录页面
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 glass 效果替代简单的半透明背景
|
||||
* 2. 输入框使用 dg-input 工具类
|
||||
* 3. 密码显示/隐藏使用图标按钮
|
||||
* 4. 主题切换更精致
|
||||
* 5. 错误提示动画更流畅
|
||||
* 6. 背景光球动画更协调
|
||||
*/
|
||||
export function Login() {
|
||||
const navigate = useNavigate();
|
||||
const { theme, setTheme } = useTheme();
|
||||
@@ -90,6 +74,11 @@ export function Login() {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -98,7 +87,7 @@ export function Login() {
|
||||
try {
|
||||
const result = await userApi.login(username, password);
|
||||
useUserStore.getState().login(result.user, result.token);
|
||||
localStorage.setItem('token', result.token); // backward compat
|
||||
localStorage.setItem('token', result.token);
|
||||
navigate('/', { replace: true });
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : '登录失败，请检查用户名和密码';
|
||||
@@ -115,11 +104,10 @@ export function Login() {
|
||||
<div
|
||||
className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(135deg, var(--dg-bg-primary) 0%, var(--dg-bg-secondary) 100%)',
|
||||
background: `radial-gradient(ellipse at 50% 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-secondary')} 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-primary')} 100%)`,
|
||||
}}
|
||||
>
|
||||
{/* -------- Floating themed light spots -------- */}
|
||||
{/* Floating light spots */}
|
||||
{ORBS.map((orb, i) => (
|
||||
<div
|
||||
key={`orb-${i}`}
|
||||
@@ -134,15 +122,16 @@ export function Login() {
|
||||
height: orb.size,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
|
||||
opacity: orb.opacity,
|
||||
opacity: mounted ? orb.opacity : 0,
|
||||
filter: `blur(${orb.blur}px)`,
|
||||
animation: orb.animation,
|
||||
willChange: 'transform',
|
||||
transition: 'opacity 1s ease-out',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* -------- Theme switcher (top-right) -------- */}
|
||||
{/* Theme switcher */}
|
||||
<div
|
||||
className="fixed top-4 right-4 z-50"
|
||||
style={{ animation: 'login-fade-in 0.6s ease-out' }}
|
||||
@@ -154,77 +143,75 @@ export function Login() {
|
||||
aria-label="切换主题"
|
||||
className={cn(
|
||||
'inline-flex items-center justify-center size-10 rounded-full',
|
||||
'border transition-all duration-200 hover:scale-105 active:scale-95'
|
||||
'border border-[var(--dg-border)] transition-all duration-200',
|
||||
'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
|
||||
'glass'
|
||||
)}
|
||||
style={{
|
||||
background: 'color-mix(in srgb, var(--dg-bg-secondary) 70%, transparent)',
|
||||
borderColor: 'var(--dg-border)',
|
||||
color: 'var(--dg-text-secondary)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
WebkitBackdropFilter: 'blur(12px)',
|
||||
}}
|
||||
style={{ color: 'var(--dg-text-secondary)' }}
|
||||
>
|
||||
<Palette className="size-5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-60">
|
||||
<DropdownMenuLabel>主题切换</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
||||
>
|
||||
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">主题切换</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
||||
{THEME_OPTIONS.map((option) => (
|
||||
<DropdownMenuItem
|
||||
key={option.id}
|
||||
className="flex items-center gap-2.5 cursor-pointer"
|
||||
className={cn(
|
||||
'flex items-center gap-2.5 cursor-pointer transition-colors',
|
||||
'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
|
||||
theme === option.id ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]',
|
||||
)}
|
||||
onClick={() => setTheme(option.id)}
|
||||
>
|
||||
<span
|
||||
className="size-3.5 rounded-full shrink-0 ring-2"
|
||||
style={{
|
||||
backgroundColor: option.primaryColor,
|
||||
// @ts-expect-error css var in style string
|
||||
'--tw-ring-color': 'var(--dg-bg-primary)',
|
||||
boxShadow: '0 0 0 2px var(--dg-bg-primary)',
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-medium block">{option.name}</span>
|
||||
<span className="text-xs opacity-60 block truncate">
|
||||
{option.description}
|
||||
</span>
|
||||
<span className="text-xs opacity-60 block truncate">{option.description}</span>
|
||||
</div>
|
||||
{theme === option.id && <Check className="size-4 shrink-0" />}
|
||||
{theme === option.id && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* -------- Login card -------- */}
|
||||
{/* Login card */}
|
||||
<div
|
||||
className="relative z-10 w-full max-w-md"
|
||||
style={{
|
||||
background:
|
||||
'color-mix(in srgb, var(--dg-bg-secondary) 75%, transparent)',
|
||||
background: 'color-mix(in srgb, var(--dg-bg-secondary) 80%, transparent)',
|
||||
backdropFilter: 'blur(24px)',
|
||||
WebkitBackdropFilter: 'blur(24px)',
|
||||
border: '1px solid var(--dg-border)',
|
||||
borderRadius: 24,
|
||||
boxShadow:
|
||||
'0 8px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.02)',
|
||||
padding: '40px 36px',
|
||||
boxShadow: 'var(--shadow-card-hover)',
|
||||
padding: '44px 40px',
|
||||
animation: 'login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
}}
|
||||
>
|
||||
{/* Brand */}
|
||||
<div className="text-center mb-8">
|
||||
<div
|
||||
className="inline-flex items-center justify-center size-14 rounded-2xl mb-4 shadow-lg"
|
||||
className="inline-flex items-center justify-center size-16 rounded-2xl mb-5"
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
|
||||
boxShadow: '0 8px 24px color-mix(in srgb, var(--dg-gradient-start) 35%, transparent)',
|
||||
background: 'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
|
||||
boxShadow: '0 8px 32px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className="size-7 text-white"
|
||||
className="size-8 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -238,10 +225,7 @@ export function Login() {
|
||||
<h1 className="text-3xl font-bold dg-gradient-text tracking-tight">
|
||||
AIOps
|
||||
</h1>
|
||||
<p
|
||||
className="mt-2 text-sm"
|
||||
style={{ color: 'var(--dg-text-secondary)' }}
|
||||
>
|
||||
<p className="mt-2.5 text-sm text-[var(--dg-text-secondary)]">
|
||||
智能运维 · 全栈可观测平台
|
||||
</p>
|
||||
</div>
|
||||
@@ -251,12 +235,11 @@ export function Login() {
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div
|
||||
className="flex items-start gap-2 rounded-lg px-4 py-3 text-sm"
|
||||
className="flex items-start gap-2.5 rounded-xl px-4 py-3 text-sm animate-fade-in"
|
||||
style={{
|
||||
background: 'color-mix(in srgb, var(--dg-red) 12%, transparent)',
|
||||
border: '1px solid color-mix(in srgb, var(--dg-red) 30%, transparent)',
|
||||
background: 'color-mix(in srgb, var(--dg-red) 10%, transparent)',
|
||||
border: '1px solid color-mix(in srgb, var(--dg-red) 25%, transparent)',
|
||||
color: 'var(--dg-red)',
|
||||
animation: 'login-fade-in 0.25s ease-out',
|
||||
}}
|
||||
>
|
||||
<AlertCircle className="size-4 shrink-0 mt-0.5" />
|
||||
@@ -265,17 +248,13 @@ export function Login() {
|
||||
)}
|
||||
|
||||
{/* Username */}
|
||||
<div>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1.5"
|
||||
style={{ color: 'var(--dg-text-secondary)' }}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
|
||||
用户名
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User
|
||||
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none"
|
||||
style={{ color: 'var(--dg-text-muted)' }}
|
||||
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
@@ -284,23 +263,19 @@ export function Login() {
|
||||
placeholder="请输入用户名"
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
className="dg-input w-full rounded-lg py-2.5 pl-10 pr-4 text-sm transition-colors"
|
||||
className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label
|
||||
className="block text-sm font-medium mb-1.5"
|
||||
style={{ color: 'var(--dg-text-secondary)' }}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
|
||||
密码
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock
|
||||
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none"
|
||||
style={{ color: 'var(--dg-text-muted)' }}
|
||||
className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
|
||||
/>
|
||||
<input
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
@@ -308,15 +283,15 @@ export function Login() {
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
autoComplete="current-password"
|
||||
className="dg-input w-full rounded-lg py-2.5 pl-10 pr-12 text-sm transition-colors"
|
||||
className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((v) => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium transition-colors"
|
||||
style={{ color: 'var(--dg-text-muted)' }}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)] transition-colors"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? '隐藏' : '显示'}
|
||||
{showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -326,20 +301,20 @@ export function Login() {
|
||||
type="submit"
|
||||
disabled={loading || !username || !password}
|
||||
className={cn(
|
||||
'dg-gradient-bg w-full rounded-lg py-3 mt-2 text-white font-semibold text-[15px]',
|
||||
'transition-all duration-200 active:scale-[0.98]',
|
||||
'disabled:cursor-not-allowed'
|
||||
'dg-gradient-bg w-full rounded-xl py-3 mt-2 text-white font-semibold text-[15px]',
|
||||
'transition-all duration-200 active:scale-[0.98] disabled:cursor-not-allowed',
|
||||
)}
|
||||
style={{
|
||||
opacity: loading || !username || !password ? 0.6 : 1,
|
||||
boxShadow:
|
||||
'0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
|
||||
boxShadow: loading || !username || !password
|
||||
? 'none'
|
||||
: '0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="inline-flex items-center justify-center gap-2">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
登录中…
|
||||
登录中...
|
||||
</span>
|
||||
) : (
|
||||
'登 录'
|
||||
@@ -356,7 +331,8 @@ export function Login() {
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
默认管理员账号 <span className="font-medium" style={{ color: 'var(--dg-text-secondary)' }}>admin / 123456</span>
|
||||
默认管理员账号{' '}
|
||||
<span className="font-medium text-[var(--dg-text-secondary)]">admin / 123456</span>
|
||||
</p>
|
||||
<p>LDAP 用户可直接使用域账号登录</p>
|
||||
</div>
|
||||
@@ -365,9 +341,9 @@ export function Login() {
|
||||
{/* Footer */}
|
||||
<p
|
||||
className="absolute bottom-4 left-0 right-0 text-center text-xs"
|
||||
style={{ color: 'var(--dg-text-muted)', opacity: 0.7 }}
|
||||
style={{ color: 'var(--dg-text-muted)', opacity: 0.5 }}
|
||||
>
|
||||
© AIOps · 智能运维平台
|
||||
© AIOps 智能运维平台
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,157 @@
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { ChevronRight, Home } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
/**
|
||||
* Route name mapping - breadcrumb display names
|
||||
*/
|
||||
const ROUTE_NAME_MAP: Record<string, string> = {
|
||||
'': '仪表盘',
|
||||
'servers': '服务器管理',
|
||||
'cloud-accounts': '云账号管理',
|
||||
'domains': '域名管理',
|
||||
'regions': '区域管理',
|
||||
'platforms': '云平台',
|
||||
'cloud-billing': '云账单',
|
||||
'kubernetes': 'Kubernetes',
|
||||
'clusters': '集群列表',
|
||||
'nodes': '节点管理',
|
||||
'workloads': '工作负载',
|
||||
'deployments': 'Deployments',
|
||||
'statefulsets': 'StatefulSets',
|
||||
'daemonsets': 'DaemonSets',
|
||||
'cronjobs': '定时任务',
|
||||
'services': 'Services',
|
||||
'ingresses': 'Ingresses',
|
||||
'configmaps': 'ConfigMaps',
|
||||
'secrets': 'Secrets',
|
||||
'hpas': 'HPA',
|
||||
'pvcs': '存储',
|
||||
'metrics': '资源用量',
|
||||
'events': '事件',
|
||||
'capacity': '容量分析',
|
||||
'topology': '架构拓扑',
|
||||
'namespace': '命名空间',
|
||||
'workload': '工作负载',
|
||||
'view': '查看',
|
||||
'edit': '编辑',
|
||||
'pipelines': '流水线',
|
||||
'deploy': '应用发布',
|
||||
'configureTools': '发布配置',
|
||||
'groups': '用户组',
|
||||
'rbac': '权限管理',
|
||||
'monitor-center': '资源监控',
|
||||
'trace': '链路追踪',
|
||||
'alert-center': '告警中心',
|
||||
'datasources': '数据源',
|
||||
'dashboards': '监控大屏',
|
||||
'host-monitor': '主机监控',
|
||||
'alerts': '监控告警',
|
||||
'approval': '资源申请',
|
||||
'scripts': '脚本库',
|
||||
'ansible': 'Ansible',
|
||||
'ai-assistant': '智能助手',
|
||||
'ai-alert-analyzer': '告警分析',
|
||||
'ai-predictive': '容量预测',
|
||||
'users': '用户管理',
|
||||
'roles': '角色权限',
|
||||
'logs-audit': '操作审计',
|
||||
'terminal-audit': '终端审计',
|
||||
'credentials': '凭证配置',
|
||||
'settings': '系统设置',
|
||||
};
|
||||
|
||||
interface BreadcrumbItem {
|
||||
name: string;
|
||||
path: string;
|
||||
isLast: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumb - 智能面包屑导航
|
||||
*
|
||||
* 根据当前路由自动生成面包屑路径
|
||||
* 支持动态参数（如 clusterCode, namespace, name）显示
|
||||
*/
|
||||
export function Breadcrumb() {
|
||||
const location = useLocation();
|
||||
|
||||
const breadcrumbs = useMemo<BreadcrumbItem[]>(() => {
|
||||
const paths = location.pathname.split('/').filter(Boolean);
|
||||
if (paths.length === 0) {
|
||||
return [{ name: '仪表盘', path: '/', isLast: true }];
|
||||
}
|
||||
|
||||
const items: BreadcrumbItem[] = [];
|
||||
let currentPath = '';
|
||||
|
||||
paths.forEach((segment, index) => {
|
||||
currentPath += `/${segment}`;
|
||||
const isLast = index === paths.length - 1;
|
||||
|
||||
// Check if it's a dynamic parameter (looks like an identifier, not a known route)
|
||||
const knownName = ROUTE_NAME_MAP[segment];
|
||||
let displayName = knownName;
|
||||
|
||||
if (!displayName) {
|
||||
// Dynamic parameter - could be cluster code, namespace, resource name, etc.
|
||||
if (segment.length > 20 || segment.includes('-')) {
|
||||
// Likely a UUID or complex identifier - truncate
|
||||
displayName = segment.length > 15 ? `${segment.slice(0, 12)}...` : segment;
|
||||
} else {
|
||||
displayName = segment;
|
||||
}
|
||||
}
|
||||
|
||||
items.push({
|
||||
name: displayName,
|
||||
path: currentPath,
|
||||
isLast,
|
||||
});
|
||||
});
|
||||
|
||||
return items;
|
||||
}, [location.pathname]);
|
||||
|
||||
// Don't show breadcrumb on dashboard (root path)
|
||||
if (breadcrumbs.length <= 1 && location.pathname === '/') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
aria-label="面包屑导航"
|
||||
className="flex items-center gap-1.5 text-sm animate-fade-in"
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-1 text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200"
|
||||
title="仪表盘"
|
||||
>
|
||||
<Home className="h-3.5 w-3.5" />
|
||||
</Link>
|
||||
|
||||
{breadcrumbs.map((item) => (
|
||||
<div key={item.path} className="flex items-center gap-1.5">
|
||||
<ChevronRight className="h-3.5 w-3.5 text-[var(--dg-border)] flex-shrink-0" />
|
||||
{item.isLast ? (
|
||||
<span
|
||||
className="text-[var(--dg-text-primary)] font-medium truncate max-w-[200px] sm:max-w-[300px] md:max-w-[400px]"
|
||||
title={item.name}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
to={item.path}
|
||||
className="text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200 truncate max-w-[150px]"
|
||||
title={item.name}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { Component, type ErrorInfo, type ReactNode } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { AlertTriangle, RotateCcw, Home, Bug } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
errorInfo: ErrorInfo | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* ErrorBoundary - 全局错误边界组件
|
||||
*
|
||||
* 捕获 React 组件树中的错误，防止整个应用崩溃
|
||||
* 提供友好的错误提示和恢复操作
|
||||
*/
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null, errorInfo: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error, errorInfo: null };
|
||||
}
|
||||
|
||||
override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error('[ErrorBoundary] 捕获到错误:', error);
|
||||
console.error('[ErrorBoundary] 错误信息:', errorInfo.componentStack);
|
||||
this.setState({ error, errorInfo });
|
||||
}
|
||||
|
||||
handleRetry = () => {
|
||||
this.setState({ hasError: false, error: null, errorInfo: null });
|
||||
};
|
||||
|
||||
handleGoHome = () => {
|
||||
window.location.href = '/';
|
||||
};
|
||||
|
||||
handleReport = () => {
|
||||
const { error, errorInfo } = this.state;
|
||||
const body = `## 错误报告\n\n**时间:** ${new Date().toISOString()}\n**URL:** ${window.location.href}\n**用户代理:** ${navigator.userAgent}\n\n### 错误信息\n\n\`\`\`\n${error?.name}: ${error?.message}\n\`\`\`\n\n### 组件堆栈\n\n\`\`\`\n${errorInfo?.componentStack}\n\`\`\`\n`;
|
||||
navigator.clipboard.writeText(body).then(() => {
|
||||
alert('错误信息已复制到剪贴板，请粘贴到 Issue 中');
|
||||
});
|
||||
};
|
||||
|
||||
override render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-[60vh] flex items-center justify-center p-6">
|
||||
<div className="dg-card max-w-lg w-full p-8 text-center space-y-6">
|
||||
{/* Error Icon */}
|
||||
<div className="mx-auto w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center">
|
||||
<AlertTriangle className="h-8 w-8 text-red-400" />
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-[var(--dg-text-primary)]">
|
||||
页面出现错误
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--dg-text-muted)] mt-2">
|
||||
抱歉，该页面遇到了意外错误。您可以尝试重新加载或返回首页。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Detail (collapsible) */}
|
||||
{this.state.error && (
|
||||
<div className="text-left">
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer text-xs text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors flex items-center gap-1.5">
|
||||
<Bug className="h-3.5 w-3.5" />
|
||||
查看错误详情
|
||||
</summary>
|
||||
<div className="mt-2 p-3 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] overflow-auto max-h-48">
|
||||
<code className="text-xs text-red-400 font-mono block whitespace-pre-wrap">
|
||||
{this.state.error.name}: {this.state.error.message}
|
||||
</code>
|
||||
{this.state.errorInfo && (
|
||||
<pre className="text-xs text-[var(--dg-text-muted)] mt-2 whitespace-pre-wrap">
|
||||
{this.state.errorInfo.componentStack}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="dg-btn-secondary"
|
||||
onClick={this.handleGoHome}
|
||||
>
|
||||
<Home className="h-4 w-4 mr-1.5" />
|
||||
返回首页
|
||||
</Button>
|
||||
<Button
|
||||
className="dg-btn-primary"
|
||||
onClick={this.handleRetry}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-1.5" />
|
||||
重新加载
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="dg-btn-ghost"
|
||||
onClick={this.handleReport}
|
||||
>
|
||||
<Bug className="h-4 w-4 mr-1.5" />
|
||||
复制错误
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -26,16 +26,48 @@ import {
|
||||
CheckCircle,
|
||||
Palette,
|
||||
Check,
|
||||
X,
|
||||
Keyboard,
|
||||
} from 'lucide-react';
|
||||
import { formatDistanceToNow } from '@/lib/utils';
|
||||
import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
|
||||
|
||||
// Keyboard shortcut handler
|
||||
function useKeyboardShortcuts() {
|
||||
const navigate = useNavigate();
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
// Cmd/Ctrl + K to open search
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
setSearchOpen((prev) => !prev);
|
||||
}
|
||||
// Cmd/Ctrl + B to toggle sidebar
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
|
||||
e.preventDefault();
|
||||
// Dispatch custom event for sidebar toggle
|
||||
window.dispatchEvent(new CustomEvent('toggle-sidebar'));
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, []);
|
||||
|
||||
return { searchOpen, setSearchOpen };
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
|
||||
const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
|
||||
const { user, logout } = useUserStore();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchFocused, setSearchFocused] = useState(false);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
const { searchOpen, setSearchOpen } = useKeyboardShortcuts();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
@@ -44,7 +76,7 @@ export function Header() {
|
||||
|
||||
const displayName = user?.real_name || user?.username || '管理员';
|
||||
|
||||
const getNotificationIcon = (type: string) => {
|
||||
const getNotificationIcon = useCallback((type: string) => {
|
||||
switch (type) {
|
||||
case 'error':
|
||||
return <AlertTriangle className="h-4 w-4 text-red-500" />;
|
||||
@@ -55,73 +87,166 @@ export function Header() {
|
||||
default:
|
||||
return <Info className="h-4 w-4 text-blue-500" />;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Quick nav items for search
|
||||
const quickNavItems = [
|
||||
{ name: '仪表盘', path: '/', icon: 'LayoutDashboard' },
|
||||
{ name: '服务器管理', path: '/servers', icon: 'Server' },
|
||||
{ name: 'Kubernetes 集群', path: '/kubernetes', icon: 'Cloud' },
|
||||
{ name: '监控告警', path: '/alerts', icon: 'Bell' },
|
||||
{ name: '告警中心', path: '/alert-center', icon: 'AlertTriangle' },
|
||||
{ name: '流水线', path: '/pipelines', icon: 'GitBranch' },
|
||||
{ name: '智能助手', path: '/ai-assistant', icon: 'Brain' },
|
||||
{ name: '脚本库', path: '/scripts', icon: 'FileCode' },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 right-0 left-0 z-30 h-14 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-slate-800 transition-all duration-300"
|
||||
style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
|
||||
<header
|
||||
className={cn(
|
||||
'fixed top-0 right-0 z-30 h-[var(--header-height)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur-md',
|
||||
'border-b border-[var(--dg-border)] transition-[margin] duration-300 ease-in-out',
|
||||
'supports-[backdrop-filter]:bg-[var(--dg-bg-secondary)]/75',
|
||||
)}
|
||||
style={{ marginLeft: 'var(--sidebar-width)', left: 0 }}
|
||||
>
|
||||
<div className="flex items-center justify-between h-full px-4">
|
||||
{/* Left: Toggle & Search */}
|
||||
<div className="flex items-center gap-3 flex-1">
|
||||
{sidebarCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-slate-400 hover:text-slate-100"
|
||||
onClick={toggleSidebar}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||
{/* Sidebar Toggle */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
|
||||
onClick={toggleSidebar}
|
||||
title={sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* Global Search */}
|
||||
<div className="relative w-96 max-w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
|
||||
<div className={cn(
|
||||
'relative transition-all duration-300',
|
||||
searchFocused ? 'w-[28rem] max-w-full' : 'w-80'
|
||||
)}>
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)] pointer-events-none" />
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="搜索服务器、应用、工单、文档..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus-visible:ring-blue-500/30"
|
||||
onFocus={() => setSearchFocused(true)}
|
||||
onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
|
||||
className={cn(
|
||||
'pl-9 h-9 text-sm transition-all duration-300',
|
||||
'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]',
|
||||
'text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]',
|
||||
'focus:border-[var(--dg-blue)] focus:ring-1 focus:ring-[var(--dg-blue)]/30',
|
||||
'hover:border-[var(--dg-border-hover)]',
|
||||
)}
|
||||
/>
|
||||
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-xs font-mono text-slate-500 bg-slate-800 rounded">
|
||||
<kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono text-[var(--dg-text-muted)] bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded hidden sm:inline-block">
|
||||
⌘K
|
||||
</kbd>
|
||||
</div>
|
||||
|
||||
{/* Search Dropdown */}
|
||||
{searchFocused && searchValue && (
|
||||
<div
|
||||
className={cn(
|
||||
'absolute top-full left-0 right-0 mt-2 py-2 rounded-lg',
|
||||
'bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]',
|
||||
'shadow-lg z-50 animate-scale-in',
|
||||
)}
|
||||
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
||||
>
|
||||
<div className="px-3 py-1.5 text-xs font-medium text-[var(--dg-text-muted)] uppercase tracking-wider">
|
||||
快速导航
|
||||
</div>
|
||||
{quickNavItems
|
||||
.filter((item) =>
|
||||
item.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)
|
||||
.map((item) => (
|
||||
<button
|
||||
key={item.path}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-2.5 px-3 py-2 text-sm',
|
||||
'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]',
|
||||
'hover:bg-[var(--dg-bg-hover)] transition-colors text-left',
|
||||
)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(item.path);
|
||||
setSearchValue('');
|
||||
setSearchFocused(false);
|
||||
}}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
{quickNavItems.filter((item) =>
|
||||
item.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
).length === 0 && (
|
||||
<div className="px-3 py-4 text-center text-sm text-[var(--dg-text-muted)]">
|
||||
未找到匹配的结果
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1.5 flex-shrink-0">
|
||||
{/* Theme Switcher */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
||||
title="切换主题"
|
||||
>
|
||||
<Palette className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-56 bg-slate-800 border-slate-700">
|
||||
<DropdownMenuLabel className="text-slate-300">主题切换</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
||||
>
|
||||
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">主题切换</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
||||
{THEME_OPTIONS.map((option) => (
|
||||
<DropdownMenuItem
|
||||
key={option.id}
|
||||
className={cn(
|
||||
'flex items-center gap-2 cursor-pointer focus:bg-slate-700 focus:text-slate-100',
|
||||
theme === option.id ? 'text-slate-100' : 'text-slate-300'
|
||||
'flex items-center gap-2.5 cursor-pointer transition-colors',
|
||||
'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
|
||||
theme === option.id
|
||||
? 'text-[var(--dg-text-primary)]'
|
||||
: 'text-[var(--dg-text-secondary)]',
|
||||
)}
|
||||
onClick={() => setTheme(option.id)}
|
||||
>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full shrink-0 ring-2 ring-slate-900"
|
||||
style={{ backgroundColor: option.primaryColor }}
|
||||
className="w-3.5 h-3.5 rounded-full shrink-0 ring-2"
|
||||
style={{
|
||||
backgroundColor: option.primaryColor,
|
||||
boxShadow: '0 0 0 2px var(--dg-bg-primary)',
|
||||
}}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-medium">{option.name}</span>
|
||||
<span className="block text-xs text-slate-500 truncate">{option.description}</span>
|
||||
<span className="block text-xs text-[var(--dg-text-muted)] truncate">
|
||||
{option.description}
|
||||
</span>
|
||||
</div>
|
||||
{theme === option.id && <Check className="h-4 w-4 text-blue-400 shrink-0" />}
|
||||
{theme === option.id && (
|
||||
<Check className="h-4 w-4 text-[var(--dg-blue)] shrink-0" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
@@ -130,101 +255,163 @@ export function Header() {
|
||||
{/* Notifications */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100 relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] relative"
|
||||
title="通知"
|
||||
>
|
||||
<Bell className="h-4 w-4" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-medium text-white flex items-center justify-center">
|
||||
<span className="absolute -top-0.5 -right-0.5 h-4.5 w-4.5 rounded-full bg-red-500 text-[10px] font-semibold text-white flex items-center justify-center animate-scale-in">
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-80 bg-slate-800 border-slate-700">
|
||||
<DropdownMenuLabel className="flex items-center justify-between text-slate-300">
|
||||
<span>通知</span>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-96 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0"
|
||||
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--dg-border)]">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)]">
|
||||
通知
|
||||
</span>
|
||||
{unreadCount > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 text-xs text-slate-400 hover:text-slate-100"
|
||||
className="h-7 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
||||
onClick={markAllAsRead}
|
||||
>
|
||||
<CheckCheck className="h-3 w-3 mr-1" />
|
||||
<CheckCheck className="h-3.5 w-3.5 mr-1" />
|
||||
全部已读
|
||||
</Button>
|
||||
)}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
</div>
|
||||
|
||||
{/* Notification List */}
|
||||
<div className="max-h-80 overflow-y-auto scrollbar-thin">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="py-8 text-center text-slate-500">
|
||||
<Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
||||
<div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
|
||||
<Bell className="h-10 w-10 mb-3 opacity-30" />
|
||||
<p className="text-sm">暂无通知</p>
|
||||
</div>
|
||||
) : (
|
||||
notifications.slice(0, 10).map((notification) => (
|
||||
<DropdownMenuItem
|
||||
<div
|
||||
key={notification.id}
|
||||
className={cn(
|
||||
'flex items-start gap-3 p-3 cursor-pointer focus:bg-slate-700',
|
||||
!notification.read && 'bg-slate-700/30'
|
||||
'flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors',
|
||||
'hover:bg-[var(--dg-bg-hover)] border-b border-[var(--dg-border)] last:border-0',
|
||||
!notification.read && 'bg-[var(--dg-blue)]/[0.04]',
|
||||
)}
|
||||
onClick={() => markAsRead(notification.id)}
|
||||
>
|
||||
{getNotificationIcon(notification.type)}
|
||||
<div className="mt-0.5 flex-shrink-0">
|
||||
{getNotificationIcon(notification.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={cn('text-sm font-medium', !notification.read ? 'text-slate-200' : 'text-slate-400')}>
|
||||
<p
|
||||
className={cn(
|
||||
'text-sm font-medium',
|
||||
!notification.read
|
||||
? 'text-[var(--dg-text-primary)]'
|
||||
: 'text-[var(--dg-text-secondary)]',
|
||||
)}
|
||||
>
|
||||
{notification.title}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notification.message}</p>
|
||||
<p className="text-xs text-slate-600 mt-1">
|
||||
<p className="text-xs text-[var(--dg-text-muted)] mt-0.5 line-clamp-2">
|
||||
{notification.message}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--dg-text-muted)]/60 mt-1">
|
||||
{formatDistanceToNow(notification.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
{!notification.read && (
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500 mt-1" />
|
||||
<span className="w-2 h-2 rounded-full bg-[var(--dg-blue)] mt-2 flex-shrink-0" />
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="px-4 py-2 border-t border-[var(--dg-border)] text-center">
|
||||
<button
|
||||
className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors"
|
||||
onClick={() => navigate('/alert-center')}
|
||||
>
|
||||
查看全部通知
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Separator orientation="vertical" className="h-6 bg-slate-800" />
|
||||
<Separator orientation="vertical" className="h-5 bg-[var(--dg-border)] mx-1" />
|
||||
|
||||
{/* User Menu */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 gap-2 px-2 text-slate-300 hover:text-slate-100">
|
||||
<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-medium">
|
||||
{displayName.charAt(0)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 gap-2 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
|
||||
>
|
||||
<div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-xs font-bold">
|
||||
{displayName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<span className="hidden md:inline text-sm">{displayName}</span>
|
||||
<span className="hidden md:inline text-sm max-w-[100px] truncate">
|
||||
{displayName}
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
|
||||
<DropdownMenuLabel className="text-slate-300">我的账号</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<User className="h-4 w-4 mr-2" />
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-52 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
|
||||
style={{ boxShadow: 'var(--shadow-dropdown)' }}
|
||||
>
|
||||
<DropdownMenuLabel className="text-[var(--dg-text-secondary)]">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium text-[var(--dg-text-primary)]">
|
||||
{displayName}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--dg-text-muted)] truncate">
|
||||
{user?.email || user?.username || ''}
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
||||
<DropdownMenuItem
|
||||
className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
|
||||
onClick={() => navigate('/users')}
|
||||
>
|
||||
<User className="h-4 w-4 mr-2.5" />
|
||||
个人中心
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
<DropdownMenuItem
|
||||
className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
|
||||
onClick={() => navigate('/settings')}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2.5" />
|
||||
账号设置
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="bg-slate-700" />
|
||||
<DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400" onClick={handleLogout}>
|
||||
<LogOut className="h-4 w-4 mr-2" />
|
||||
<DropdownMenuSeparator className="bg-[var(--dg-border)]" />
|
||||
<DropdownMenuItem
|
||||
className="text-red-400 focus:bg-red-500/10 focus:text-red-400 cursor-pointer"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="h-4 w-4 mr-2.5" />
|
||||
退出登录
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs 已移除 — 侧边栏导航已足够，tab 栏多余且遮挡内容 */}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -3,28 +3,54 @@ import { cn } from '@/lib/utils';
|
||||
import { useThemeStore } from '@/store';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { Header } from './Header';
|
||||
import { Breadcrumb } from './Breadcrumb';
|
||||
|
||||
/**
|
||||
* MainLayout - 优化后的主布局组件
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 CSS 变量 + Tailwind 类替代硬编码的 style 属性
|
||||
* 2. sidebar 宽度通过 CSS 变量管理，统一协调
|
||||
* 3. 添加 Breadcrumb 面包屑导航
|
||||
* 4. 布局过渡动画平滑
|
||||
* 5. 支持响应式布局
|
||||
*/
|
||||
export function MainLayout() {
|
||||
const { sidebarCollapsed } = useThemeStore();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950">
|
||||
<div
|
||||
className="min-h-screen bg-[var(--dg-bg-primary)] transition-colors duration-300"
|
||||
style={{
|
||||
'--sidebar-width': sidebarCollapsed ? '4rem' : '16rem',
|
||||
'--header-height': '3.5rem',
|
||||
} as React.CSSProperties}
|
||||
>
|
||||
<Sidebar />
|
||||
<div
|
||||
className="transition-all duration-300"
|
||||
style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
|
||||
className={cn(
|
||||
'flex flex-col min-h-screen transition-[margin] duration-300 ease-in-out',
|
||||
)}
|
||||
style={{ marginLeft: 'var(--sidebar-width)' }}
|
||||
>
|
||||
<Header />
|
||||
<main
|
||||
className={cn(
|
||||
'pt-14 transition-all duration-300',
|
||||
'min-h-[calc(100vh-3.5rem)]'
|
||||
)}
|
||||
>
|
||||
<main className="flex-1 pt-[var(--header-height)]">
|
||||
{/* Breadcrumb Navigation */}
|
||||
<div className="px-6 pt-4 pb-0">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
{/* Page Content */}
|
||||
<div className="p-6">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
{/* Footer */}
|
||||
<footer className="px-6 py-4 border-t border-[var(--dg-border)] mt-auto">
|
||||
<div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)]">
|
||||
<span>AIOps 智能运维平台</span>
|
||||
<span>v1.0.0</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useRef, useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
/**
|
||||
* PageTransition - 页面切换过渡动画包装器
|
||||
*
|
||||
* 使用 IntersectionObserver + CSS animation 实现平滑的页面进入动画
|
||||
* 所有子页面自动获得 fade-in 动画效果
|
||||
*/
|
||||
export function PageTransition({ children, key }: { children: React.ReactNode; key?: string }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const location = useLocation();
|
||||
const transitionKey = key || location.pathname;
|
||||
|
||||
useEffect(() => {
|
||||
// Reset visibility on route change
|
||||
setIsVisible(false);
|
||||
const timer = setTimeout(() => setIsVisible(true), 30);
|
||||
return () => clearTimeout(timer);
|
||||
}, [transitionKey]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`transition-all duration-350 ease-out ${
|
||||
isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
|
||||
}`}
|
||||
style={{ willChange: 'opacity, transform' }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { NavLink, useLocation } from 'react-router-dom';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useThemeStore, useMenuStore } from '@/store';
|
||||
@@ -9,10 +9,10 @@ import {
|
||||
Menu, Network, CloudCog, Globe, MapPin, Key,
|
||||
Brain, Activity, BarChart3, GitBranch,
|
||||
Bot, AlertTriangle, Container, Boxes, Clock, Rocket,
|
||||
Layers,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
|
||||
interface MenuItem {
|
||||
id: string;
|
||||
@@ -39,7 +39,6 @@ const menuItems: MenuItem[] = [
|
||||
id: 'kubernetes', name: 'Kubernetes', icon: Cloud,
|
||||
children: [
|
||||
{ id: 'k8s-clusters', name: '集群列表', icon: Cloud, path: '/kubernetes' },
|
||||
{ id: 'k8s-compare', name: '多集群对比', icon: Layers, path: '/kubernetes/compare' },
|
||||
{ id: 'k8s-nodes', name: '节点管理', icon: Cpu, path: '/nodes' },
|
||||
{
|
||||
id: 'k8s-workload', name: '工作负载', icon: Boxes,
|
||||
@@ -95,7 +94,7 @@ const menuItems: MenuItem[] = [
|
||||
children: [
|
||||
{ id: 'cronjobs', name: '定时任务', icon: PlayCircle, path: '/cronjobs' },
|
||||
{ id: 'scripts', name: '脚本库', icon: FileCode, path: '/scripts' },
|
||||
{ id: 'ansible', name: '远程执行', icon: Terminal, path: '/remote-exec' },
|
||||
{ id: 'ansible', name: '远程执行', icon: Terminal, path: '/ansible' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -120,18 +119,38 @@ const menuItems: MenuItem[] = [
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* MenuItemComponent - 侧边栏菜单项（支持多级嵌套）
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 Tooltip 在折叠状态下显示菜单名称
|
||||
* 2. 动画过渡平滑
|
||||
* 3. 活动状态判断更精确
|
||||
* 4. 子菜单展开/收起动画
|
||||
*/
|
||||
function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number }) {
|
||||
const location = useLocation();
|
||||
const { openMenus, toggleMenu, activeMenu, setActiveMenu } = useMenuStore();
|
||||
const { sidebarCollapsed } = useThemeStore();
|
||||
const hasChildren = item.children && item.children.length > 0;
|
||||
const isOpen = openMenus.includes(item.id);
|
||||
|
||||
// Determine if this menu item is active
|
||||
const isActive = item.path
|
||||
? location.pathname === item.path || location.pathname.startsWith(item.path + '/')
|
||||
: (item.id === 'kubernetes' && location.pathname.startsWith('/kubernetes')) ||
|
||||
(item.id === 'k8s-workload' && location.pathname.startsWith('/workloads')) ||
|
||||
(item.id === 'k8s-network' && (location.pathname.includes('/services') || location.pathname.includes('/ingresses'))) ||
|
||||
(item.id === 'k8s-config' && (location.pathname.includes('/configmaps') || location.pathname.includes('/secrets'))) ||
|
||||
activeMenu === item.id;
|
||||
|
||||
const isActiveParent = hasChildren && item.children?.some((child) => {
|
||||
if (child.path) {
|
||||
return location.pathname === child.path || location.pathname.startsWith(child.path + '/');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const handleClick = () => {
|
||||
if (hasChildren) {
|
||||
toggleMenu(item.id);
|
||||
@@ -140,107 +159,184 @@ function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number
|
||||
}
|
||||
};
|
||||
|
||||
// Collapsed mode (only top-level)
|
||||
if (sidebarCollapsed && depth === 0) {
|
||||
return (
|
||||
<div className="relative group">
|
||||
<Button
|
||||
variant={isActive ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
className={cn('w-10 h-10 mx-auto mb-1', isActive && 'bg-blue-600/20 text-blue-400')}
|
||||
asChild={!hasChildren}
|
||||
>
|
||||
{hasChildren ? (
|
||||
<span onClick={handleClick}><item.icon className="h-5 w-5" /></span>
|
||||
) : (
|
||||
<NavLink to={item.path || '#'} onClick={handleClick}><item.icon className="h-5 w-5" /></NavLink>
|
||||
)}
|
||||
</Button>
|
||||
<div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-1.5 bg-slate-800 text-slate-100 text-sm rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 border border-slate-700">
|
||||
{item.name}
|
||||
{hasChildren && (
|
||||
<div className="absolute left-0 top-0 mt-2 ml-2 w-48 bg-slate-800 rounded-md border border-slate-700 shadow-lg py-1">
|
||||
{item.children?.map((child) => (
|
||||
<NavLink key={child.id} to={child.path || '#'}
|
||||
className={({ isActive }) => cn('block px-4 py-2 text-sm hover:bg-slate-700 transition-colors', isActive ? 'text-blue-400 bg-blue-600/10' : 'text-slate-300')}>
|
||||
{child.name}
|
||||
</NavLink>
|
||||
))}
|
||||
<TooltipProvider delayDuration={100}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="relative">
|
||||
{hasChildren ? (
|
||||
<Button
|
||||
variant={isActive || isActiveParent ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
className={cn(
|
||||
'w-10 h-10 mx-auto mb-1 transition-all duration-200',
|
||||
(isActive || isActiveParent)
|
||||
? 'bg-[var(--dg-blue)]/15 text-[var(--dg-blue)]'
|
||||
: 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
|
||||
)}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant={isActive ? 'secondary' : 'ghost'}
|
||||
size="icon"
|
||||
className={cn(
|
||||
'w-10 h-10 mx-auto mb-1 transition-all duration-200',
|
||||
isActive
|
||||
? 'bg-[var(--dg-blue)]/15 text-[var(--dg-blue)]'
|
||||
: 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
|
||||
)}
|
||||
asChild
|
||||
>
|
||||
<NavLink to={item.path || '#'} onClick={handleClick}>
|
||||
<item.icon className="h-5 w-5" />
|
||||
</NavLink>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
|
||||
{item.name}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn('mb-0.5', depth > 0 && 'ml-3')}>
|
||||
<div className={cn('mb-0.5', depth > 0 && 'ml-2.5')}>
|
||||
{hasChildren ? (
|
||||
<>
|
||||
<Button
|
||||
variant={isActive ? 'secondary' : 'ghost'}
|
||||
className={cn('w-full justify-between h-8 px-2.5 text-xs font-normal', isActive ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800')}
|
||||
variant={isActive || isActiveParent ? 'secondary' : 'ghost'}
|
||||
className={cn(
|
||||
'w-full justify-between h-8 px-2.5 text-xs font-normal transition-all duration-200',
|
||||
(isActive || isActiveParent)
|
||||
? 'bg-[var(--dg-blue)]/10 text-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/15'
|
||||
: 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
|
||||
)}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<item.icon className="h-3.5 w-3.5" />
|
||||
<span>{item.name}</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<item.icon className={cn('h-3.5 w-3.5', (isActive || isActiveParent) && 'text-[var(--dg-blue)]')} />
|
||||
<span className="truncate">{item.name}</span>
|
||||
</span>
|
||||
{isOpen ? <ChevronDown className="h-3 w-3 text-slate-500" /> : <ChevronRight className="h-3 w-3 text-slate-500" />}
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-3 w-3 text-[var(--dg-text-muted)] transition-transform duration-200',
|
||||
!isOpen && '-rotate-90',
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
{isOpen && (
|
||||
<div className="mt-0.5 space-y-0.5">
|
||||
{/* Submenu with animation */}
|
||||
<div
|
||||
className={cn(
|
||||
'overflow-hidden transition-all duration-200 ease-in-out',
|
||||
isOpen ? 'max-h-[800px] opacity-100 mt-0.5' : 'max-h-0 opacity-0',
|
||||
)}
|
||||
>
|
||||
<div className="space-y-0.5 border-l border-[var(--dg-border)] ml-4 pl-1.5">
|
||||
{item.children?.map((child) => (
|
||||
<MenuItemComponent key={child.id} item={child} depth={depth + 1} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<NavLink
|
||||
to={item.path || '#'}
|
||||
onClick={handleClick}
|
||||
className={({ isActive }) =>
|
||||
cn('flex items-center gap-1.5 h-8 px-2.5 text-xs rounded-md transition-colors',
|
||||
isActive ? 'bg-blue-600/20 text-blue-400' : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800')
|
||||
className={({ isActive: navActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-2 h-8 px-2.5 text-xs rounded-md transition-all duration-200',
|
||||
navActive || isActive
|
||||
? 'bg-[var(--dg-blue)]/10 text-[var(--dg-blue)] font-medium'
|
||||
: 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
|
||||
)
|
||||
}
|
||||
>
|
||||
<item.icon className="h-3.5 w-3.5" />
|
||||
<span>{item.name}</span>
|
||||
<item.icon className="h-3.5 w-3.5 flex-shrink-0" />
|
||||
<span className="truncate">{item.name}</span>
|
||||
</NavLink>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sidebar - 优化后的侧边栏导航
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 CSS 变量控制宽度，统一协调
|
||||
* 2. 添加 Tooltip 支持（折叠状态）
|
||||
* 3. 子菜单展开/收起动画
|
||||
* 4. Logo 区域更精致
|
||||
* 5. 底部添加版本信息
|
||||
*/
|
||||
export function Sidebar() {
|
||||
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
|
||||
|
||||
// Listen for keyboard shortcut
|
||||
useEffect(() => {
|
||||
const handler = () => toggleSidebar();
|
||||
window.addEventListener('toggle-sidebar' as any, handler);
|
||||
return () => window.removeEventListener('toggle-sidebar' as any, handler);
|
||||
}, [toggleSidebar]);
|
||||
|
||||
return (
|
||||
<aside className={cn('fixed left-0 top-0 z-40 h-screen bg-slate-900 border-r border-slate-800 transition-all duration-300', sidebarCollapsed ? 'w-16' : 'w-64')}>
|
||||
<div className="flex items-center justify-between h-14 px-4 border-b border-slate-800">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
|
||||
<Cloud className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="font-semibold text-slate-100">AIOps平台</span>
|
||||
</div>
|
||||
)}
|
||||
{sidebarCollapsed && (
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mx-auto">
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed left-0 top-0 z-40 h-screen bg-[var(--dg-bg-secondary)] border-r border-[var(--dg-border)]',
|
||||
'flex flex-col transition-[width] duration-300 ease-in-out',
|
||||
)}
|
||||
style={{ width: 'var(--sidebar-width)' }}
|
||||
>
|
||||
{/* Logo Area */}
|
||||
<div className="flex items-center h-14 px-3 border-b border-[var(--dg-border)] flex-shrink-0">
|
||||
<div className={cn('flex items-center gap-2.5 flex-1 min-w-0', sidebarCollapsed && 'justify-center')}>
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-cyan)] flex items-center justify-center flex-shrink-0 shadow-lg shadow-[var(--dg-blue)]/20">
|
||||
<Cloud className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
{!sidebarCollapsed && (
|
||||
<span className="font-bold text-[var(--dg-text-primary)] text-sm tracking-tight truncate">
|
||||
AIOps平台
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!sidebarCollapsed && (
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100" onClick={toggleSidebar}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
|
||||
onClick={toggleSidebar}
|
||||
title="收起侧边栏"
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<ScrollArea className="h-[calc(100vh-3.5rem)]">
|
||||
<div className={cn('p-1.5', sidebarCollapsed && 'px-1')}>
|
||||
{menuItems.map((item) => <MenuItemComponent key={item.id} item={item} />)}
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<ScrollArea className="flex-1 py-2 px-1.5">
|
||||
<nav className="space-y-0.5">
|
||||
{menuItems.map((item) => (
|
||||
<MenuItemComponent key={item.id} item={item} />
|
||||
))}
|
||||
</nav>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Footer */}
|
||||
{!sidebarCollapsed && (
|
||||
<div className="px-3 py-2 border-t border-[var(--dg-border)] flex-shrink-0">
|
||||
<div className="text-[10px] text-[var(--dg-text-muted)] text-center">
|
||||
AIOps v1.0.0
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/**
|
||||
* SkeletonCard - 骨架屏卡片组件
|
||||
*
|
||||
* 优化点：
|
||||
* 1. 使用 CSS 动画实现 shimmer 效果
|
||||
* 2. 主题感知（跟随当前主题的颜色）
|
||||
* 3. 多种变体：统计卡片、图表、列表、表格
|
||||
*/
|
||||
|
||||
interface SkeletonCardProps {
|
||||
variant?: 'stat' | 'chart' | 'list' | 'table' | 'card';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SkeletonCard({ variant = 'card', className }: SkeletonCardProps) {
|
||||
const shimmerClass = 'dg-skeleton';
|
||||
|
||||
if (variant === 'stat') {
|
||||
return (
|
||||
<div className={cn('dg-card p-6 space-y-4', className)}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="space-y-3 flex-1">
|
||||
<div className={cn('h-4 w-24 rounded', shimmerClass)} />
|
||||
<div className={cn('h-8 w-16 rounded', shimmerClass)} />
|
||||
</div>
|
||||
<div className={cn('h-10 w-10 rounded-lg', shimmerClass)} />
|
||||
</div>
|
||||
<div className={cn('h-3 w-32 rounded', shimmerClass)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === 'chart') {
|
||||
return (
|
||||
<div className={cn('dg-card p-6 space-y-4', className)}>
|
||||
<div className="space-y-2">
|
||||
<div className={cn('h-5 w-32 rounded', shimmerClass)} />
|
||||
<div className={cn('h-3 w-48 rounded', shimmerClass)} />
|
||||
</div>
|
||||
<div className={cn('h-[200px] rounded-lg', shimmerClass)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (variant === 'table') {
|
||||
return (
|
||||
<div className={cn('dg-card overflow-hidden', className)}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4 p-4 border-b border-[var(--dg-border)]">
|
||||
<div className={cn('h-4 w-8 rounded', shimmerClass)} />
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className={cn('h-4 flex-1 rounded', shimmerClass)} />
|
||||
))}
|
||||
</div>
|
||||
{/* Rows */}
|
||||
{Array.from({ length: 5 }).map((_, rowIdx) => (
|
||||
<div key={rowIdx} className="flex items-center gap-4 p-4 border-b border-[var(--dg-border)] last:border-0">
|
||||
<div className={cn('h-4 w-8 rounded', shimmerClass)} />
|
||||
{Array.from({ length: 6 }).map((_, colIdx) => (
|
||||
<div key={colIdx} className={cn('h-4 flex-1 rounded', shimmerClass)} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Default list skeleton
|
||||
return (
|
||||
<div className={cn('dg-card p-6 space-y-4', className)}>
|
||||
<div className="space-y-2">
|
||||
<div className={cn('h-5 w-40 rounded', shimmerClass)} />
|
||||
<div className={cn('h-3 w-56 rounded', shimmerClass)} />
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className={cn('h-8 w-8 rounded-lg', shimmerClass)} />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className={cn('h-3 w-full rounded', shimmerClass)} />
|
||||
<div className={cn('h-3 w-2/3 rounded', shimmerClass)} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* SkeletonStats - 统计卡片骨架屏网格
|
||||
*/
|
||||
export function SkeletonStats({ count = 4 }: { count?: number }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<SkeletonCard key={i} variant="stat" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* SkeletonDashboard - 仪表盘骨架屏
|
||||
*/
|
||||
export function SkeletonDashboard() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-2">
|
||||
<div className="dg-skeleton h-7 w-24 rounded" />
|
||||
<div className="dg-skeleton h-4 w-48 rounded" />
|
||||
</div>
|
||||
<div className="dg-skeleton h-9 w-20 rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<SkeletonStats count={4} />
|
||||
|
||||
{/* Chart */}
|
||||
<SkeletonCard variant="chart" />
|
||||
|
||||
{/* Two column layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<SkeletonCard variant="list" />
|
||||
<SkeletonCard variant="list" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user