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

README.md

@@ -6,6 +6,12 @@
   <img src="docs/screenshots/login.png" width="720" alt="平台登录页"/>
 </p>
 
+## 多彩霓虹主题 · 2026-10-21
+
+全站采用玫红、橙金、薄荷绿、紫色与电光蓝多彩面板，包含彩虹渐变趋势图、极光登录背景及统一的导航、表格和 AI 对话样式。以下 12 张配图均于 2026-10-21 从当前运行版本重新采集。
+
+完整操作录屏与本次交付包：[交付树中的 2026-10-21 版本](https://code.xinmi.cloud/depei/panel-delivery-tree/src/branch/main/交付包/smart-parking-delivery-20261021)。
+
 ## 目录
 
 - [一、详细功能描述](#一详细功能描述)
@@ -112,7 +118,7 @@
 - **低延迟流媒体**：RTMP 收流 + Nginx-RTMP/FFmpeg 转 HLS 分发，兼顾实时性与浏览器兼容性。
 - **本地地图引擎**：Leaflet + 地图瓦片本地化切分与存储，支持自定义园区地图。
 - **私有化一键交付**：Docker Compose 编排前后端、数据库、媒体服务，一条命令完成部署。
-- **统一暗色面板设计体系**：玻璃拟态 + 霓虹光效 + 响应式布局，视觉统一、辨识度高。
+- **多彩霓虹面板设计体系**：五色指标卡 + 彩虹趋势图 + 极光玻璃背景 + 响应式布局，视觉统一、辨识度高。
 - **AI 能力可插拔**：支持标准 Chat Completions 协议，可按需切换 TokenFree 上的 Kimi / Qwen / Claude 等模型。
 
 ## 四、应用场景

frontend/src/app.tsx

@@ -1,4 +1,6 @@
 import { defineApp } from 'umi';
 import './global.less';
+import './styles/dazzle.less';
+import './styles/spectrum.less';
 
 export default defineApp({});

frontend/src/global.less

@@ -286,13 +286,13 @@ body::after {
 
 .ant-btn-primary {
   border: 0;
-  background: linear-gradient(135deg, #0891b2, #2563eb 52%, #7c3aed);
+  background: linear-gradient(135deg, #0e7490, #1d4ed8 52%, #6d28d9);
   box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
 }
 
 .ant-btn-primary:hover,
 .ant-btn-primary:focus {
-  background: linear-gradient(135deg, #06b6d4, #3b82f6 52%, #8b5cf6) !important;
+  background: linear-gradient(135deg, #0891b2, #2563eb 52%, #7c3aed) !important;
   box-shadow: 0 0 26px rgba(34, 211, 238, 0.26) !important;
 }
 
@@ -566,3 +566,40 @@ body::after {
 .ant-alert-close-icon:hover .anticon-close {
   color: #ecfeff !important;
 }
+/* Static message/notification calls (message.error etc.) do not consume ConfigProvider
+   dark theme in antd v5 — force dark glass panel so no white popup appears in dark shell. */
+.ant-message .ant-message-notice-content,
+.ant-notification .ant-notification-notice {
+  color: #e6f7ff;
+  border: 1px solid rgba(103, 232, 249, 0.28);
+  background: linear-gradient(145deg, rgba(14, 30, 56, 0.96), rgba(7, 18, 39, 0.96));
+  box-shadow: 0 16px 44px rgba(2, 8, 23, 0.55), 0 0 24px rgba(34, 211, 238, 0.12);
+  backdrop-filter: blur(16px);
+}
+
+.ant-message .ant-message-notice-content .ant-message-custom-content,
+.ant-notification .ant-notification-notice-message,
+.ant-notification .ant-notification-notice-description {
+  color: #e6f7ff !important;
+}
+
+.ant-message .ant-message-notice-content .anticon-close-circle,
+.ant-message .ant-message-notice-content .anticon-close {
+  color: #fb7185 !important;
+}
+
+.ant-message .ant-message-notice-content .anticon-exclamation-circle {
+  color: #fbbf24 !important;
+}
+
+.ant-message .ant-message-notice-content .anticon-check-circle {
+  color: #4ade80 !important;
+}
+
+.ant-message .ant-message-notice-content .anticon-info-circle {
+  color: #67e8f9 !important;
+}
+
+.ant-message .ant-message-notice-content .anticon-loading {
+  color: #67e8f9 !important;
+}

frontend/src/pages/aiChat/index.less

@@ -230,3 +230,48 @@
     max-width: 86%;
   }
 }
+/* ================= 绚丽增强（AI 对话专属） ================= */
+
+/* 机器人头像呼吸光环 */
+.ai-robot-avatar {
+  animation: dazzle-ai-robot 3s ease-in-out infinite;
+}
+
+@keyframes dazzle-ai-robot {
+  0%, 100% { box-shadow: 0 0 14px rgba(34, 211, 238, 0.24); }
+  50%      { box-shadow: 0 0 30px rgba(34, 211, 238, 0.5), 0 0 44px rgba(139, 92, 246, 0.28); }
+}
+
+/* 在线状态点脉冲 */
+.ai-status-dot {
+  animation: dazzle-ai-dot 1.8s ease-in-out infinite;
+}
+
+@keyframes dazzle-ai-dot {
+  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); transform: scale(1); }
+  50%      { box-shadow: 0 0 16px rgba(34, 197, 94, 1); transform: scale(1.25); }
+}
+
+/* 消息气泡进入动效 + 悬浮微光 */
+.ai-message-row {
+  animation: dazzle-ai-msg-in 0.3s ease both;
+}
+
+@keyframes dazzle-ai-msg-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.ai-bubble-content {
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+
+.ai-bubble:hover .ai-bubble-content {
+  border-color: rgba(103, 232, 249, 0.42);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 22px rgba(34, 211, 238, 0.14);
+}
+
+.is-user .ai-bubble:hover .ai-bubble-content {
+  border-color: rgba(147, 197, 253, 0.6);
+  box-shadow: 0 0 22px rgba(59, 130, 246, 0.28);
+}

frontend/src/pages/login/index.module.less

@@ -72,7 +72,7 @@
   box-shadow:
     0 24px 70px rgba(0, 0, 0, 0.48),
     inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 0 36px rgba(34, 211, 238, 0.12);
+    0 0 52px rgba(34, 211, 238, 0.22);
   backdrop-filter: blur(22px);
 }
 
@@ -120,7 +120,7 @@
 
 .brandRow p {
   margin: 4px 0 0;
-  color: rgba(226, 242, 255, 0.58);
+  color: rgba(226, 242, 255, 0.82);
   font-size: 12px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -168,7 +168,7 @@
   height: 44px;
   margin-top: 8px;
   border: 0;
-  background: linear-gradient(135deg, #0891b2, #2563eb 52%, #7c3aed);
+  background: linear-gradient(135deg, #0e7490, #1d4ed8 52%, #6d28d9);
   box-shadow: 0 14px 28px rgba(37, 99, 235, 0.3);
 }
 
@@ -182,7 +182,7 @@
   gap: 18px;
   margin-top: 24px;
   padding-top: 18px;
-  color: rgba(226, 242, 255, 0.52);
+  color: rgba(226, 242, 255, 0.78);
   font-size: 13px;
   border-top: 1px solid rgba(103, 232, 249, 0.14);
 }
@@ -200,3 +200,95 @@
     gap: 12px;
   }
 }
+/* ================= 绚丽增强（登录页专属） ================= */
+
+/* 登录面板：旋转霓虹描边（conic 渐变环，尊重 reduced-motion 全局降级） */
+.loginPanel {
+  position: relative;
+  overflow: hidden;
+}
+
+.loginPanel::selection {
+  background: rgba(34, 211, 238, 0.35);
+}
+
+.panelTitle span {
+  animation: dazzle-login-titlebar 2.6s ease-in-out infinite;
+}
+
+@keyframes dazzle-login-titlebar {
+  0%, 100% { box-shadow: 0 0 10px rgba(34, 211, 238, 0.7); }
+  50%      { box-shadow: 0 0 22px rgba(34, 211, 238, 1), 0 0 34px rgba(139, 92, 246, 0.5); }
+}
+
+.brandRow img {
+  animation: dazzle-login-logo 3.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-login-logo {
+  0%, 100% { filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.6)); transform: scale(1); }
+  50%      { filter: drop-shadow(0 0 26px rgba(34, 211, 238, 0.95)); transform: scale(1.05); }
+}
+
+.loginButton {
+  position: relative;
+  overflow: hidden;
+}
+
+.loginButton::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -60%;
+  width: 42%;
+  pointer-events: none;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transform: skewX(-18deg);
+  animation: dazzle-login-sheen 3s ease-in-out infinite;
+}
+
+@keyframes dazzle-login-sheen {
+  0%       { left: -60%; }
+  60%, 100% { left: 135%; }
+}
+
+/* 第三颗小光斑，丰富背景层次 */
+.orbThree {
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  right: 24%;
+  bottom: 16%;
+  border: 1px solid rgba(59, 130, 246, 0.34);
+  border-radius: 50%;
+  filter: blur(2px);
+  opacity: 0.6;
+  animation: floatThree 16s ease-in-out infinite alternate;
+}
+
+@keyframes floatThree {
+  to { transform: translate(20px, -30px) scale(1.12); }
+}
+
+.loginFooter span {
+  transition: color 0.25s ease, text-shadow 0.25s ease;
+}
+
+.loginFooter span:hover {
+  color: #a5f3fc;
+  text-shadow: 0 0 14px rgba(34, 211, 238, 0.75);
+}
+
+/* Spectrum login: saturated aurora, readable midnight glass. */
+.loginPage {
+  background: radial-gradient(ellipse at 12% 20%, #7b185c 0%, transparent 48%), radial-gradient(ellipse at 88% 15%, #44259b 0%, transparent 45%), radial-gradient(ellipse at 78% 95%, #075d65 0%, transparent 48%), radial-gradient(ellipse at 5% 95%, #874019 0%, transparent 45%), #100c29;
+}
+.loginPanel {
+  border-color: #c084fc;
+  background: linear-gradient(145deg, rgba(79, 26, 85, .94), rgba(22, 21, 55, .97) 55%, rgba(9, 57, 64, .96));
+  box-shadow: 0 30px 80px #09051c, -18px 0 65px #f43f5e30, 18px 0 65px #22d3ee35;
+}
+.orbOne { background: radial-gradient(circle at 30% 30%, #ffcf6c80, #fb458c40 60%, transparent 70%); border-color: #ffb46c; }
+.orbTwo { background: radial-gradient(circle at 30% 30%, #b599ff80, #26dfd440 60%, transparent 70%); border-color: #ae92ff; }
+.brandRow h1 { color: #fff0fb; }

frontend/src/pages/monitScreen/index.module.less

@@ -9,3 +9,18 @@
   object-fit: cover;
   background: #020617;
 }
+
+/* ================= 绚丽增强（监控大屏专属） ================= */
+
+.video {
+  border: 1px solid rgba(103, 232, 249, 0.22);
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px rgba(2, 8, 23, 0.4), 0 0 18px rgba(34, 211, 238, 0.08);
+  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.video:hover {
+  border-color: rgba(34, 211, 238, 0.7);
+  box-shadow: 0 0 26px rgba(34, 211, 238, 0.28);
+  transform: scale(1.01);
+}

frontend/src/pages/overview/index.less

@@ -352,3 +352,180 @@
   .overview-panels { grid-template-columns: 1fr; }
   .overview-header { flex-direction: column; gap: 10px; align-items: flex-start; }
 }
+
+/* ================= 绚丽增强（概览大屏专属） ================= */
+
+/* 头部横幅：流动的极光底色 + 顶部高光扫过 */
+.overview-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.overview-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.2), transparent 42%),
+    radial-gradient(circle at 82% 30%, rgba(139, 92, 246, 0.18), transparent 46%);
+  animation: dazzle-ov-header-drift 16s ease-in-out infinite alternate;
+}
+
+@keyframes dazzle-ov-header-drift {
+  from { transform: translate3d(-3%, 0, 0) scale(1); }
+  to   { transform: translate3d(3%, -4%, 0) scale(1.06); }
+}
+
+.overview-header::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 12%;
+  left: 12%;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.85), transparent);
+  background-repeat: no-repeat;
+  background-size: 45% 100%;
+  animation: dazzle-ov-topline 5.5s linear infinite;
+}
+
+@keyframes dazzle-ov-topline {
+  from { background-position: -45% 0; }
+  to   { background-position: 145% 0; }
+}
+
+/* 标题图标呼吸 + 副标题字母微光 */
+.overview-title-icon {
+  animation: dazzle-ov-icon-breathe 3s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-icon-breathe {
+  0%, 100% { text-shadow: 0 0 14px rgba(34, 211, 238, 0.7); transform: scale(1); }
+  50%      { text-shadow: 0 0 26px rgba(34, 211, 238, 1), 0 0 40px rgba(139, 92, 246, 0.5); transform: scale(1.08); }
+}
+
+/* 时钟数字霓虹 */
+.overview-clock {
+  text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
+  animation: dazzle-ov-clock 2.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-clock {
+  0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
+  50%      { text-shadow: 0 0 20px rgba(34, 211, 238, 0.7); }
+}
+
+/* KPI 卡片：进入浮起 + 图标光晕脉冲 + 数值渐变发光 */
+.kpi-card {
+  animation: dazzle-ov-card-in 0.5s ease both;
+}
+
+.kpi-card:nth-child(1) { animation-delay: 0.02s; }
+.kpi-card:nth-child(2) { animation-delay: 0.08s; }
+.kpi-card:nth-child(3) { animation-delay: 0.14s; }
+.kpi-card:nth-child(4) { animation-delay: 0.2s; }
+.kpi-card:nth-child(5) { animation-delay: 0.26s; }
+
+/* 常驻霓虹边框光（静态即可见） */
+.kpi-card {
+  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 10px 28px rgba(2, 8, 23, 0.42), 0 0 22px rgba(34, 211, 238, 0.1);
+}
+
+.ov-panel {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 24px rgba(34, 211, 238, 0.08);
+}
+
+@keyframes dazzle-ov-card-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.kpi-icon {
+  position: relative;
+  box-shadow: 0 0 18px rgba(34, 211, 238, 0.12);
+  animation: dazzle-ov-icon-halo 3.2s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-icon-halo {
+  0%, 100% { box-shadow: 0 0 10px rgba(34, 211, 238, 0.1); }
+  50%      { box-shadow: 0 0 24px rgba(34, 211, 238, 0.32); }
+}
+
+.kpi-value {
+  color: #d9f6ff;
+  animation: dazzle-ov-kpi-glow 3.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-kpi-glow {
+  0%, 100% { text-shadow: 0 0 10px rgba(34, 211, 238, 0.35); }
+  50%      { text-shadow: 0 0 22px rgba(34, 211, 238, 0.65), 0 0 36px rgba(139, 92, 246, 0.3); }
+}
+
+.kpi-corner {
+  animation: dazzle-ov-corner 3.6s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-corner {
+  0%, 100% { opacity: 0.35; }
+  50%      { opacity: 0.85; }
+}
+
+/* 面板：顶部高光线 + 标题条流光 */
+.ov-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.ov-panel::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 16%;
+  left: 16%;
+  height: 1px;
+  pointer-events: none;
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.7), transparent);
+}
+
+.panel-title-bar {
+  background: linear-gradient(180deg, #22d3ee, #3b82f6, #8b5cf6);
+  animation: dazzle-ov-titlebar 2.8s ease-in-out infinite;
+}
+
+@keyframes dazzle-ov-titlebar {
+  0%, 100% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
+  50%      { box-shadow: 0 0 18px rgba(34, 211, 238, 1), 0 0 30px rgba(139, 92, 246, 0.45); }
+}
+
+/* 趋势图与环图：发光滤镜 */
+.trend-chart svg {
+  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.28));
+}
+
+.donut-svg {
+  animation: dazzle-ov-donut-spin 40s linear infinite;
+  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3));
+}
+
+@keyframes dazzle-ov-donut-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* 最新动态列表：行进入交错 */
+.latest-list li {
+  animation: dazzle-ov-row-in 0.4s ease both;
+}
+
+.latest-list li:nth-child(1) { animation-delay: 0.05s; }
+.latest-list li:nth-child(2) { animation-delay: 0.1s; }
+.latest-list li:nth-child(3) { animation-delay: 0.15s; }
+.latest-list li:nth-child(4) { animation-delay: 0.2s; }
+.latest-list li:nth-child(5) { animation-delay: 0.25s; }
+
+@keyframes dazzle-ov-row-in {
+  from { opacity: 0; transform: translateX(8px); }
+  to   { opacity: 1; transform: translateX(0); }
+}

