feat: 全站 PageShell 设计系统与专业 UI 统一
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
This commit is contained in:
Logan committed
1 parent
1acb0c49af
commit
e363ded445
213 files changed
+7148
-6818
No files matched your search
@@ -112,19 +112,19 @@ export function AgentAlerts() {
|
||||
{/* 页头 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-slate-100">Agent 告警</h2>
|
||||
<p className="text-sm text-slate-400 mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
|
||||
<h2 className="text-xl font-semibold text-[var(--dg-text-primary)]">Agent 告警</h2>
|
||||
<p className="text-sm dg-text-secondary mt-0.5">基于 Agent 上报指标的告警规则与事件</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700">
|
||||
<Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="dg-input text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]">
|
||||
<RefreshCw className={`h-4 w-4 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="bg-slate-800 border border-slate-700">
|
||||
<TabsTrigger value="events" className="data-[state=active]:bg-slate-700">告警事件</TabsTrigger>
|
||||
<TabsTrigger value="rules" className="data-[state=active]:bg-slate-700">告警规则</TabsTrigger>
|
||||
<TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
|
||||
<TabsTrigger value="events" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警事件</TabsTrigger>
|
||||
<TabsTrigger value="rules" className="data-[state=active]:bg-[var(--dg-bg-active)]">告警规则</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* ========== 告警事件 ========== */}
|
||||
@@ -134,7 +134,7 @@ export function AgentAlerts() {
|
||||
size="sm"
|
||||
variant={resolvedView ? 'outline' : 'default'}
|
||||
onClick={() => setResolvedView(false)}
|
||||
className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
|
||||
className={!resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
|
||||
>
|
||||
未恢复
|
||||
</Button>
|
||||
@@ -142,53 +142,53 @@ export function AgentAlerts() {
|
||||
size="sm"
|
||||
variant={resolvedView ? 'default' : 'outline'}
|
||||
onClick={() => setResolvedView(true)}
|
||||
className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'bg-slate-800 border-slate-700 text-slate-300'}
|
||||
className={resolvedView ? 'bg-blue-600 hover:bg-blue-700 text-white' : 'dg-input text-[var(--dg-text-secondary)]'}
|
||||
>
|
||||
已恢复
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card">
|
||||
<CardContent className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
|
||||
<span className="ml-2 text-slate-400">加载中...</span>
|
||||
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
|
||||
<span className="ml-2 dg-text-secondary">加载中...</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : alerts.length === 0 ? (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<CheckCircle className="h-10 w-10 text-emerald-500 mb-3" />
|
||||
<p className="text-slate-400">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
|
||||
<p className="dg-text-secondary">{resolvedView ? '暂无已恢复的告警' : '当前无活动告警，一切正常'}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{alerts.map((alert) => (
|
||||
<Card key={alert.id} className="bg-slate-900 border-slate-800 py-4">
|
||||
<Card key={alert.id} className="dg-card py-4">
|
||||
<CardContent>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-start gap-3 min-w-0 flex-1">
|
||||
<div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
|
||||
<AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'text-red-400' : (alert.severity || 'warning') === 'warning' ? 'text-amber-400' : 'text-blue-400'}`} />
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
|
||||
<AlertTriangle className={`h-4 w-4 ${(alert.severity || 'warning') === 'critical' ? 'dg-text-red' : (alert.severity || 'warning') === 'warning' ? 'dg-text-yellow' : 'dg-text-blue'}`} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{severityBadge(alert.severity)}
|
||||
<span className="font-medium text-slate-100">{alert.rule_name || alert.name || alert.title || '告警'}</span>
|
||||
<span className="font-medium text-[var(--dg-text-primary)]">{alert.rule_name || alert.name || alert.title || '告警'}</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-400 mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-xs text-slate-500 flex-wrap">
|
||||
<p className="text-sm dg-text-secondary mt-1">{alert.message || alert.description || '触发告警阈值'}</p>
|
||||
<div className="flex items-center gap-4 mt-2 text-xs dg-text-muted flex-wrap">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Cpu className="h-3 w-3" />
|
||||
{alert.hostname || '--'}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="text-slate-400">指标:</span> {getMetricLabel(alert.metric)}
|
||||
<span className="dg-text-secondary">指标:</span> {getMetricLabel(alert.metric)}
|
||||
</span>
|
||||
{alert.value != null && (
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="text-slate-400">当前值:</span> {alert.value}
|
||||
<span className="dg-text-secondary">当前值:</span> {alert.value}
|
||||
</span>
|
||||
)}
|
||||
<span className="inline-flex items-center gap-1">
|
||||
@@ -203,7 +203,7 @@ export function AgentAlerts() {
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleResolve(alert.id)}
|
||||
className="shrink-0 h-8 bg-slate-800 border-slate-700 text-emerald-400 hover:bg-emerald-500/10 hover:text-emerald-400"
|
||||
className="shrink-0 h-8 dg-input dg-text-green hover:bg-emerald-500/10 hover:dg-text-green"
|
||||
>
|
||||
<CheckCircle className="h-3.5 w-3.5 mr-1" />
|
||||
恢复
|
||||
@@ -227,17 +227,17 @@ export function AgentAlerts() {
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card">
|
||||
<CardContent className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-5 w-5 animate-spin text-slate-500" />
|
||||
<span className="ml-2 text-slate-400">加载中...</span>
|
||||
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
|
||||
<span className="ml-2 dg-text-secondary">加载中...</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : rules.length === 0 ? (
|
||||
<Card className="bg-slate-900 border-slate-800">
|
||||
<Card className="dg-card">
|
||||
<CardContent className="flex flex-col items-center justify-center py-16">
|
||||
<Bell className="h-10 w-10 text-slate-600 mb-3" />
|
||||
<p className="text-slate-400">暂无告警规则</p>
|
||||
<Bell className="h-10 w-10 dg-text-muted mb-3" />
|
||||
<p className="dg-text-secondary">暂无告警规则</p>
|
||||
<Button size="sm" onClick={openCreateRule} className="mt-4 bg-blue-600 hover:bg-blue-700 text-white">
|
||||
<Plus className="h-4 w-4 mr-1.5" />
|
||||
创建第一条规则
|
||||
@@ -249,42 +249,42 @@ export function AgentAlerts() {
|
||||
{rules.map((rule) => {
|
||||
const MetricIcon = METRIC_OPTIONS.find((m) => m.value === rule.metric)?.icon || Cpu;
|
||||
return (
|
||||
<Card key={rule.id} className={`bg-slate-900 ${rule.enabled === false ? 'border-slate-800 opacity-60' : 'border-slate-800'} py-4`}>
|
||||
<Card key={rule.id} className={`bg-[var(--dg-bg-secondary)] ${rule.enabled === false ? 'border-[var(--dg-border)] opacity-60' : 'border-[var(--dg-border)]'} py-4`}>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
|
||||
<MetricIcon className="h-4 w-4 text-blue-400" />
|
||||
<div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)] flex items-center justify-center shrink-0">
|
||||
<MetricIcon className="h-4 w-4 dg-text-blue" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-slate-100">{rule.name}</span>
|
||||
<span className="font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
|
||||
{severityBadge(rule.severity)}
|
||||
{rule.enabled === false && (
|
||||
<Badge className="bg-slate-700 text-slate-400 border border-slate-600">已禁用</Badge>
|
||||
<Badge className="bg-[var(--dg-bg-active)] dg-text-secondary border border-[var(--dg-border-hover)]">已禁用</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs text-slate-500 flex-wrap">
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs dg-text-muted flex-wrap">
|
||||
<span>{getMetricLabel(rule.metric)}</span>
|
||||
{rule.metric !== 'offline' && (
|
||||
<span className="text-slate-400">
|
||||
<span className="dg-text-secondary">
|
||||
{rule.operator} {rule.threshold}{rule.metric === 'port_down' ? '' : '%'}
|
||||
</span>
|
||||
)}
|
||||
{rule.metric === 'port_down' && rule.port ? (
|
||||
<span className="text-slate-400">端口 {rule.port}</span>
|
||||
<span className="dg-text-secondary">端口 {rule.port}</span>
|
||||
) : null}
|
||||
{rule.duration ? <span className="text-slate-400">持续 {rule.duration}s</span> : null}
|
||||
{rule.duration ? <span className="dg-text-secondary">持续 {rule.duration}s</span> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Switch checked={rule.enabled !== false} onCheckedChange={() => handleToggleRule(rule)} />
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-slate-100 hover:bg-slate-800" onClick={() => openEditRule(rule)}>
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]" onClick={() => openEditRule(rule)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8 text-slate-400 hover:text-red-400 hover:bg-slate-800" onClick={() => handleDeleteRule(rule.id)}>
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8 dg-text-secondary hover:dg-text-red hover:bg-[var(--dg-bg-hover)]" onClick={() => handleDeleteRule(rule.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user