From b08055f8a5a54500156a7daf12e2fc7e12d9190f Mon Sep 17 00:00:00 2001 From: Pine Date: Mon, 17 Aug 2026 19:50:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=85=B1=E4=BA=AB?= =?UTF-8?q?=E9=A1=B5=E7=9C=89=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=8A=B6=E6=80=81=E8=AF=86=E5=88=AB=E5=8F=8A?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PageHeader.jsx | 64 +++++++++++++++++--------- src/styles/datascreen.css | 87 ++++++++++++++++++++++++++--------- 2 files changed, 106 insertions(+), 45 deletions(-) diff --git a/src/components/PageHeader.jsx b/src/components/PageHeader.jsx index c2f754c..ba06e2c 100644 --- a/src/components/PageHeader.jsx +++ b/src/components/PageHeader.jsx @@ -1,15 +1,25 @@ import { useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { useNavigate, useLocation } from 'react-router-dom'; import Icon from './Icons'; +import { PAGE_ORDER, usePageIndex } from '../utils/pageNav'; +import { Avatar, AvatarImage, AvatarFallback } from '@appica/ui-react/avatar' /* ========================================================= - 共享页眉 —— 两个大屏页面（数据大屏 / 数字孪生）统一风格 - 仅通过 props 区分：导航目标、状态文案 + 共享页眉 —— 所有大屏页面统一（由 ScreenLayout 注入） + 状态文案按当前页面自动识别；左右键循环 + 可点击按钮切换 ========================================================= */ -export default function PageHeader({ nav, status = '数据实时' }) { +const STATUS_BY_PATH = { + '/': '数据实时', + '/twin': '3D 实时', + '/screen': '媒体播放', +}; + +export default function PageHeader() { const navigate = useNavigate(); + const location = useLocation(); const [now, setNow] = useState(new Date()); + const pageIdx = usePageIndex(); useEffect(() => { const iv = setInterval(() => setNow(new Date()), 1000); @@ -19,33 +29,43 @@ export default function PageHeader({ nav, status = '数据实时' }) { const dateStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`; const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()]; const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false }); + const status = STATUS_BY_PATH[location.pathname] || '在线'; + + // 循环中的相邻页面（左/右） + const n = PAGE_ORDER.length; + const left = pageIdx >= 0 ? PAGE_ORDER[(pageIdx - 1 + n) % n] : null; + const right = pageIdx >= 0 ? PAGE_ORDER[(pageIdx + 1) % n] : null; return (
- - - - - - - + {/* + Logo + */} + + +

昆明市大学生创业园 · OPC 智能园区数字运营中心

-
云南省首家政府主办大学生创业孵化园区 · 空间+孵化+融资+政策+资源+AI赋能+综合服务 七位一体
+
云南省首家政府主办大学生创业孵化园区 · 空间+孵化+融资+政策+资源+AI赋能+综合服务 七位一体
- {nav && ( - - )} +
+ {left && ( + + )} + · + {right && ( + + )} +
{status} diff --git a/src/styles/datascreen.css b/src/styles/datascreen.css index 2688848..ff58bdb 100644 --- a/src/styles/datascreen.css +++ b/src/styles/datascreen.css @@ -2,6 +2,29 @@ 昆明市大学生创业园 · OPC 智能园区数据大屏 浅色科技风 · 通透玻璃质感 · 弱化卡片感（对齐参考图） ========================================================= */ + +/* 全局布局壳：页眉由 App 注入，所有页面统一使用 */ +.bd-layout { + height: 100vh; + overflow: hidden; + display: flex; + flex-direction: column; + background: + radial-gradient(ellipse 75% 60% at 88% -8%, rgba(76, 194, 255, 0.16) 0%, transparent 62%), + radial-gradient(ellipse 65% 55% at 5% 110%, rgba(47, 107, 255, 0.12) 0%, transparent 58%), + linear-gradient(158deg, #eef5fe 0%, #f7fbff 46%, #e9f1fc 100%); +} +.bd-layout-main { + position: relative; + z-index: 1; + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + +/* 页面内容块：在 bd-layout-main 内撑满，不再自持页眉与 100vh */ .bd-page { --bd-blue: #2f6bff; --bd-blue-deep: #1d4fd8; @@ -13,17 +36,14 @@ --bd-sub: #7d8fa9; --bd-line: #e3ecf7; - height: 100vh; + flex: 1; + min-height: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; color: var(--bd-ink); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; - background: - radial-gradient(ellipse 75% 60% at 88% -8%, rgba(76, 194, 255, 0.16) 0%, transparent 62%), - radial-gradient(ellipse 65% 55% at 5% 110%, rgba(47, 107, 255, 0.12) 0%, transparent 58%), - linear-gradient(158deg, #eef5fe 0%, #f7fbff 46%, #e9f1fc 100%); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; @@ -86,9 +106,15 @@ white-space: nowrap; } .bd-header-title-accent { - color: var(--bd-blue); + color: #fc8318; font-weight: 700; } + +.bd-header-content—highlights { + color: #022697; + font-weight: 500; +} + .bd-header-sub { margin-top: 2px; font-size: 11px; @@ -1538,13 +1564,10 @@ /* ============ 数字孪生独立页（/twin） ============ */ .bd-twin-page { - height: 100vh; + flex: 1; + min-height: 0; display: flex; flex-direction: column; - background: - radial-gradient(ellipse 70% 55% at 85% -5%, rgba(76, 194, 255, 0.14) 0%, transparent 60%), - radial-gradient(ellipse 60% 50% at 8% 108%, rgba(47, 107, 255, 0.10) 0%, transparent 55%), - linear-gradient(155deg, #eef5fe 0%, #f5f9ff 45%, #eaf2fc 100%); overflow: hidden; } .bd-twin-main { @@ -1724,28 +1747,46 @@ overflow-y: auto; } -/* 导航提示按钮 */ -.bd-nav-hint { +/* 页眉左右切换按钮（← 左页 · 右页 →，可点击） */ +.bd-nav-keys { display: inline-flex; align-items: center; - gap: 5px; - padding: 7px 13px; - font-size: 12.5px; + gap: 6px; + padding: 5px 10px; + font-size: 11.5px; font-weight: 600; color: #4a5b76; - background: rgba(255,255,255,0.75); - border: 1px solid rgba(47,107,255,0.16); + background: rgba(255,255,255,0.7); + border: 1px solid rgba(47,107,255,0.14); border-radius: 9px; + white-space: nowrap; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} +.bd-nav-key { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 4px 8px; + border: none; + background: transparent; + color: inherit; + font-size: inherit; + font-weight: 600; + font-family: inherit; + border-radius: 6px; cursor: pointer; transition: all 0.2s; - white-space: nowrap; } -.bd-nav-hint:hover { +.bd-nav-key:hover { color: var(--bd-blue); - border-color: rgba(47,107,255,0.4); - background: rgba(255,255,255,0.95); + background: rgba(47, 107, 255, 0.1); +} +.bd-nav-key .appica-ico { color: var(--bd-blue); } +.bd-nav-dot { + color: rgba(125, 147, 181, 0.5); + font-size: 10px; } -.bd-nav-hint .appica-ico { color: var(--bd-blue); } /* ============ 园区今日概览 ============ */ .bd-overview {