// ✅ 组合式函数：use 开头 + 内部用响应式 API + 返回 ref/computed
export function useFoo(): Ref<string> { ... }

// ❌ 普通工具函数：纯函数，无状态无响应式（放 utils/，别挂 use）
export function formatDate(ts: number): string { ... }

Week 11（本周）  ScreenStore 类原样保留，外面套一层响应式壳（useScreenStore）
                 → 数据从类流向组件，经过响应式转换
Week 12          Pinia 正规军替换：类退役，状态进 store/，订阅逻辑进 actions

// src/composables/useScreenStore.ts
import { onUnmounted, shallowRef } from "vue";
import { ScreenStore } from "../core/screen-store";   // Day 65 原样迁移的类
import { WsDataSource } from "../core/ws-data-source";
import type { PanelSnapshot, Alarm } from "../core/types";

/**
 * 全局数据中枢的响应式桥（单例模式）
 * 职责：
 * 1. 全应用只创建一次 ScreenStore + 数据源（挂到模块级变量）
 * 2. 把 Store 的每次分发转写为 shallowRef 替换 → 组件自动更新
 * 3. 订阅成对：组件卸载自动退订（宿主无感）
 */

// —— 模块级单例：import 即共享，全应用只有这一份 ——
let store: ScreenStore | null = null;

/** 懒初始化：首个调用的组件触发数据源启动 */
function getStore(): ScreenStore {
  if (!store) {
    store = new ScreenStore();
    store.attach(new WsDataSource());   // 唯一的 WS 连接（Day 65 纪律：不许私连）
  }
  return store;
}

/** 组合式函数入口：任意组件调用，拿到响应式全局状态 */
export function useScreenStore() {
  const s = getStore();

  // 响应式镜像：shallowRef——大快照整体替换（Day 72 选型三连）
  const latest = shallowRef<PanelSnapshot | null>(null);
  const alarms = shallowRef<Alarm[]>([]);
  const tempWindows = shallowRef<Map<string, { ts: number; v: number }[]>>(new Map());
  const connState = shallowRef<"connected" | "connecting" | "closed">("closed");

  // 订阅类：分发改写镜像（注意是整体替换，让 shallowRef 生效）
  const unsub = s.subscribe({
    onSnapshot: (snap) => { latest.value = snap; },
    onWindow:   (w) =>    { tempWindows.value = w; },
    onAlarms:   (a) =>    { alarms.value = [...a]; },   // 拷贝一次，确保引用变化
    onConnState:(c) =>    { connState.value = c; },
    minIntervalMs: 1000,   // 屏级默认分频（Day 65 的分频能力原样可用）
  });

  // 成对纪律：宿主组件卸载 → 退订（Day 69 泄漏排查的结构性解法）
  onUnmounted(() => unsub());

  return { latest, alarms, tempWindows, connState };
}

<script setup lang="ts">
import { useScreenStore } from "../composables/useScreenStore";
const { latest, alarms, connState } = useScreenStore();
// 此后模板里 {{ connState }} / v-for="a in alarms" 全自动更新
</script>

// src/composables/useDataSource.ts
import { onUnmounted, shallowRef } from "vue";
import { WsDataSource } from "../core/ws-data-source";
import type { PanelSnapshot } from "../core/types";

/**
 * 轻量数据源钩子：给"不需要全局 Store"的独立小场景用
 * （如调试页、单卡片独立预览。正式屏面一律走 useScreenStore——单连接纪律）
 */
export function useDataSource() {
  const source = new WsDataSource();
  const latest = shallowRef<PanelSnapshot | null>(null);

  const stop = source.subscribe((snap) => { latest.value = snap; });
  source.start();

  // 卸载自动停源：连接、重连定时器、心跳全部由类内部成对清理（Day 58-63 的功劳）
  onUnmounted(() => source.stop());

  return { latest };
}