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/index.css
+600 -244
View File
@@ -42,9 +42,9 @@
--dg-border: #30363d;
--dg-border-light: #21262d;
--dg-border-hover: #484f58;
--dg-text-primary: #f0f6fc;
--dg-text-secondary: #8b949e;
--dg-text-muted: #6e7681;
--dg-text-primary: #e6edf3;
--dg-text-secondary: #9aa4af;
--dg-text-muted: #768390;
--dg-blue: #58a6ff;
--dg-green: #3fb950;
--dg-red: #f85149;
@@ -54,9 +54,9 @@
--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-gradient-end: #1d4ed8;
--dg-gradient-text-start: #3b82f6;
--dg-gradient-text-end: #2563eb;
--dg-input-focus-ring: rgba(96, 165, 250, 0.2);
--chart-grid: #1e293b;
--chart-axis: #475569;
@@ -67,50 +67,52 @@
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
--skeleton-base: #21262d;
--skeleton-highlight: #30363d;
--dg-overlay: color-mix(in srgb, #010409 55%, transparent);
}
/* ===== 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%;
--background: 220 14% 96%;
--foreground: 220 14% 16%;
--card: 220 14% 99%;
--card-foreground: 220 14% 16%;
--popover: 220 14% 99%;
--popover-foreground: 220 14% 16%;
--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%;
--secondary-foreground: 220 14% 16%;
--muted: 220 14% 94%;
--muted-foreground: 220 10% 42%;
--accent: 220 14% 94%;
--accent-foreground: 220 14% 16%;
--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-background: 220 14% 97%;
--sidebar-foreground: 220 14% 22%;
--sidebar-primary: 217 91% 60%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 14% 94%;
--sidebar-accent-foreground: 220 14% 10%;
--sidebar-accent-foreground: 220 14% 16%;
--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-bg-active: #dfe1e8;
--dg-border: #e2e5eb;
--dg-border-light: #eaecf0;
--dg-border-hover: #d0d5dd;
--dg-text-primary: #1a1d23;
--dg-text-secondary: #5c6370;
--dg-text-muted: #9ca3af;
--dg-bg-primary: #f4f5f7;
--dg-bg-secondary: #fafbfc;
--dg-bg-tertiary: #eef0f4;
--dg-bg-hover: #e4e7ec;
--dg-bg-active: #d8dce3;
--dg-border: #d8dce3;
--dg-border-light: #e4e7ec;
--dg-border-hover: #c4c9d2;
--dg-text-primary: #2c313a;
--dg-text-secondary: #525964;
--dg-text-muted: #6b7280;
--dg-overlay: color-mix(in srgb, #2c313a 38%, transparent);
--dg-blue: #2563eb;
--dg-green: #16a34a;
--dg-red: #dc2626;
@@ -120,9 +122,9 @@
--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-gradient-end: #1d4ed8;
--dg-gradient-text-start: #2563eb;
--dg-gradient-text-end: #1e40af;
--dg-input-focus-ring: rgba(37, 99, 235, 0.15);
--chart-grid: #e2e5eb;
--chart-axis: #9ca3af;
@@ -135,199 +137,404 @@
--skeleton-highlight: #e8eaef;
}
/* ===== 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%;
/* ===== Theme 3: One Dark — Atom 暖灰 IDE（刻意与深海蓝蓝黑区分） // Logan.Li ===== */
[data-theme="one-dark"] {
--background: 220 9% 22%;
--foreground: 220 8% 82%;
--card: 220 8% 26%;
--card-foreground: 220 8% 82%;
--popover: 220 8% 24%;
--popover-foreground: 220 8% 82%;
--primary: 207 82% 66%;
--primary-foreground: 220 9% 18%;
--secondary: 220 8% 30%;
--secondary-foreground: 220 8% 82%;
--muted: 220 8% 30%;
--muted-foreground: 220 6% 52%;
--accent: 220 8% 30%;
--accent-foreground: 220 8% 82%;
--destructive: 355 65% 65%;
--destructive-foreground: 220 9% 18%;
--border: 220 7% 34%;
--input: 220 8% 28%;
--ring: 286 60% 67%;
--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-bg-active: #3d2a5e;
--dg-border: #2d1f4a;
--dg-border-light: #1c1330;
--dg-border-hover: #3d2a5e;
--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);
--chart-grid: #2d1f4a;
--chart-axis: #7c5a8a;
--chart-tooltip-bg: #130c21;
--chart-tooltip-border: #2d1f4a;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(192, 132, 252, 0.05);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(192, 132, 252, 0.2);
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
--skeleton-base: #1c1330;
--skeleton-highlight: #2d1f4a;
--sidebar-background: 220 9% 17%;
--sidebar-foreground: 220 8% 78%;
--sidebar-primary: 207 82% 66%;
--sidebar-primary-foreground: 220 9% 18%;
--sidebar-accent: 220 8% 26%;
--sidebar-accent-foreground: 220 8% 82%;
--sidebar-border: 220 7% 28%;
--sidebar-ring: 286 60% 67%;
/* 更亮暖灰底 + 侧栏压暗，贴近 Atom 编辑器层次 */
--dg-bg-primary: #282c34;
--dg-bg-secondary: #2f343e;
--dg-bg-tertiary: #383e4a;
--dg-bg-hover: #3e4451;
--dg-bg-active: #4b5263;
--dg-border: #4b5263;
--dg-border-light: #353b45;
--dg-border-hover: #5c6370;
--dg-text-primary: #d7dae0;
--dg-text-secondary: #9da5b4;
--dg-text-muted: #6b7285;
/* Atom 语法高亮色 — 品牌渐变用紫→绿，非深海蓝 */
--dg-blue: #61afef;
--dg-green: #98c379;
--dg-red: #e06c75;
--dg-orange: #d19a66;
--dg-purple: #c678dd;
--dg-cyan: #56b6c2;
--dg-yellow: #e5c07b;
--dg-card-hover-border: rgba(198, 120, 221, 0.42);
--dg-gradient-start: #c678dd;
--dg-gradient-end: #98c379;
--dg-gradient-text-start: #c678dd;
--dg-gradient-text-end: #61afef;
--dg-input-focus-ring: rgba(198, 120, 221, 0.22);
--chart-grid: #4b5263;
--chart-axis: #6b7285;
--chart-tooltip-bg: #2f343e;
--chart-tooltip-border: #4b5263;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(198, 120, 221, 0.06);
--shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(152, 195, 121, 0.18);
--shadow-dropdown: 0 10px 36px rgba(0, 0, 0, 0.45);
--skeleton-base: #383e4a;
--skeleton-highlight: #4b5263;
--dg-overlay: color-mix(in srgb, #21252b 52%, transparent);
}
/* ===== 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%;
/* ===== Theme 4: Catppuccin Mocha ===== */
[data-theme="catppuccin"] {
--background: 240 21% 15%;
--foreground: 226 64% 88%;
--card: 240 21% 12%;
--card-foreground: 226 64% 88%;
--popover: 240 21% 12%;
--popover-foreground: 226 64% 88%;
--primary: 217 92% 76%;
--primary-foreground: 240 21% 15%;
--secondary: 237 16% 23%;
--secondary-foreground: 226 64% 88%;
--muted: 237 16% 23%;
--muted-foreground: 228 24% 72%;
--accent: 237 16% 23%;
--accent-foreground: 226 64% 88%;
--destructive: 343 81% 75%;
--destructive-foreground: 240 21% 15%;
--border: 237 16% 23%;
--input: 237 16% 23%;
--ring: 217 92% 76%;
--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-bg-active: #2f4f3e;
--dg-border: #253d32;
--dg-border-light: #192c24;
--dg-border-hover: #2f4f3e;
--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);
--chart-grid: #253d32;
--chart-axis: #5a7c6b;
--chart-tooltip-bg: #111f1a;
--chart-tooltip-border: #253d32;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(74, 222, 128, 0.05);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.2);
--sidebar-background: 240 23% 9%;
--sidebar-foreground: 226 64% 85%;
--sidebar-primary: 217 92% 76%;
--sidebar-primary-foreground: 240 21% 15%;
--sidebar-accent: 237 16% 23%;
--sidebar-accent-foreground: 226 64% 88%;
--sidebar-border: 237 16% 23%;
--sidebar-ring: 217 92% 76%;
--dg-bg-primary: #1e1e2e;
--dg-bg-secondary: #181825;
--dg-bg-tertiary: #313244;
--dg-bg-hover: #45475a;
--dg-bg-active: #585b70;
--dg-border: #45475a;
--dg-border-light: #313244;
--dg-border-hover: #585b70;
--dg-text-primary: #cdd6f4;
--dg-text-secondary: #a6adc8;
--dg-text-muted: #7f849c;
--dg-blue: #89b4fa;
--dg-green: #a6e3a1;
--dg-red: #f38ba8;
--dg-orange: #fab387;
--dg-purple: #cba6f7;
--dg-cyan: #89dceb;
--dg-yellow: #f9e2af;
--dg-card-hover-border: rgba(137, 180, 250, 0.45);
--dg-gradient-start: #74c7ec;
--dg-gradient-end: #cba6f7;
--dg-gradient-text-start: #89b4fa;
--dg-gradient-text-end: #cba6f7;
--dg-input-focus-ring: rgba(137, 180, 250, 0.2);
--chart-grid: #45475a;
--chart-axis: #7f849c;
--chart-tooltip-bg: #181825;
--chart-tooltip-border: #45475a;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(137, 180, 250, 0.05);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(137, 180, 250, 0.15);
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
--skeleton-base: #192c24;
--skeleton-highlight: #253d32;
--skeleton-base: #313244;
--skeleton-highlight: #45475a;
--dg-overlay: color-mix(in srgb, #11111b 55%, transparent);
}
/* ===== 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%;
/* ===== Theme 5: Dracula — 紫粉经典（高辨识度） // Logan.Li ===== */
[data-theme="dracula"] {
--background: 231 15% 18%;
--foreground: 60 30% 96%;
--card: 231 15% 20%;
--card-foreground: 60 30% 96%;
--popover: 231 15% 20%;
--popover-foreground: 60 30% 96%;
--primary: 265 89% 78%;
--primary-foreground: 231 15% 18%;
--secondary: 232 14% 31%;
--secondary-foreground: 60 30% 96%;
--muted: 232 14% 31%;
--muted-foreground: 231 8% 68%;
--accent: 232 14% 31%;
--accent-foreground: 60 30% 96%;
--destructive: 0 100% 67%;
--destructive-foreground: 231 15% 18%;
--border: 232 14% 31%;
--input: 232 14% 31%;
--ring: 265 89% 78%;
--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-bg-active: #4d3928;
--dg-border: #3d2d20;
--dg-border-light: #2b1f16;
--dg-border-hover: #4d3928;
--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);
--chart-grid: #3d2d20;
--chart-axis: #9c7a54;
--chart-tooltip-bg: #1d1610;
--chart-tooltip-border: #3d2d20;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(251, 146, 60, 0.05);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 146, 60, 0.2);
--sidebar-background: 231 16% 16%;
--sidebar-foreground: 60 25% 92%;
--sidebar-primary: 265 89% 78%;
--sidebar-primary-foreground: 231 15% 18%;
--sidebar-accent: 232 14% 28%;
--sidebar-accent-foreground: 60 30% 96%;
--sidebar-border: 232 14% 28%;
--sidebar-ring: 265 89% 78%;
--dg-bg-primary: #282a36;
--dg-bg-secondary: #313341;
--dg-bg-tertiary: #44475a;
--dg-bg-hover: #4d5066;
--dg-bg-active: #5a5d78;
--dg-border: #44475a;
--dg-border-light: #383a4a;
--dg-border-hover: #6272a4;
--dg-text-primary: #f8f8f2;
--dg-text-secondary: #bfbfb5;
--dg-text-muted: #8b8b80;
--dg-blue: #8be9fd;
--dg-green: #50fa7b;
--dg-red: #ff5555;
--dg-orange: #ffb86c;
--dg-purple: #bd93f9;
--dg-cyan: #8be9fd;
--dg-yellow: #f1fa8c;
--dg-card-hover-border: rgba(189, 147, 249, 0.5);
--dg-gradient-start: #bd93f9;
--dg-gradient-end: #ff79c6;
--dg-gradient-text-start: #bd93f9;
--dg-gradient-text-end: #ff79c6;
--dg-input-focus-ring: rgba(189, 147, 249, 0.25);
--chart-grid: #44475a;
--chart-axis: #8b8b80;
--chart-tooltip-bg: #313341;
--chart-tooltip-border: #44475a;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(189, 147, 249, 0.08);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 121, 198, 0.2);
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.55);
--skeleton-base: #44475a;
--skeleton-highlight: #4d5066;
--dg-overlay: color-mix(in srgb, #191a21 58%, transparent);
}
/* ===== Theme 6: Tokyo Night — 深蓝紫霓虹 // Logan.Li ===== */
[data-theme="tokyo-night"] {
--background: 235 25% 12%;
--foreground: 226 48% 86%;
--card: 234 26% 16%;
--card-foreground: 226 48% 86%;
--popover: 234 26% 16%;
--popover-foreground: 226 48% 86%;
--primary: 221 70% 72%;
--primary-foreground: 235 25% 12%;
--secondary: 233 23% 22%;
--secondary-foreground: 226 48% 86%;
--muted: 233 23% 22%;
--muted-foreground: 225 15% 58%;
--accent: 233 23% 22%;
--accent-foreground: 226 48% 86%;
--destructive: 350 65% 72%;
--destructive-foreground: 235 25% 12%;
--border: 233 20% 26%;
--input: 233 23% 22%;
--ring: 221 70% 72%;
--radius: 0.625rem;
--sidebar-background: 235 28% 10%;
--sidebar-foreground: 226 45% 84%;
--sidebar-primary: 221 70% 72%;
--sidebar-primary-foreground: 235 25% 12%;
--sidebar-accent: 233 23% 20%;
--sidebar-accent-foreground: 226 48% 86%;
--sidebar-border: 233 20% 24%;
--sidebar-ring: 221 70% 72%;
--dg-bg-primary: #1a1b26;
--dg-bg-secondary: #24283b;
--dg-bg-tertiary: #2f3549;
--dg-bg-hover: #3b4261;
--dg-bg-active: #414868;
--dg-border: #3b4261;
--dg-border-light: #292e42;
--dg-border-hover: #565f89;
--dg-text-primary: #c0caf5;
--dg-text-secondary: #9aa5ce;
--dg-text-muted: #737aa2;
--dg-blue: #7aa2f7;
--dg-green: #9ece6a;
--dg-red: #f7768e;
--dg-orange: #ff9e64;
--dg-purple: #bb9af7;
--dg-cyan: #7dcfff;
--dg-yellow: #e0af68;
--dg-card-hover-border: rgba(122, 162, 247, 0.45);
--dg-gradient-start: #7aa2f7;
--dg-gradient-end: #bb9af7;
--dg-gradient-text-start: #7aa2f7;
--dg-gradient-text-end: #7dcfff;
--dg-input-focus-ring: rgba(122, 162, 247, 0.22);
--chart-grid: #3b4261;
--chart-axis: #737aa2;
--chart-tooltip-bg: #24283b;
--chart-tooltip-border: #3b4261;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(122, 162, 247, 0.06);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(187, 154, 247, 0.18);
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.55);
--skeleton-base: #2f3549;
--skeleton-highlight: #3b4261;
--dg-overlay: color-mix(in srgb, #15161e 58%, transparent);
}
/* ===== Theme 7: Nord（保留兼容，已从选择器下架） // Logan.Li ===== */
[data-theme="nord"] {
--background: 220 16% 22%;
--foreground: 218 27% 92%;
--card: 220 16% 19%;
--card-foreground: 218 27% 92%;
--popover: 220 16% 19%;
--popover-foreground: 218 27% 92%;
--primary: 193 43% 67%;
--primary-foreground: 220 16% 22%;
--secondary: 220 16% 28%;
--secondary-foreground: 218 27% 92%;
--muted: 220 16% 28%;
--muted-foreground: 220 16% 56%;
--accent: 220 16% 28%;
--accent-foreground: 218 27% 92%;
--destructive: 354 42% 56%;
--destructive-foreground: 218 27% 92%;
--border: 220 16% 28%;
--input: 220 16% 28%;
--ring: 193 43% 67%;
--radius: 0.625rem;
--sidebar-background: 220 16% 18%;
--sidebar-foreground: 218 27% 88%;
--sidebar-primary: 193 43% 67%;
--sidebar-primary-foreground: 220 16% 22%;
--sidebar-accent: 220 16% 28%;
--sidebar-accent-foreground: 218 27% 92%;
--sidebar-border: 220 16% 28%;
--sidebar-ring: 193 43% 67%;
--dg-bg-primary: #2e3440;
--dg-bg-secondary: #3b4252;
--dg-bg-tertiary: #434c5e;
--dg-bg-hover: #4c566a;
--dg-bg-active: #5e6a7e;
--dg-border: #4c566a;
--dg-border-light: #434c5e;
--dg-border-hover: #5e6a7e;
--dg-text-primary: #eceff4;
--dg-text-secondary: #d8dee9;
--dg-text-muted: #a0a8b8;
--dg-blue: #81a1c1;
--dg-green: #a3be8c;
--dg-red: #bf616a;
--dg-orange: #d08770;
--dg-purple: #b48ead;
--dg-cyan: #88c0d0;
--dg-yellow: #ebcb8b;
--dg-card-hover-border: rgba(136, 192, 208, 0.45);
--dg-gradient-start: #5e81ac;
--dg-gradient-end: #88c0d0;
--dg-gradient-text-start: #88c0d0;
--dg-gradient-text-end: #81a1c1;
--dg-input-focus-ring: rgba(136, 192, 208, 0.2);
--chart-grid: #4c566a;
--chart-axis: #a0a8b8;
--chart-tooltip-bg: #3b4252;
--chart-tooltip-border: #4c566a;
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(136, 192, 208, 0.05);
--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(136, 192, 208, 0.15);
--shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
--skeleton-base: #2b1f16;
--skeleton-highlight: #3d2d20;
--skeleton-base: #434c5e;
--skeleton-highlight: #4c566a;
--dg-overlay: color-mix(in srgb, #2e3440 55%, transparent);
}
/*
* ===== AIOps 设计令牌（Design Tokens）// Logan.Li =====
*
* 层级：--dg-* 主题原色 → --surface-* / --text-* 语义别名 → .dg-* 工具类
*
* 表面：--surface-canvas 页面底 | --surface-raised 卡片 | --surface-inset 输入/嵌套
* 文字：--text-primary 标题正文 | --text-secondary 次要 | --text-tertiary 辅助
* 边框：--border-default 常规 | --border-subtle 弱分割 | --border-strong 强调
* 品牌：--brand 主色 | --brand-muted 浅色底
* 图表：--chart-1 … --chart-7 与语义色一一对应
* 布局：--space-page 页面区块 | --layout-* 应用壳（侧栏/顶栏/内边距）
* 告警：--alert-warning-* / --alert-error-* 横幅语义色
* 主题：data-theme-preference 用户选择 | data-theme 实际生效主题
* 主流：system / ocean-deep(蓝黑) / light-professional
* 开发者：one-dark(暖灰) / dracula(紫粉) / tokyo-night(霓虹) / catppuccin
*
* 布局层级：dg-app-shell → dg-app-content → PageShell(.dg-page) → ContentPanel
*/
:root,
[data-theme] {
--surface-canvas: var(--dg-bg-primary);
--surface-raised: var(--dg-bg-secondary);
--surface-inset: var(--dg-bg-tertiary);
--surface-hover: var(--dg-bg-hover);
--surface-active: var(--dg-bg-active);
--text-primary: var(--dg-text-primary);
--text-secondary: var(--dg-text-secondary);
--text-tertiary: var(--dg-text-muted);
--border-default: var(--dg-border);
--border-subtle: var(--dg-border-light);
--border-strong: var(--dg-border-hover);
--brand: var(--dg-blue);
--brand-muted: color-mix(in srgb, var(--dg-blue) 14%, transparent);
/* 主按钮 — 纯色品牌，禁止渐变（企业严肃风） // Logan.Li */
--btn-primary-bg: var(--brand);
--btn-primary-hover: color-mix(in srgb, var(--brand) 86%, #000);
--btn-primary-fg: #ffffff;
--btn-primary-border: color-mix(in srgb, var(--brand) 75%, transparent);
--btn-primary-shadow: color-mix(in srgb, var(--brand) 18%, transparent);
--chart-1: var(--dg-blue);
--chart-2: var(--dg-green);
--chart-3: var(--dg-purple);
--chart-4: var(--dg-orange);
--chart-5: var(--dg-cyan);
--chart-6: var(--dg-yellow);
--chart-7: var(--dg-red);
--space-page: 1.5rem;
--space-section: 1rem;
--space-inline: 0.75rem;
--radius-card: 0.75rem;
--radius-control: 0.5rem;
--alert-warning-bg: color-mix(in srgb, var(--dg-yellow) 8%, transparent);
--alert-warning-border: color-mix(in srgb, var(--dg-yellow) 30%, transparent);
--alert-warning-text: var(--dg-yellow);
--alert-error-bg: color-mix(in srgb, var(--dg-red) 8%, transparent);
--alert-error-border: color-mix(in srgb, var(--dg-red) 30%, transparent);
--alert-error-text: var(--dg-red);
/* 全局布局节奏 — MainLayout / PageShell 单源 // Logan.Li */
--layout-sidebar-expanded: 16rem;
--layout-sidebar-collapsed: 4rem;
--layout-header-height: 3.5rem;
--layout-page-padding-x: 1.5rem;
--layout-page-padding-y: 1.5rem;
--layout-breadcrumb-gap: 1rem;
--layout-content-max: 100%;
--layout-footer-height: 3rem;
}
}
@@ -409,9 +616,62 @@
background: linear-gradient(to bottom right, var(--dg-gradient-start), var(--dg-gradient-end));
}
/* ===== 页面标题图标槽（单色图标 + 嵌套表面，避免渐变底） // Logan.Li ===== */
.dg-icon-box {
@apply shrink-0 w-10 h-10 rounded-lg flex items-center justify-center;
background: var(--surface-inset);
border: 1px solid var(--border-subtle);
color: var(--brand);
}
/* ===== 区块标题 / 告警横幅 ===== */
.dg-section-title {
@apply text-sm font-medium mb-4;
color: var(--text-primary);
}
.dg-alert-banner {
@apply rounded-lg border p-4;
background: var(--alert-warning-bg);
border-color: var(--alert-warning-border);
}
.dg-alert-banner-title {
@apply text-sm font-medium;
color: var(--alert-warning-text);
}
/* ===== 应用级布局壳（MainLayout 单源） // Logan.Li ===== */
.dg-app-shell {
min-height: 100vh;
background-color: var(--surface-canvas);
transition: background-color 0.3s ease, color 0.3s ease;
}
.dg-app-main {
display: flex;
flex-direction: column;
flex: 1;
min-height: 100vh;
padding-top: var(--layout-header-height);
}
.dg-app-breadcrumb {
padding: var(--layout-breadcrumb-gap) var(--layout-page-padding-x) 0;
}
.dg-app-content {
flex: 1;
padding: var(--layout-page-padding-y) var(--layout-page-padding-x);
min-height: 0;
max-width: var(--layout-content-max);
width: 100%;
}
.dg-app-footer {
padding: 0.75rem var(--layout-page-padding-x);
border-top: 1px solid var(--border-default);
margin-top: auto;
}
/* ===== Page Container ===== */
.dg-page {
@apply space-y-6 animate-fade-in;
gap: var(--space-page);
@apply flex flex-col animate-fade-in w-full;
}
.dg-page-header {
@apply flex items-center justify-between flex-wrap gap-4;
@@ -425,17 +685,51 @@
.dg-page-actions {
@apply flex items-center gap-2 flex-wrap;
}
.dg-page-toolbar {
@apply flex items-center gap-3 flex-wrap py-1;
}
.dg-page-tabs {
@apply w-full;
}
.dg-page-tab {
@apply outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-canvas)] rounded-t-md;
}
/* ===== 内容面板（列表页表格容器） // Logan.Li ===== */
.dg-content-panel {
@apply bg-[var(--surface-raised)] border border-[var(--border-default)] rounded-xl overflow-hidden;
box-shadow: var(--shadow-card);
}
.dg-content-panel-toolbar {
@apply flex items-center justify-between flex-wrap gap-3 p-4 border-b border-[var(--border-default)];
}
.dg-content-panel-body {
@apply p-0;
}
/* ===== 表面层级快捷类 ===== */
.dg-surface-canvas { background-color: var(--surface-canvas); }
.dg-surface-raised { background-color: var(--surface-raised); }
.dg-surface-inset { background-color: var(--surface-inset); }
/* ===== 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];
box-shadow: 0 4px 16px color-mix(in srgb, var(--dg-gradient-start) 25%, transparent);
@apply dg-btn active:scale-[0.98];
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
border: 1px solid var(--btn-primary-border);
box-shadow: 0 1px 2px var(--btn-primary-shadow);
}
.dg-btn-primary:hover {
box-shadow: 0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 35%, transparent);
background: var(--btn-primary-hover);
box-shadow: 0 2px 6px var(--btn-primary-shadow);
}
.dg-btn-primary:disabled {
opacity: 0.55;
box-shadow: none;
}
.dg-btn-secondary {
@apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-border-hover)] active:scale-[0.98];
@@ -444,7 +738,13 @@
@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 border border-red-500/20 hover:bg-red-500/20 active:scale-[0.98];
@apply dg-btn active:scale-[0.98];
background: color-mix(in srgb, var(--dg-red) 12%, transparent);
color: var(--dg-red);
border: 1px solid color-mix(in srgb, var(--dg-red) 28%, transparent);
}
.dg-btn-danger:hover {
background: color-mix(in srgb, var(--dg-red) 20%, transparent);
}
.dg-btn-sm {
@apply px-3 py-1.5 text-xs;
@@ -453,50 +753,95 @@
@apply px-6 py-3 text-base;
}
/* ===== Badges ===== */
/* ===== Semantic accent text（各主题 --dg-* 驱动） // Logan.Li ===== */
.dg-text-blue { color: var(--dg-blue); }
.dg-text-green { color: var(--dg-green); }
.dg-text-red { color: var(--dg-red); }
.dg-text-orange { color: var(--dg-orange); }
.dg-text-yellow { color: var(--dg-yellow); }
.dg-text-purple { color: var(--dg-purple); }
.dg-text-cyan { color: var(--dg-cyan); }
/* ===== Badges（color-mix 柔化背景，避免高对比硬色） // Logan.Li ===== */
.dg-badge {
@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border;
}
.dg-badge-blue {
@apply dg-badge bg-blue-500/10 text-blue-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-blue) 14%, transparent);
color: var(--dg-blue);
border-color: color-mix(in srgb, var(--dg-blue) 28%, transparent);
}
.dg-badge-green {
@apply dg-badge bg-green-500/10 text-green-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-green) 14%, transparent);
color: var(--dg-green);
border-color: color-mix(in srgb, var(--dg-green) 28%, transparent);
}
.dg-badge-red {
@apply dg-badge bg-red-500/10 text-red-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-red) 14%, transparent);
color: var(--dg-red);
border-color: color-mix(in srgb, var(--dg-red) 28%, transparent);
}
.dg-badge-yellow {
@apply dg-badge bg-yellow-500/10 text-yellow-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-yellow) 14%, transparent);
color: var(--dg-yellow);
border-color: color-mix(in srgb, var(--dg-yellow) 28%, transparent);
}
.dg-badge-purple {
@apply dg-badge bg-purple-500/10 text-purple-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-purple) 14%, transparent);
color: var(--dg-purple);
border-color: color-mix(in srgb, var(--dg-purple) 28%, transparent);
}
.dg-badge-orange {
@apply dg-badge bg-orange-500/10 text-orange-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-orange) 14%, transparent);
color: var(--dg-orange);
border-color: color-mix(in srgb, var(--dg-orange) 28%, transparent);
}
.dg-badge-cyan {
@apply dg-badge bg-cyan-500/10 text-cyan-400;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-cyan) 14%, transparent);
color: var(--dg-cyan);
border-color: color-mix(in srgb, var(--dg-cyan) 28%, transparent);
}
.dg-badge-muted {
@apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)];
@apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border-[var(--dg-border)];
}
/* ===== Status Badges ===== */
.dg-status-running {
@apply dg-badge bg-green-500/10 text-green-400 border border-green-500/20;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-green) 14%, transparent);
color: var(--dg-green);
border-color: color-mix(in srgb, var(--dg-green) 28%, transparent);
}
.dg-status-stopped {
@apply dg-badge bg-gray-500/10 text-gray-400 border border-gray-500/20;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-text-muted) 14%, transparent);
color: var(--dg-text-secondary);
border-color: color-mix(in srgb, var(--dg-text-muted) 28%, transparent);
}
.dg-status-warning {
@apply dg-badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-yellow) 14%, transparent);
color: var(--dg-yellow);
border-color: color-mix(in srgb, var(--dg-yellow) 28%, transparent);
}
.dg-status-error {
@apply dg-badge bg-red-500/10 text-red-400 border border-red-500/20;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-red) 14%, transparent);
color: var(--dg-red);
border-color: color-mix(in srgb, var(--dg-red) 28%, transparent);
}
.dg-status-info {
@apply dg-badge bg-blue-500/10 text-blue-400 border border-blue-500/20;
@apply dg-badge;
background: color-mix(in srgb, var(--dg-blue) 14%, transparent);
color: var(--dg-blue);
border-color: color-mix(in srgb, var(--dg-blue) 28%, transparent);
}
/* ===== Scrollbar ===== */
@@ -589,16 +934,17 @@
@apply w-2 h-2 rounded-full;
}
.status-dot-running {
@apply bg-emerald-400 animate-pulse;
background-color: var(--dg-green);
@apply animate-pulse;
}
.status-dot-stopped {
@apply bg-slate-400;
background-color: var(--dg-text-muted);
}
.status-dot-warning {
@apply bg-amber-400;
background-color: var(--dg-yellow);
}
.status-dot-error {
@apply bg-red-400;
background-color: var(--dg-red);
}
/* ===== Chart theme-aware utilities ===== */
@@ -656,6 +1002,16 @@ td {
color: var(--dg-text-primary);
}
select {
background-color: var(--dg-bg-tertiary);
border: 1px solid var(--dg-border);
color: var(--dg-text-primary);
}
select option {
background-color: var(--dg-bg-secondary);
color: var(--dg-text-primary);
}
input:focus,
textarea:focus,
select:focus {
@@ -696,10 +1052,10 @@ button {
box-shadow: var(--shadow-dropdown) !important;
}
/* Dialog overlay */
/* Dialog overlay — 柔化遮罩，避免纯黑高对比 // Logan.Li */
[data-state='open'] > [data-radix-dialog-overlay] {
@apply backdrop-blur-sm;
background-color: color-mix(in srgb, var(--dg-bg-primary) 80%, transparent);
background-color: var(--dg-overlay) !important;
}
/* Dropdown menu styling */