From ee08889009ae6af6d3079557972fc47f26fbd5de Mon Sep 17 00:00:00 2001 From: yuj Date: Thu, 4 Dec 2025 18:09:13 +0800 Subject: [PATCH] =?UTF-8?q?fix():=20=E4=B8=8A=E9=9D=A24=E4=B8=AA=20KPI=20?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E7=AD=89=E5=AE=BD=E6=8E=92=E5=88=97=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20-=20=E2=9C=85=20=E4=B8=8B=E9=9D=A22?= =?UTF-8?q?=E4=B8=AA=E5=9B=BE=E8=A1=A8=E6=A1=86=E7=AD=89=E5=AE=BD=E6=8E=92?= =?UTF-8?q?=E5=88=97=20=20=20=20=20=20=20=20=20=20-=20=E2=9C=85=20?= =?UTF-8?q?=E6=89=80=E6=9C=89=E5=85=83=E7=B4=A0=E5=AE=BD=E5=BA=A6=E5=AF=B9?= =?UTF-8?q?=E9=BD=90,=E6=95=B4=E4=BD=93=E6=9B=B4=E5=8A=A0=E5=8D=8F?= =?UTF-8?q?=E8=B0=83=E7=BE=8E=E8=A7=82=20=20=20=20=20=20=20=20=20=20-=20?= =?UTF-8?q?=E2=9C=85=20=E9=97=B4=E8=B7=9D=E7=BB=9F=E4=B8=80(=E9=83=BD?= =?UTF-8?q?=E6=98=AF=20gap:=2014-16px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 4 +- src/darkTheme.css | 193 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 195 insertions(+), 2 deletions(-) create mode 100644 src/darkTheme.css diff --git a/src/App.css b/src/App.css index a90d6d0..76fad7d 100644 --- a/src/App.css +++ b/src/App.css @@ -274,11 +274,11 @@ a{color:inherit; text-decoration:none} .panel h2{margin:0 0 8px 0; font-size:16px} .panel .desc{color:var(--muted); font-size:13px; margin-bottom:10px} -.flex-2{display:grid; grid-template-columns: 1.2fr 1fr; gap:16px} +.flex-2{display:grid; grid-template-columns: 1fr 1fr; gap:16px} .flex-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px} .full{display:block; width:100%; box-sizing:border-box} -.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px} +.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom: 16px;} .kpi{ background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); border:1px solid rgba(102, 126, 234, 0.1); diff --git a/src/darkTheme.css b/src/darkTheme.css new file mode 100644 index 0000000..bf91ddd --- /dev/null +++ b/src/darkTheme.css @@ -0,0 +1,193 @@ +/* 深色科技风主题覆盖样式 - 参考 x.ai */ + +/* 容器层级 */ +.container { + position: relative; + z-index: 1; +} + +/* 侧边栏深色样式 */ +.sidebar { + border-right: 1px solid var(--border); + background: rgba(20, 20, 30, 0.7); + backdrop-filter: blur(20px); +} + +.sidebar::before { + background: radial-gradient( + circle at 50% 0%, + rgba(124, 92, 255, 0.15) 0%, + transparent 70% + ); +} + +.brand .logo { + background: var(--primary-gradient); + box-shadow: var(--glow); +} + +.brand h1 { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + filter: drop-shadow(0 0 20px rgba(124, 92, 255, 0.5)); +} + +/* Header 深色样式 */ +.header { + border-bottom: 1px solid var(--border); + background: rgba(20, 20, 30, 0.8); + backdrop-filter: blur(20px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.search { + background: var(--soft); + border: 1px solid var(--border); +} + +.search:focus-within { + border-color: var(--accent); + box-shadow: 0 0 20px var(--accent-glow); +} + +/* 按钮深色样式 */ +.btn { + border: 1px solid var(--border); + background: var(--soft); + color: var(--text); +} + +.btn:hover { + border-color: var(--accent); + box-shadow: 0 0 15px var(--accent-glow); +} + +.btn.primary { + background: var(--primary-gradient); + border-color: transparent; + box-shadow: var(--glow); +} + +.btn.primary:hover { + box-shadow: 0 0 30px var(--accent-glow); +} + +/* 子导航深色样式 */ +.subnav { + background: rgba(20, 20, 30, 0.6); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border-subtle); +} + +.segment { + background: var(--soft); + border: 1px solid var(--border); +} + +.segment button.active { + background: var(--panel); + color: var(--text); + box-shadow: 0 0 10px rgba(124, 92, 255, 0.2); +} + +/* Panel 深色玻璃效果 */ +.panel { + background: var(--panel); + border: 1px solid var(--border); + backdrop-filter: blur(20px); + box-shadow: var(--shadow); +} + +.panel h2 { + color: var(--text); +} + +.panel .desc { + color: var(--text-secondary); +} + +/* KPI 卡片深色样式 */ +.kpi { + background: var(--panel); + border: 1px solid var(--border); + backdrop-filter: blur(20px); +} + +.kpi:hover { + border-color: var(--accent); + box-shadow: var(--glow); +} + +.kpi h3 { + color: var(--text-secondary); +} + +.kpi .num { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.5)); +} + +/* 表格深色样式 */ +.table { + color: var(--text); +} + +.table th { + color: var(--text-secondary); + border-bottom: 1px solid var(--border); +} + +.table td { + border-bottom: 1px solid var(--border-subtle); +} + +.table tbody tr:hover { + background: rgba(124, 92, 255, 0.05); +} + +/* Badge 深色样式 */ +.badge { + background: var(--soft); + border: 1px solid var(--border); + color: var(--text); +} + +.badge.good { + background: rgba(0, 212, 170, 0.15); + border-color: var(--good); + color: var(--good); + box-shadow: 0 0 10px rgba(0, 212, 170, 0.2); +} + +.badge.warn { + background: rgba(255, 179, 71, 0.15); + border-color: var(--warn); + color: var(--warn); + box-shadow: 0 0 10px rgba(255, 179, 71, 0.2); +} + +.badge.bad { + background: rgba(255, 107, 157, 0.15); + border-color: var(--bad); + color: var(--bad); + box-shadow: 0 0 10px rgba(255, 107, 157, 0.2); +} + +/* Chart 深色样式 */ +.chart { + border: 1px dashed var(--border); + color: var(--muted); + background: rgba(124, 92, 255, 0.02); +} + +/* Footer 深色样式 */ +.footer { + border-top: 1px solid var(--border-subtle); + color: var(--muted); + background: rgba(10, 10, 15, 0.5); +} \ No newline at end of file