┌─────────────────────────────────────────────┐
│ useCarousel（composable）—— 只做决策          │
│   职责：计时、算下一屏、暂停/恢复              │
│   动作：决策出结果后调 router.push            │
├─────────────────────────────────────────────┤
│ Vue Router —— 只做执行                        │
│   职责：URL 变更、组件挂载切换、守卫关卡        │
├─────────────────────────────────────────────┤
│ Transition —— 只做皮肤                        │
│   职责：切换时的淡入淡出                      │
└─────────────────────────────────────────────┘

// src/composables/useCarousel.ts
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { SCREENS } from "../components/ScreenNav.vue";   // Day 78 的单一来源

/**
 * 轮播调度器（组合式函数）
 * 迁移自 Day 64 ScreenRouter 的 scheduleNext/dwellMs/setAutoPlay
 *
 * 设计要点：
 * 1. 只决策不执行：到点调 router.push，不碰任何 DOM
 * 2. 手动切换重置计时：用户点了圆点，当前屏的停留从头算（原生版行为）
 * 3. 页面隐藏自动暂停：visibilitychange（Day 64 的省 CPU 策略）
 * 4. 成对纪律：定时器在 onUnmounted 清理
 */
export function useCarousel() {
  const router = useRouter();
  const autoplay = ref(true);
  let timer = 0;

  /** 停留时长查表（SCREENS 单一来源） */
  const dwellOf = (name: string): number =>
    (SCREENS.find((s) => s.name === name)?.dwell ?? 15) * 1000;

  /** 到点切下一屏：按 SCREENS 顺序循环 */
  const next = (): void => {
    const idx = SCREENS.findIndex((s) => s.name === route.name);
    const target = SCREENS[(idx + 1) % SCREENS.length];
    router.push({ name: target.name });
  };

  /** 重排计时：路由每次变化后调用（守卫 afterEach 里挂——见第三节） */
  const reschedule = (): void => {
    clearTimeout(timer);
    if (!autoplay.value) return;
    timer = window.setTimeout(next, dwellOf(String(route.name)));
  };

  /** 暂停/恢复（用户交互、Tab 切换时用） */
  const setAutoplay = (on: boolean): void => {
    autoplay.value = on;
    if (on) reschedule();
    else clearTimeout(timer);
  };

  // 页面隐藏暂停（省 CPU——值班室大屏的常驻场景）
  const onVisibility = (): void => setAutoplay(!document.hidden);

  onMounted(() => document.addEventListener("visibilitychange", onVisibility));
  onUnmounted(() => {
    document.removeEventListener("visibilitychange", onVisibility);
    clearTimeout(timer);
  });

  return { autoplay, setAutoplay };
}

// src/router/index.ts（在 Day 78 基础上追加守卫）
import { createRouter, createWebHistory } from "vue-router";
import { useCarousel } from "../composables/useCarousel";

export const router = createRouter({ /* Day 78 路由表原样 */ });

// —— 守卫链：每次切换依次过三关 ——

/**
 * 关 1：beforeEach —— 拦截/放行决策
 * 大屏场景的用武之地：告警确认弹窗未关闭时阻止切屏（Day 82 接入弹窗后启用）
 */
router.beforeEach((to) => {
  // 本周先放行全部；Day 82 在这里挂"告警确认中不许切屏"
  return true;
});

/**
 * 关 2：afterEach —— 切换完成的副作用
 * 轮播计时重排挂在这里：无论是轮播自切、点击、后退键，统一重排
 */
router.afterEach(() => {
  // 惰性获取调度器实例（避免循环依赖：composable import router）
  carousel?.reschedule();
});

// 调度器实例的持有：在 App.vue 里 useCarousel() 创建一次，
// 通过模块级变量注入（见坑 2 的更优解：provide/inject 或直接模块单例）
import { useCarousel } from "../composables/useCarousel";
let carousel: ReturnType<typeof useCarousel> | null = null;
export function bindCarousel(c: ReturnType<typeof useCarousel>): void {
  carousel = c;
}

<script setup lang="ts">
import { useCarousel } from "./composables/useCarousel";
import { bindCarousel } from "./router";

// 创建调度器并注入路由层（App 只创建一次）
bindCarousel(useCarousel());
</script>

<!-- App.vue：router-view 套 Transition -->
<template>
  <div class="screen-canvas" :style="{ transform: `scale(${scale})` }">
    <!-- mode="out-in"：旧的淡出完再淡入（原生版 opacity 互斥的过渡版） -->
    <router-view v-slot="{ Component }">
      <Transition name="screen" mode="out-in">
        <component :is="Component" />
      </Transition>
    </router-view>
  </div>
</template>

<style>
/* 屏幕切换过渡：与原生版 Day 64 的 opacity 过渡参数一致（视觉零变化） */
.screen-enter-active,
.screen-leave-active { transition: opacity 0.3s ease; }
.screen-enter-from,
.screen-leave-to { opacity: 0; }
</style>

1. 全局搜索 screen-router 的 import —— 应为零引用（屏组件已走 router-view）
2. 删除 src/core/screen-router.ts
3. npm run build —— 绿了才算退役完成