refactor: 页眉由 App 统一注入(ScreenLayout),三页共用一致页眉

- 新增 ScreenLayout 布局路由:注入共享 PageHeader + 全局左右键循环导航
- PageHeader 无 props,按路由自动识别状态(数据实时/3D 实时/媒体播放)
- DataScreen / DigitalTwin / MediaScreen 移除各自页眉,避免重复
- 页脚按页面按需保留(数据大屏 + 媒体轮播,数字孪生无)
- 管理后台不参与导航循环;旧 /screen2 路由移除
- 补齐 MediaScreen 音量/播放/翻页图标与浅色主题样式
This commit is contained in:
Pine
2026-08-17 20:08:45 +08:00
parent b08055f8a5
commit 84b3f12146
11 changed files with 1131 additions and 47 deletions
+1 -20
View File
@@ -1,8 +1,6 @@
import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '../styles/datascreen.css';
import Icon from '../components/Icons';
import PageHeader from '../components/PageHeader';
/* =========================================================
昆明市大学生创业园 · OPC 智能园区数字运营中心
@@ -662,7 +660,7 @@ function MiddleRotator({ d }) {
const views = [
{
key: 'ai',
label: 'AI 智能应用',
label: 'OPC 智能资源',
icon: 'cpu',
node: (
<div className="bd-view bd-view-2">
@@ -732,26 +730,9 @@ function LiveFeed({ feed, limit = 7 }) {
========================================================= */
export default function DataScreen() {
const d = useParkSim();
const navigate = useNavigate();
// 左右方向键:→ 进入数字孪生页,← 返回(管理页为左端)
useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowRight') navigate('/twin');
else if (e.key === 'ArrowLeft') navigate('/admin');
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [navigate]);
return (
<div className="bd-page">
{/* 顶栏(共享组件,与数字孪生页风格一致) */}
<PageHeader
nav={{ to: '/twin', label: '数字孪生', icon: 'chevron-right', title: '按 → 进入数字孪生' }}
status="数据实时"
/>
{/* 园区今日概览(五个指标一行 + 标题右侧运行状态) */}
<TodayOverview d={d} />