Files
aiops/frontend/src/index.css
T
attacker ff0b268984 feat: 修复仪表盘数据管线 — 补充应用发布种子数据 + 修复limit参数解析 + LDAP认证集成 + User类型完善
后端改进:
- 修复 dashboard/recent-alerts 的 limit 参数解析 (原代码错误地将数字解析为日期)
- 为 dashboard/recent-releases 添加 limit 参数解析支持
- 新增 generateAppReleases 种子数据生成函数 (10条应用发布记录)
- 修复 AlertEvent 的 rule_name/rule_id/severity 数据一致性
- 添加 go-ldap/ldap/v3 依赖并集成 LDAP 认证处理器
- 添加 seed.go 自动种子数据初始化 (admin用户+LDAP配置)
- User model 添加 AuthSource/LDAPConfig 字段

前端改进:
- 修复 User 类型定义以匹配后端 API (real_name/is_admin/auth_source等)
- 修复 Header.tsx 的 real_name 属性引用导致 TypeScript 编译错误
- 统一 API 服务层、暗色主题样式、组件联调优化

验证:
- go build ./... 编译通过
- npm run build 构建通过
- 仪表盘发布历史、告警消息等区域数据正常展示
- 健康检查 /health 正常
2026-06-14 02:11:10 +08:00

