feat: 优化共享页眉组件，增加页面状态识别及导航功能

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 {