diff --git a/README.md b/README.md index 06509fc..1ec0ecb 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,12 @@ 平台登录页

+## 多彩霓虹主题 · 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 等模型。 ## 四、应用场景 diff --git a/docs/screenshots/ai-chat.png b/docs/screenshots/ai-chat.png index 6c57f4e..3707995 100644 Binary files a/docs/screenshots/ai-chat.png and b/docs/screenshots/ai-chat.png differ diff --git a/docs/screenshots/ai-settings.png b/docs/screenshots/ai-settings.png index 5a9648d..f4144ef 100644 Binary files a/docs/screenshots/ai-settings.png and b/docs/screenshots/ai-settings.png differ diff --git a/docs/screenshots/alarm-rule-management.png b/docs/screenshots/alarm-rule-management.png index 485d043..3c1d468 100644 Binary files a/docs/screenshots/alarm-rule-management.png and b/docs/screenshots/alarm-rule-management.png differ diff --git a/docs/screenshots/alarms.png b/docs/screenshots/alarms.png index 00fb077..609c7af 100644 Binary files a/docs/screenshots/alarms.png and b/docs/screenshots/alarms.png differ diff --git a/docs/screenshots/camera-management.png b/docs/screenshots/camera-management.png index 8a0c887..753ac0d 100644 Binary files a/docs/screenshots/camera-management.png and b/docs/screenshots/camera-management.png differ diff --git a/docs/screenshots/campus-state.png b/docs/screenshots/campus-state.png index 138880b..3496eb3 100644 Binary files a/docs/screenshots/campus-state.png and b/docs/screenshots/campus-state.png differ diff --git a/docs/screenshots/login.png b/docs/screenshots/login.png index fd787ae..3dfde77 100644 Binary files a/docs/screenshots/login.png and b/docs/screenshots/login.png differ diff --git a/docs/screenshots/map-management.png b/docs/screenshots/map-management.png index cab0a98..4bdc76b 100644 Binary files a/docs/screenshots/map-management.png and b/docs/screenshots/map-management.png differ diff --git a/docs/screenshots/monitoring-screen.png b/docs/screenshots/monitoring-screen.png index f5d635a..f3beb9d 100644 Binary files a/docs/screenshots/monitoring-screen.png and b/docs/screenshots/monitoring-screen.png differ diff --git a/docs/screenshots/overview.png b/docs/screenshots/overview.png index ee3811c..77cd691 100644 Binary files a/docs/screenshots/overview.png and b/docs/screenshots/overview.png differ diff --git a/docs/screenshots/user-info.png b/docs/screenshots/user-info.png index 5f24303..4cbff7d 100644 Binary files a/docs/screenshots/user-info.png and b/docs/screenshots/user-info.png differ diff --git a/docs/screenshots/user-management.png b/docs/screenshots/user-management.png index c886b54..8e8301d 100644 Binary files a/docs/screenshots/user-management.png and b/docs/screenshots/user-management.png differ diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx index 84acf44..689a224 100644 --- a/frontend/src/app.tsx +++ b/frontend/src/app.tsx @@ -1,5 +1,6 @@ import { defineApp } from 'umi'; import './global.less'; import './styles/dazzle.less'; +import './styles/spectrum.less'; export default defineApp({}); \ No newline at end of file diff --git a/frontend/src/pages/login/index.module.less b/frontend/src/pages/login/index.module.less index 5ee0051..55f6e89 100644 --- a/frontend/src/pages/login/index.module.less +++ b/frontend/src/pages/login/index.module.less @@ -279,3 +279,16 @@ 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; } diff --git a/frontend/src/pages/overview/index.tsx b/frontend/src/pages/overview/index.tsx index ab240aa..c9686ea 100644 --- a/frontend/src/pages/overview/index.tsx +++ b/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(); @@ -183,6 +183,7 @@ const TrendChart: FC<{
+ @@ -203,7 +204,7 @@ const TrendChart: FC<{ .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; } +}