feat(ui): 更新多彩霓虹主题与全页面实拍配图

2026-10-21 09:51:16 +08:00
parent 9421e62566
commit dffa686a81
17 changed files with 125 additions and 3 deletions
@@ -0,0 +1,101 @@
+/* Spectrum theme: color is carried by surfaces, not only animated accents. */
+:root {
+  --panel-bg: rgba(30, 20, 57, .88);
+  --panel-bg-strong: rgba(25, 18, 48, .98);
+  --panel-border: rgba(192, 132, 252, .42);
+  --text-secondary: #c9c4e4;
+}
+
+body {
+  background: radial-gradient(ellipse at 0% 15%, #631c64 0%, transparent 48%),
+    radial-gradient(ellipse at 100% 5%, #253d86 0%, transparent 45%),
+    radial-gradient(ellipse at 85% 100%, #126459 0%, transparent 44%),
+    radial-gradient(ellipse at 10% 100%, #783625 0%, transparent 40%), #100d25;
+}
+body::after {
+  background: radial-gradient(ellipse at 20% 25%, #ff409522, transparent 48%),
+    radial-gradient(ellipse at 80% 70%, #40eac522, transparent 48%);
+}
+.glass-header {
+  background: linear-gradient(100deg, #481b55ee, #20204eee 50%, #11484bee) !important;
+  border-bottom-color: #bd80ee;
+}
+.glass-header::after {
+  background: linear-gradient(90deg, #ff648c, #ffce73, #55edbb, #42dffa, #ae8aff, #ff79c5);
+  background-size: 100% 100%;
+  animation: none;
+}
+.brand-title { color: #fff0fb; }
+.glass-sider { background: linear-gradient(180deg, #281735ed, #141e3ded 60%, #123b3bed) !important; }
+.glass-sider .ant-menu-item,
+.glass-sider .ant-menu-submenu-title { --nav-color: #ff91ca; }
+.glass-sider .ant-menu-item:nth-child(3n + 2),
+.glass-sider .ant-menu-submenu:nth-child(3n + 2) > .ant-menu-submenu-title { --nav-color: #68efd0; }
+.glass-sider .ant-menu-item:nth-child(3n),
+.glass-sider .ant-menu-submenu:nth-child(3n) > .ant-menu-submenu-title { --nav-color: #ffd083; }
+.glass-sider .ant-menu .anticon { color: var(--nav-color); }
+.glass-sider .ant-menu-item-selected {
+  background: linear-gradient(100deg, #93315c, #563393 58%, #205467) !important;
+  box-shadow: inset 3px 0 #ffb4df, 0 6px 22px #e7478b22;
+}
+.glass-footer { background: linear-gradient(90deg, #321934ed, #142d3ded); }
+
+.overview-screen .overview-header {
+  background: linear-gradient(110deg, #70264b, #382667 52%, #13575b);
+  border-color: #dc80c8;
+}
+.overview-screen .overview-title p { color: #ffd2ef; }
+.overview-screen .overview-title-icon { color: #ffce73; }
+.overview-screen .kpi-card { --accent: #67e8f9; --tint: #13576c; }
+.overview-screen .tone-green { --accent: #78f9ba; --tint: #176044; }
+.overview-screen .tone-red { --accent: #ffa4c2; --tint: #7b254b; }
+.overview-screen .tone-purple { --accent: #dfb6ff; --tint: #58318b; }
+.overview-screen .tone-blue { --accent: #ffda85; --tint: #714323; }
+.overview-screen .kpi-card {
+  background: linear-gradient(125deg, var(--tint), #19172f 115%);
+  border-color: var(--accent);
+  border-top-width: 3px;
+  box-shadow: 0 12px 28px #09071955, inset 0 1px #ffffff22;
+}
+.overview-screen .kpi-icon { color: var(--accent); background: #ffffff14; animation: none; box-shadow: 0 0 22px #ffffff16; }
+.overview-screen .kpi-value { color: var(--accent); animation: none; text-shadow: 0 0 24px var(--tint); }
+.overview-screen .kpi-label { color: #fff4ff; }
+.overview-screen .kpi-sub { color: #e3dced; }
+.overview-screen .ov-panel {
+  background: linear-gradient(145deg, #24234c, #15162f);
+  border-color: #a393ed80;
+}
+.overview-screen .ov-dist { background: linear-gradient(145deg, #154b46, #171e36); border-color: #5adfc480; }
+.overview-screen .ov-latest { background: linear-gradient(145deg, #52243e, #22172f); border-color: #f987b380; }
+.overview-screen .panel-title-bar { background: linear-gradient(#ffce73, #ff76b6, #ae8aff); }
+.overview-screen .donut-svg { animation: none; }
+.overview-screen .latest-list li:nth-child(odd) { background: #ff91ca0b; border-radius: 8px; }
+
+#root .ant-card {
+  background: linear-gradient(120deg, #39204edb, #172b42ed 65%, #12463edb);
+  border-color: #b68be780;
+}
+.ant-card-head { background: linear-gradient(90deg, #d9468a28, #9865e528, #2ed6c228); }
+.ant-table-thead > tr > th {
+  background: #44305d !important;
+  color: #fff0fc !important;
+  border-bottom-color: #c087e77a !important;
+}
+.ant-table-tbody > tr:nth-child(even) > td { background: #a78bfa09 !important; }
+.ant-table-tbody > tr.ant-table-row:hover > td { background: #b46ae526 !important; }
+.ant-btn-primary {
+  background: linear-gradient(110deg, #a32962, #7434ae 55%, #176a79);
+  box-shadow: 0 6px 22px #ed4a982e;
+}
+.ant-btn-primary:hover, .ant-btn-primary:focus {
+  background: linear-gradient(110deg, #b42d6e, #843cc1 55%, #187788) !important;
+}
+.ant-pagination .ant-pagination-item-active { border-color: #ed91ce; background: #91396a44; }
+.ai-chat-page .panel-card { background: linear-gradient(135deg, #49214de8, #211b42f5 45%, #123c46eb); border-color: #cb88e5; }
+.ai-chat-page .ai-robot-avatar { background: linear-gradient(135deg, #b42c79, #6537bd); }
+.ai-chat-page .is-user .ai-bubble-content { background: linear-gradient(120deg, #74305f, #47377f); border-color: #d995d5; }
+.ai-chat-page .is-assistant .ai-bubble-content { background: #16454b; border-color: #57cdb2; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}