refactor: 页眉由 App 统一注入(ScreenLayout),三页共用一致页眉
- 新增 ScreenLayout 布局路由:注入共享 PageHeader + 全局左右键循环导航 - PageHeader 无 props,按路由自动识别状态(数据实时/3D 实时/媒体播放) - DataScreen / DigitalTwin / MediaScreen 移除各自页眉,避免重复 - 页脚按页面按需保留(数据大屏 + 媒体轮播,数字孪生无) - 管理后台不参与导航循环;旧 /screen2 路由移除 - 补齐 MediaScreen 音量/播放/翻页图标与浅色主题样式
This commit is contained in:
@@ -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} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user