refactor: 页眉由 App 统一注入（ScreenLayout），三页共用一致页眉

- 新增 ScreenLayout 布局路由：注入共享 PageHeader + 全局左右键循环导航
- PageHeader 无 props，按路由自动识别状态（数据实时/3D 实时/媒体播放）
- DataScreen / DigitalTwin / MediaScreen 移除各自页眉，避免重复
- 页脚按页面按需保留（数据大屏 + 媒体轮播，数字孪生无）
- 管理后台不参与导航循环；旧 /screen2 路由移除
- 补齐 MediaScreen 音量/播放/翻页图标与浅色主题样式

src/utils/pageNav.js

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+/* =========================================================
+   页面循环导航 —— 左右方向键切换大屏页面
+   顺序：数据大屏 → 数字孪生 → 媒体轮播（循环）
+   管理后台不参与循环切换，仅在登录后进入
+   ← 向左切换 · → 向右切换
+   ========================================================= */
+
+export const PAGE_ORDER = [
+  { path: '/', label: '数据大屏' },
+  { path: '/twin', label: '数字孪生' },
+  { path: '/screen', label: '媒体轮播' },
+];
+
+/**
+ * 左右方向键循环切换页面。
+ * 在任意页面使用；当前路径不在 PAGE_ORDER 中时不响应。
+ */
+export function usePageNav() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const onKey = (e) => {
+      const idx = PAGE_ORDER.findIndex((p) => p.path === location.pathname);
+      if (idx === -1) return;
+      const n = PAGE_ORDER.length;
+      if (e.key === 'ArrowRight') {
+        navigate(PAGE_ORDER[(idx + 1) % n].path);
+      } else if (e.key === 'ArrowLeft') {
+        navigate(PAGE_ORDER[(idx - 1 + n) % n].path);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [navigate, location.pathname]);
+
+  return null;
+}
+
+/** 获取当前页在循环中的位置（-1 表示不在循环中） */
+export function usePageIndex() {
+  const location = useLocation();
+  return PAGE_ORDER.findIndex((p) => p.path === location.pathname);
+}