frontend/src/pages/overview/index.tsx

@@ -16,7 +16,7 @@ import './index.less';
 type OverviewData =
   ServiceTypes['GET /api/user/getOverviewStats']['res']['data'];
 
-const PALETTE = ['#22d3ee', '#fb7185', '#94a3b8'];
+const PALETTE = ['#42f5ba', '#ff668f', '#ffc56b'];
 
 const Overview: FC = () => {
   const [data, setData] = useState<OverviewData>();
@@ -183,6 +183,7 @@ const TrendChart: FC<{
     <div className="trend-chart">
       <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
         <defs>
+          <linearGradient id="trendLine" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#36e8dd" /><stop offset="45%" stopColor="#b593ff" /><stop offset="75%" stopColor="#ff76b6" /><stop offset="100%" stopColor="#ffc56b" /></linearGradient>
           <linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
             <stop offset="0%" stopColor="#22d3ee" stopOpacity="0.45" />
             <stop offset="100%" stopColor="#22d3ee" stopOpacity="0" />
@@ -203,7 +204,7 @@ const TrendChart: FC<{
         <path
           d={path.line}
           fill="none"
-          stroke="#22d3ee"
+          stroke="url(#trendLine)"
           strokeWidth="2.5"
           strokeLinecap="round"
           strokeLinejoin="round"

frontend/src/styles/dazzle.less

@@ -0,0 +1,221 @@
+/* ==========================================================================
+   绚丽增强层（Dazzle Layer）
+   在玻璃面板基座之上叠加动态极光、扫描光束、旋转渐变描边、呼吸辉光、
+   定制滚动条等纯装饰效果。只增强氛围，不改变文字颜色与对比度；
+   全部动效遵循 prefers-reduced-motion（见 global.less 统一降级）。
+   ========================================================================== */
+
+/* ---------- 0. 旋转描边专用自定义属性（不支持的浏览器自动退化为静态描边） ---------- */
+@property --dazzle-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+/* ---------- 1. 动态极光背景：三团彩色光斑缓慢漂移 ---------- */
+body::after {
+  background:
+    radial-gradient(circle at 22% 24%, rgba(34, 211, 238, 0.22), transparent 34%),
+    radial-gradient(circle at 78% 30%, rgba(139, 92, 246, 0.2), transparent 36%),
+    radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.22), transparent 40%);
+  animation: dazzle-aurora 36s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+@keyframes dazzle-aurora {
+  0%   { transform: translate3d(-2.5%, 0, 0) scale(1); }
+  50%  { transform: translate3d(1.5%, -2.5%, 0) scale(1.08); }
+  100% { transform: translate3d(2.5%, 2%, 0) scale(1.03); }
+}
+
+/* 网格缓慢漂移，营造“数据空间”感 */
+body::before {
+  animation: dazzle-grid-drift 70s linear infinite;
+}
+
+@keyframes dazzle-grid-drift {
+  from { background-position: 0 0, 0 0; }
+  to   { background-position: 36px 36px, 36px 36px; }
+}
+
+/* ---------- 2. 顶栏底部：一缕霓虹光束循环扫过 ---------- */
+.glass-header {
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-header::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(34, 211, 238, 0.95) 42%,
+    rgba(139, 92, 246, 0.95) 58%,
+    transparent
+  );
+  background-repeat: no-repeat;
+  background-size: 46% 100%;
+  animation: dazzle-header-sweep 7s linear infinite;
+}
+
+@keyframes dazzle-header-sweep {
+  from { background-position: -38% 0; }
+  to   { background-position: 138% 0; }
+}
+
+/* 品牌标题呼吸辉光 */
+.brand-title {
+  animation: dazzle-title-glow 4.2s ease-in-out infinite;
+}
+
+@keyframes dazzle-title-glow {
+  0%, 100% { text-shadow: 0 0 14px rgba(34, 211, 238, 0.35); }
+  50%      { text-shadow: 0 0 26px rgba(34, 211, 238, 0.6), 0 0 44px rgba(139, 92, 246, 0.35); }
+}
+
+/* ---------- 3. 卡片：悬浮时浮现旋转渐变描边 ---------- */
+.ant-card {
+  position: relative;
+}
+
+.ant-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  padding: 1px;
+  border-radius: inherit;
+  pointer-events: none;
+  background: conic-gradient(
+    from var(--dazzle-angle, 0deg),
+    rgba(34, 211, 238, 0) 0%,
+    rgba(34, 211, 238, 0.65) 12%,
+    rgba(139, 92, 246, 0.65) 22%,
+    rgba(34, 211, 238, 0) 34%
+  );
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+  animation: dazzle-ring-spin 7s linear infinite;
+}
+
+.ant-card:hover::before {
+  opacity: 1;
+}
+
+@keyframes dazzle-ring-spin {
+  to { --dazzle-angle: 360deg; }
+}
+
+/* ---------- 4. 主按钮：周期扫光 ---------- */
+.ant-btn-primary {
+  position: relative;
+  overflow: hidden;
+}
+
+.ant-btn-primary::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -60%;
+  width: 42%;
+  pointer-events: none;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
+  transform: skewX(-18deg);
+  animation: dazzle-btn-sheen 3.4s ease-in-out infinite;
+}
+
+@keyframes dazzle-btn-sheen {
+  0%       { left: -60%; }
+  60%, 100% { left: 135%; }
+}
+
+/* ---------- 5. 侧边菜单：选中项左侧发光指示条 ---------- */
+.glass-sider .ant-menu-item-selected {
+  position: relative;
+}
+
+.glass-sider .ant-menu-item-selected::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: 2px;
+  width: 3px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, #22d3ee, #8b5cf6);
+  box-shadow: 0 0 12px rgba(34, 211, 238, 0.9);
+  animation: dazzle-indicator-pulse 2.6s ease-in-out infinite;
+}
+
+@keyframes dazzle-indicator-pulse {
+  0%, 100% { box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
+  50%      { box-shadow: 0 0 18px rgba(34, 211, 238, 1), 0 0 28px rgba(139, 92, 246, 0.5); }
+}
+
+/* ---------- 6. 表格：行悬浮时左缘霓虹指示 ---------- */
+.ant-table-tbody > tr.ant-table-row > td {
+  transition: background 0.25s ease, box-shadow 0.25s ease;
+}
+
+.ant-table-tbody > tr.ant-table-row:hover > td:first-child {
+  box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.75);
+}
+
+/* ---------- 7. 霓虹滚动条 ---------- */
+.panel-content::-webkit-scrollbar,
+.ai-message-list::-webkit-scrollbar,
+.latest-list::-webkit-scrollbar,
+.ant-table-body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.panel-content::-webkit-scrollbar-thumb,
+.ai-message-list::-webkit-scrollbar-thumb,
+.latest-list::-webkit-scrollbar-thumb,
+.ant-table-body::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(34, 211, 238, 0.55), rgba(139, 92, 246, 0.55));
+  box-shadow: inset 0 0 6px rgba(34, 211, 238, 0.35);
+}
+
+.panel-content::-webkit-scrollbar-thumb:hover,
+.ai-message-list::-webkit-scrollbar-thumb:hover,
+.latest-list::-webkit-scrollbar-thumb:hover,
+.ant-table-body::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(34, 211, 238, 0.85), rgba(139, 92, 246, 0.85));
+}
+
+.panel-content::-webkit-scrollbar-track,
+.ai-message-list::-webkit-scrollbar-track,
+.latest-list::-webkit-scrollbar-track,
+.ant-table-body::-webkit-scrollbar-track {
+  background: rgba(4, 13, 30, 0.35);
+}
+
+/* ---------- 8. 文本选中色 ---------- */
+::selection {
+  color: #ecfeff;
+  background: rgba(34, 211, 238, 0.38);
+  text-shadow: none;
+}
+
+/* ---------- 9. 输入聚焦：霓虹外发光 ---------- */
+.ant-input:focus,
+.ant-input-focused,
+.ant-input-affix-wrapper-focused,
+.ant-select-focused .ant-select-selector,
+.ant-picker-focused {
+  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.16), 0 0 20px rgba(34, 211, 238, 0.22) !important;
+}

frontend/src/styles/spectrum.less

@@ -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; }
+}