rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站 PageShell 设计系统与专业 UI 统一

Browse Source 
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架
- index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩）
- 全站路由页接入 PageShell，云账单三 Tab 为标杆
- 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化
- 登录页/侧栏/顶栏去渐变光球，企业克制风
- 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
This commit is contained in:
Logan committed 2026-07-01 12:45:38 +08:00
1 parent 1acb0c49af
commit e363ded445
213 files changed
+7148 -6818
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/monitor/AlertRulesTab.tsx
+27 -27
View File
@@ -106,11 +106,11 @@ export function AlertRulesTab({
{/* 批量操作栏 // Logan.Li */}
{selectedIds.length > 0 && (
<div className="flex items-center gap-2 mb-3">
<span className="text-sm text-slate-400">已选择 {selectedIds.length} 项</span>
<span className="text-sm dg-text-secondary">已选择 {selectedIds.length} 项</span>
<Button
variant="outline"
size="sm"
className="border-red-500/30 text-red-400 hover:bg-red-500/10"
className="border-red-500/30 dg-text-red hover:bg-red-500/10"
onClick={handleBatchDelete}
>
<Trash2 className="h-4 w-4 mr-2" />
@@ -119,56 +119,56 @@ export function AlertRulesTab({
</div>
)}
<Card className="bg-slate-900 border-slate-800">
<Card className="dg-card">
<CardContent className="p-0">
<div className="border-t border-slate-800">
<div className="border-t border-[var(--dg-border)]">
<Table>
<TableHeader>
<TableRow className="border-slate-800 hover:bg-transparent">
<TableRow className="border-[var(--dg-border)] hover:bg-transparent">
<TableHead className="w-12">
<Checkbox
checked={allSelected}
onCheckedChange={toggleSelectAll}
className="border-slate-600"
className="border-[var(--dg-border-hover)]"
/>
</TableHead>
<TableHead className="text-slate-400">规则名称</TableHead>
<TableHead className="text-slate-400">数据源</TableHead>
<TableHead className="text-slate-400">触发条件</TableHead>
<TableHead className="text-slate-400">级别</TableHead>
<TableHead className="text-slate-400">持续时间</TableHead>
<TableHead className="text-slate-400">通知渠道</TableHead>
<TableHead className="text-slate-400">状态</TableHead>
<TableHead className="text-slate-400 text-right">操作</TableHead>
<TableHead className="dg-text-secondary">规则名称</TableHead>
<TableHead className="dg-text-secondary">数据源</TableHead>
<TableHead className="dg-text-secondary">触发条件</TableHead>
<TableHead className="dg-text-secondary">级别</TableHead>
<TableHead className="dg-text-secondary">持续时间</TableHead>
<TableHead className="dg-text-secondary">通知渠道</TableHead>
<TableHead className="dg-text-secondary">状态</TableHead>
<TableHead className="dg-text-secondary text-right">操作</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{rules.length === 0 ? (
<TableRow className="border-slate-800">
<TableCell colSpan={COL_SPAN} className="text-center text-slate-500 py-12">
<TableRow className="border-[var(--dg-border)]">
<TableCell colSpan={COL_SPAN} className="text-center dg-text-muted py-12">
暂无告警规则
</TableCell>
</TableRow>
) : (
rules.map((rule) => (
<TableRow key={rule.id} className="border-slate-800 hover:bg-slate-800/50">
<TableRow key={rule.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]">
<TableCell>
<Checkbox
checked={selectedIds.includes(rule.id)}
onCheckedChange={() => toggleSelect(rule.id)}
className="border-slate-600"
className="border-[var(--dg-border-hover)]"
/>
</TableCell>
<TableCell>
<div>
<span className="text-sm font-medium text-slate-200">{rule.name}</span>
<span className="text-sm font-medium text-[var(--dg-text-primary)]">{rule.name}</span>
{rule.description && (
<p className="text-xs text-slate-500">{rule.description}</p>
<p className="text-xs dg-text-muted">{rule.description}</p>
)}
</div>
</TableCell>
<TableCell>
<code className="text-xs text-slate-300 bg-slate-800 px-2 py-0.5 rounded">
<code className="text-xs text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
{rule.source || '--'}
</code>
</TableCell>
@@ -179,21 +179,21 @@ export function AlertRulesTab({
</TableCell>
<TableCell>
{rule.severity === 'critical' ? (
<Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
<Badge variant="outline" className="border-red-500/30 dg-text-red bg-red-500/10">
严重
</Badge>
) : rule.severity === 'warning' ? (
<Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
<Badge variant="outline" className="border-amber-500/30 dg-text-yellow bg-amber-500/10">
警告
</Badge>
) : (
<Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
<Badge variant="outline" className="border-blue-500/30 dg-text-blue bg-blue-500/10">
提示
</Badge>
)}
</TableCell>
<TableCell>
<span className="text-sm text-slate-300">{(rule.duration || 0) / 60}分钟</span>
<span className="text-sm text-[var(--dg-text-secondary)]">{(rule.duration || 0) / 60}分钟</span>
</TableCell>
<TableCell>
{renderRuleChannels(rule, notifyChannels)}
@@ -210,7 +210,7 @@ export function AlertRulesTab({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-slate-100"
className="h-8 w-8 dg-text-secondary hover:text-[var(--dg-text-primary)]"
onClick={() => onEditRule(rule)}
>
<Settings className="h-4 w-4" />
@@ -218,7 +218,7 @@ export function AlertRulesTab({
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-slate-400 hover:text-red-400"
className="h-8 w-8 dg-text-secondary hover:dg-text-red"
onClick={() => handleDeleteRule(rule.id)}
>
<Trash2 className="h-4 w-4" />