不缓存：切到 /b → ScreenA 卸载 → VChart dispose（实例销毁）
        切回 /a → ScreenA 重建 → VChart 重新 init（100-200ms 白窗 + 数据从零起）
缓存后：切到 /b → ScreenA 失活（DOM 摘下，实例保留）
        切回 /a → ScreenA 激活（DOM 装回，ECharts 实例原地满血）

<!-- App.vue -->
<template>
  <router-view v-slot="{ Component }">
    <Transition name="screen" mode="out-in">
      <!-- include 白名单：只缓存三屏（纪律见坑 1） -->
      <KeepAlive :include="['ScreenA', 'ScreenB', 'ScreenC']">
        <component :is="Component" />
      </KeepAlive>
    </Transition>
  </router-view>
</template>

<script setup lang="ts">
// script setup 默认取文件名为组件名，但显式声明更稳（构建压缩不丢）
defineOptions({ name: "ScreenB" });
</script>

import { onActivated, onDeactivated, onMounted } from "vue";

// 屏 B 的协议示例
onMounted(() => {
  // 一次性：图表 init 已由 VChart 内聚，这里只做屏级初始化
});

onActivated(() => {
  // 每次切回：防御性 resize（v-show 时代 Day 69 纪律的 KeepAlive 版）
  // ——ECharts 实例活着，但容器经历了摘下/装回，尺寸需要校准
  resizeAllCharts();
});

onDeactivated(() => {
  // 每次切走：可暂停的"重活"挂起
  // 例：屏 B 的排名图带 3s 轮询刷新 → 失活时停表（数据照常进 store，不丢）
  rankTimer.pause();
});

<!-- App.vue 完整结构（本周累积成果合体） -->
<script setup lang="ts">
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "./stores/dashboard";
import { useCarousel } from "./composables/useCarousel";
import { bindCarousel } from "./router";
import ConnIndicator from "./components/ConnIndicator.vue";
import ScreenNav from "./components/ScreenNav.vue";
import DangerDialog from "./components/DangerDialog.vue";

const store = useDashboardStore();
const { connState } = storeToRefs(store);

onMounted(() => store.startDataLink());   // Day 81 接线
bindCarousel(useCarousel());              // Day 79 轮播
</script>

<template>
  <div class="screen-frame">
    <div class="screen-canvas" :style="{ transform: `scale(${scale})` }">
      <header class="top-bar">
        <h1>智慧工厂监控中心</h1>
        <ConnIndicator :state="connState" />
      </header>

      <router-view v-slot="{ Component }">
        <Transition name="screen" mode="out-in">
          <KeepAlive :include="['ScreenA', 'ScreenB', 'ScreenC']">
            <component :is="Component" />
          </KeepAlive>
        </Transition>
      </router-view>

      <ScreenNav />

      <!-- Teleport 弹窗（第五节）：逻辑放这，渲染传送到 body -->
      <DangerDialog />
    </div>
  </div>
</template>

1. 弹窗被缩放：1366×768 机器上 scale≈0.71，弹窗文字小到难读
2. 被裁剪：任何祖先 overflow: hidden 都可能切掉投影/阴影
3. z-index 失控：缩放壳的层叠上下文让"全局置顶"失去意义

<!-- to="body"：DOM 传送，逻辑原地 -->
<Teleport to="body">
  <div class="dialog-mask">...</div>
</Teleport>

<!-- src/components/DangerDialog.vue -->
<script setup lang="ts">
/**
 * 危险告警确认弹窗
 * 触发条件：store 里出现未确认的 danger 级告警
 * 行为：暂停轮播 + 弹窗置顶（Teleport 到 body，不受 scale 壳影响）
 * 确认后：恢复轮播、告警标记 acked
 */
import { watch } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "../stores/dashboard";
import { useCarousel } from "../composables/useCarousel";

const store = useDashboardStore();
const { dangerCount } = storeToRefs(store);
const { setAutoplay } = useCarousel();

// 弹窗可见性 = 存在未确认危险告警（纯派生，无需本地状态——Day 73 哲学）
const visible = computed(() => dangerCount.value > 0);

// 弹窗出现 → 暂停轮播；消失 → 恢复（成对纪律的响应式版）
watch(visible, (show) => setAutoplay(!show), { immediate: true });

// 最新一条危险告警（弹窗正文）
const currentDanger = computed(() =>
  [...store.alarms].reverse().find((a) => a.level === "danger" && !a.acked)
);
</script>

<template>
  <!-- 传送门：逻辑属于大屏，渲染属于 body -->
  <Teleport to="body">
    <Transition name="dialog">
      <div v-if="visible" class="dialog-mask">
        <div class="dialog">
          <div class="dialog__title">⚠ 危险告警</div>
          <div class="dialog__text">{{ currentDanger?.text }}</div>
          <div class="dialog__actions">
            <button class="dialog__btn" @click="store.ackAlarm(currentDanger!.id)">
              确认处理
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<style scoped>
/* 注意：传送后的样式仍在组件 scoped 体系内（属性选择器跟随 DOM 走） */
.dialog-mask {
  position: fixed; inset: 0; z-index: 9999;          /* body 直挂，置顶不受限 */
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 20, 0.7);                   /* token 化的遮罩 */
}
.dialog {
  background: var(--bg-card); border: 1px solid var(--state-danger);
  border-radius: var(--radius-card); padding: var(--gap-lg);
  box-shadow: 0 0 24px rgba(255, 77, 79, 0.35);       /* 呼吸边框的红版 */
}
</style>

// src/router/index.ts（替换 Day 79 的空守卫）
import { useDashboardStore } from "../stores/dashboard";

router.beforeEach(() => {
  const store = useDashboardStore();
  // 危险告警未确认 → 拦截一切切屏（轮播自切也会被拦，因为轮播也走 push）
  if (store.dangerCount > 0) {
    console.warn("[router] 危险告警确认中，切屏已拦截");
    return false;                     // 取消导航
  }
  return true;
});