581 lines
16 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* ===== Theme 1: Ocean Deep (深海蓝) — Default ===== */
:root,
[data-theme="ocean-deep"] {
--background: 220 13% 5%;
--foreground: 210 40% 98%;
--card: 220 13% 7%;
--card-foreground: 210 40% 98%;
--popover: 220 13% 7%;
--popover-foreground: 210 40% 98%;
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 220 13% 14%;
--secondary-foreground: 210 40% 98%;
--muted: 220 13% 14%;
--muted-foreground: 215 20% 55%;
--accent: 220 13% 14%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62% 50%;
--destructive-foreground: 0 0% 100%;
--border: 220 13% 18%;
--input: 220 13% 14%;
--ring: 217 91% 60%;
--radius: 0.625rem;
--sidebar-background: 220 13% 7%;
--sidebar-foreground: 210 40% 90%;
--sidebar-primary: 217 91% 60%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 13% 14%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 220 13% 18%;
--sidebar-ring: 217 91% 60%;
--dg-bg-primary: #0d1117;
--dg-bg-secondary: #161b22;
--dg-bg-tertiary: #21262d;
--dg-bg-hover: #30363d;
--dg-border: #30363d;
--dg-border-light: #21262d;
--dg-text-primary: #f0f6fc;
--dg-text-secondary: #8b949e;
--dg-text-muted: #6e7681;
--dg-blue: #58a6ff;
--dg-green: #3fb950;
--dg-red: #f85149;
--dg-orange: #f0883e;
--dg-purple: #8957e5;
--dg-cyan: #39c5cf;
--dg-yellow: #d29922;
--dg-card-hover-border: rgba(88, 166, 255, 0.5);
--dg-gradient-start: #2563eb;
--dg-gradient-end: #9333ea;
--dg-gradient-text-start: #60a5fa;
--dg-gradient-text-end: #c084fc;
--dg-input-focus-ring: rgba(96, 165, 250, 0.2);
}
/* ===== Theme 2: Light Professional (明亮白) ===== */
[data-theme="light-professional"],
[data-theme="light"] {
--background: 0 0% 100%;
--foreground: 220 14% 10%;
--card: 0 0% 100%;
--card-foreground: 220 14% 10%;
--popover: 0 0% 100%;
--popover-foreground: 220 14% 10%;
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
--secondary: 220 14% 96%;
--secondary-foreground: 220 14% 10%;
--muted: 220 14% 96%;
--muted-foreground: 220 10% 46%;
--accent: 220 14% 96%;
--accent-foreground: 220 14% 10%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 13% 91%;
--input: 220 13% 91%;
--ring: 217 91% 60%;
--radius: 0.625rem;
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 220 14% 20%;
--sidebar-primary: 217 91% 60%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 14% 94%;
--sidebar-accent-foreground: 220 14% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217 91% 60%;
--dg-bg-primary: #ffffff;
--dg-bg-secondary: #f8f9fb;
--dg-bg-tertiary: #f0f1f5;
--dg-bg-hover: #e8eaef;
--dg-border: #e2e5eb;
--dg-border-light: #eaecf0;
--dg-text-primary: #1a1d23;
--dg-text-secondary: #5c6370;
--dg-text-muted: #9ca3af;
--dg-blue: #2563eb;
--dg-green: #16a34a;
--dg-red: #dc2626;
--dg-orange: #ea580c;
--dg-purple: #7c3aed;
--dg-cyan: #0891b2;
--dg-yellow: #ca8a04;
--dg-card-hover-border: rgba(37, 99, 235, 0.3);
--dg-gradient-start: #2563eb;
--dg-gradient-end: #7c3aed;
--dg-gradient-text-start: #1d4ed8;
--dg-gradient-text-end: #6d28d9;
--dg-input-focus-ring: rgba(37, 99, 235, 0.15);
}
/* ===== Theme 3: Midnight Purple (午夜紫) ===== */
[data-theme="midnight-purple"] {
--background: 264 56% 4%;
--foreground: 280 100% 98%;
--card: 264 48% 8%;
--card-foreground: 280 100% 98%;
--popover: 264 48% 8%;
--popover-foreground: 280 100% 98%;
--primary: 270 91% 65%;
--primary-foreground: 0 0% 100%;
--secondary: 264 40% 20%;
--secondary-foreground: 280 100% 98%;
--muted: 264 40% 20%;
--muted-foreground: 280 30% 60%;
--accent: 264 40% 20%;
--accent-foreground: 280 100% 98%;
--destructive: 348 100% 72%;
--destructive-foreground: 264 56% 4%;
--border: 264 40% 20%;
--input: 264 40% 20%;
--ring: 270 91% 65%;
--radius: 0.625rem;
--sidebar-background: 264 48% 6%;
--sidebar-foreground: 280 100% 92%;
--sidebar-primary: 270 91% 65%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 264 40% 20%;
--sidebar-accent-foreground: 280 100% 98%;
--sidebar-border: 264 40% 20%;
--sidebar-ring: 270 91% 65%;
--dg-bg-primary: #0a0612;
--dg-bg-secondary: #130c21;
--dg-bg-tertiary: #1c1330;
--dg-bg-hover: #2d1f4a;
--dg-border: #2d1f4a;
--dg-border-light: #1c1330;
--dg-text-primary: #faf5ff;
--dg-text-secondary: #b794c7;
--dg-text-muted: #7c5a8a;
--dg-blue: #818cf8;
--dg-green: #34d399;
--dg-red: #fb7185;
--dg-orange: #fb923c;
--dg-purple: #c084fc;
--dg-cyan: #22d3ee;
--dg-yellow: #facc15;
--dg-card-hover-border: rgba(192, 132, 252, 0.5);
--dg-gradient-start: #9333ea;
--dg-gradient-end: #c084fc;
--dg-gradient-text-start: #a855f7;
--dg-gradient-text-end: #c084fc;
--dg-input-focus-ring: rgba(192, 132, 252, 0.2);
}
/* ===== Theme 4: Pine Green (松林绿) ===== */
[data-theme="pine-green"] {
--background: 150 25% 5%;
--foreground: 140 60% 97%;
--card: 150 25% 9%;
--card-foreground: 140 60% 97%;
--popover: 150 25% 9%;
--popover-foreground: 140 60% 97%;
--primary: 142 71% 45%;
--primary-foreground: 150 25% 5%;
--secondary: 150 20% 18%;
--secondary-foreground: 140 60% 97%;
--muted: 150 20% 18%;
--muted-foreground: 150 20% 55%;
--accent: 150 20% 18%;
--accent-foreground: 140 60% 97%;
--destructive: 0 90% 72%;
--destructive-foreground: 150 25% 5%;
--border: 150 20% 18%;
--input: 150 20% 18%;
--ring: 142 71% 45%;
--radius: 0.625rem;
--sidebar-background: 150 25% 7%;
--sidebar-foreground: 140 40% 88%;
--sidebar-primary: 142 71% 45%;
--sidebar-primary-foreground: 150 25% 5%;
--sidebar-accent: 150 20% 18%;
--sidebar-accent-foreground: 140 60% 97%;
--sidebar-border: 150 20% 18%;
--sidebar-ring: 142 71% 45%;
--dg-bg-primary: #0a1210;
--dg-bg-secondary: #111f1a;
--dg-bg-tertiary: #192c24;
--dg-bg-hover: #253d32;
--dg-border: #253d32;
--dg-border-light: #192c24;
--dg-text-primary: #f0fdf4;
--dg-text-secondary: #86b8a0;
--dg-text-muted: #5a7c6b;
--dg-blue: #38bdf8;
--dg-green: #4ade80;
--dg-red: #f87171;
--dg-orange: #fb923c;
--dg-purple: #c084fc;
--dg-cyan: #2dd4bf;
--dg-yellow: #facc15;
--dg-card-hover-border: rgba(74, 222, 128, 0.5);
--dg-gradient-start: #059669;
--dg-gradient-end: #10b981;
--dg-gradient-text-start: #059669;
--dg-gradient-text-end: #34d399;
--dg-input-focus-ring: rgba(74, 222, 128, 0.2);
}
/* ===== Theme 5: Orange Vitality (活力橙) ===== */
[data-theme="orange-vitality"] {
--background: 30 35% 5%;
--foreground: 30 100% 97%;
--card: 30 30% 9%;
--card-foreground: 30 100% 97%;
--popover: 30 30% 9%;
--popover-foreground: 30 100% 97%;
--primary: 25 95% 53%;
--primary-foreground: 0 0% 100%;
--secondary: 30 25% 18%;
--secondary-foreground: 30 100% 97%;
--muted: 30 25% 18%;
--muted-foreground: 30 25% 55%;
--accent: 30 25% 18%;
--accent-foreground: 30 100% 97%;
--destructive: 0 80% 70%;
--destructive-foreground: 30 35% 5%;
--border: 30 25% 18%;
--input: 30 25% 18%;
--ring: 25 95% 53%;
--radius: 0.625rem;
--sidebar-background: 30 30% 7%;
--sidebar-foreground: 30 80% 88%;
--sidebar-primary: 25 95% 53%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 30 25% 18%;
--sidebar-accent-foreground: 30 100% 97%;
--sidebar-border: 30 25% 18%;
--sidebar-ring: 25 95% 53%;
--dg-bg-primary: #110d08;
--dg-bg-secondary: #1d1610;
--dg-bg-tertiary: #2b1f16;
--dg-bg-hover: #3d2d20;
--dg-border: #3d2d20;
--dg-border-light: #2b1f16;
--dg-text-primary: #fef7ed;
--dg-text-secondary: #d4a574;
--dg-text-muted: #9c7a54;
--dg-blue: #60a5fa;
--dg-green: #4ade80;
--dg-red: #f87171;
--dg-orange: #fb923c;
--dg-purple: #a78bfa;
--dg-cyan: #2dd4bf;
--dg-yellow: #fcd34d;
--dg-card-hover-border: rgba(251, 146, 60, 0.5);
--dg-gradient-start: #ea580c;
--dg-gradient-end: #f59e0b;
--dg-gradient-text-start: #f97316;
--dg-gradient-text-end: #fbbf24;
--dg-input-focus-ring: rgba(251, 146, 60, 0.2);
}
}
@layer base {
* {
@apply border-border;
}
html {
scroll-behavior: smooth;
}
body {
@apply bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] antialiased;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
font-feature-settings: 'rlig' 1, 'calt' 1;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Fix: Radix Dialog scroll-lock adds padding-right to body, causing layout shift. */
body[data-scroll-locked],
body[data-radix-scroll-locked],
body[style*='padding-right'] {
padding-right: 0 !important;
}
code,
pre,
.font-mono {
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
}
@layer utilities {
/* ===== Design System Card / Input ===== */
.dg-card {
@apply bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dg-card-hover {
@apply transition-all duration-300 hover:-translate-y-0.5;
}
.dg-card-hover:hover {
border-color: var(--dg-card-hover-border);
}
.dg-input {
@apply 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;
}
.dg-input:focus {
--tw-ring-color: var(--dg-input-focus-ring);
}
.dg-text-muted {
color: var(--dg-text-muted);
}
.dg-text-secondary {
color: var(--dg-text-secondary);
}
.dg-gradient-text {
background: linear-gradient(to right, var(--dg-gradient-text-start), var(--dg-gradient-text-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dg-gradient-bg {
background: linear-gradient(to right, var(--dg-gradient-start), var(--dg-gradient-end));
}
.dg-gradient-br {
background: linear-gradient(to bottom right, var(--dg-gradient-start), var(--dg-gradient-end));
}
/* ===== Buttons ===== */
.dg-btn {
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
}
.dg-btn-primary {
@apply dg-btn dg-gradient-bg text-white hover:opacity-90 active:scale-[0.98];
}
.dg-btn-secondary {
@apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] active:scale-[0.98];
}
.dg-btn-ghost {
@apply dg-btn text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)];
}
.dg-btn-danger {
@apply dg-btn bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98];
}
.dg-btn-sm {
@apply px-3 py-1.5 text-xs;
}
.dg-btn-lg {
@apply px-6 py-3 text-base;
}
/* ===== Badges ===== */
.dg-badge {
@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
}
.dg-badge-blue {
@apply dg-badge bg-blue-500/10 text-blue-400;
}
.dg-badge-green {
@apply dg-badge bg-green-500/10 text-green-400;
}
.dg-badge-red {
@apply dg-badge bg-red-500/10 text-red-400;
}
.dg-badge-yellow {
@apply dg-badge bg-yellow-500/10 text-yellow-400;
}
.dg-badge-purple {
@apply dg-badge bg-purple-500/10 text-purple-400;
}
.dg-badge-orange {
@apply dg-badge bg-orange-500/10 text-orange-400;
}
.dg-badge-cyan {
@apply dg-badge bg-cyan-500/10 text-cyan-400;
}
.dg-badge-muted {
@apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)];
}
/* ===== Scrollbar ===== */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--dg-border) transparent;
}
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: var(--dg-border);
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: var(--dg-text-muted);
}
[data-theme='light-professional'] .scrollbar-thin::-webkit-scrollbar-thumb,
[data-theme='light'] .scrollbar-thin::-webkit-scrollbar-thumb {
background: #d1d5db;
}
[data-theme='light-professional'] .scrollbar-thin::-webkit-scrollbar-thumb:hover,
[data-theme='light'] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* ===== Animations ===== */
@keyframes pulse-ring {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.animate-pulse-ring {
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===== Glass effect ===== */
.glass {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ===== Status indicators ===== */
.status-dot {
@apply w-2 h-2 rounded-full;
}
.status-dot-running {
@apply bg-emerald-400 animate-pulse;
}
.status-dot-stopped {
@apply bg-slate-400;
}
.status-dot-warning {
@apply bg-amber-400;
}
.status-dot-error {
@apply bg-red-400;
}
/* Badge variants (legacy) */
.badge-critical {
@apply border-red-500/30 text-red-400 bg-red-500/10;
}
.badge-warning {
@apply border-amber-500/30 text-amber-400 bg-amber-500/10;
}
.badge-success {
@apply border-emerald-500/30 text-emerald-400 bg-emerald-500/10;
}
.badge-info {
@apply border-blue-500/30 text-blue-400 bg-blue-500/10;
}
/* Card hover effect (legacy) */
.card-hover {
@apply transition-all duration-300 hover:shadow-lg hover:shadow-slate-900/50 hover:-translate-y-0.5;
}
}
/* ===== Global element styling (kept for backward compatibility) ===== */
pre {
@apply bg-slate-950 rounded-lg p-4 overflow-x-auto;
}
code {
@apply font-mono text-sm;
}
table {
@apply w-full;
}
th {
@apply text-left font-medium text-slate-400 text-xs uppercase tracking-wider;
}
td {
@apply text-sm;
}
input:focus,
textarea:focus,
select:focus {
@apply outline-none ring-2 ring-blue-500/30 border-blue-500/50;
}
button {
@apply transition-all duration-200;
}
/* Terminal styling */
.terminal {
@apply bg-slate-950 font-mono text-sm text-slate-300;
}
.terminal .prompt {
@apply text-emerald-400;
}
.terminal .command {
@apply text-slate-100;
}
.terminal .output {
@apply text-slate-400;
}
/* Chart tooltip styling */
.recharts-tooltip-wrapper {
@apply z-50;
}
/* Dialog overlay */
[data-state='open'] > [data-radix-dialog-overlay] {
@apply bg-slate-950/80 backdrop-blur-sm;
}
/* Dropdown menu styling */
[role='menuitem'] {
@apply cursor-pointer;
}
/* Progress bar animation */
@keyframes progress-indeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.progress-indeterminate::after {
content: '';
@apply absolute inset-0 bg-current;
animation: progress-indeterminate 1.5s ease-in-out infinite;
}