// 昨天的骨架里 renderer 是普通变量，看似安全——但隐患在它被响应式世界"碰"到时：
const renderer = ref(rendererInstance);        // ❌ ref 包实例 → 深层代理启动
const state = reactive({ renderer });          // ❌ 同上
// 甚至：把实例塞进 Pinia state / provide 的 reactive 对象 → 同样触发

1. 递归遍历实例的全部属性（三层 ctx、节点数组、监听器闭包…）→ 初始化卡顿
2. 后续每次属性访问都走 Proxy 拦截层 → 每帧绘制的上千次属性读取全部降速
3. 实例内部 this 指向 Proxy 而非原对象 → 部分库内部逻辑行为异常

import { markRaw, shallowRef } from "vue";

// 姿势 1（本周采用）：markRaw——永久豁免代理，语义最明确
let renderer: TopoRenderer | null = null;   // 普通变量：组件闭包内，根本不进响应式世界
// 若必须响应式持有（如 UI 需要"渲染器就绪"标志）：
const rendererRef = shallowRef<TopoRenderer | null>(null);
rendererRef.value = markRaw(new TopoRenderer(...));   // markRaw 双保险

// 姿势 2：markRaw 标记在类定义处（一劳永逸）
export class TopoRenderer {
  // 类级声明：本类的实例永远不响应式
  static __v_skip = true;
}

// 姿势 3（反例）：reactive({ renderer }) —— 任何形式都不允许

<!-- TopoCanvas.vue（在 Day 86 骨架上追加数据接线） -->
<script setup lang="ts">
import { computed, markRaw, onMounted, onUnmounted, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "../stores/dashboard";
import { TopoRenderer } from "../core/topo-renderer";
import { TOPO_CONFIG } from "../core/topo-config";
import type { DeviceState } from "../core/types";

const store = useDashboardStore();
const { latest, alarms } = storeToRefs(store);

let renderer: TopoRenderer | null = null;   // 普通变量持有（第一节纪律）

// —— 入向桥核心：store 数据 → 画布最小形态 ——
// 桥口要窄（Day 85 原则）：不传 snapshot，只传画布要的两张 Map
const deviceStates = computed<Map<string, DeviceState>>(() => {
  const m = new Map<string, DeviceState>();
  for (const d of latest.value?.devices ?? []) m.set(d.deviceId, d.state);
  return m;
});
const deviceTemps = computed<Map<string, number>>(() => {
  const m = new Map<string, number>();
  for (const d of latest.value?.devices ?? []) m.set(d.deviceId, d.temperature);
  return m;
});

// watch 两张 Map → 驱动重绘（脏检查在 renderer 内部，见第三节）
watch([deviceStates, deviceTemps], ([states, temps]) => {
  renderer?.update(states, temps);
});

onMounted(() => {
  // markRaw 双保险：即使未来重构进响应式容器也不会被代理
  renderer = new TopoRenderer({ bg: bgCanvas.value!, edges: edgeCanvas.value!,
                                nodes: nodeCanvas.value!, config: TOPO_CONFIG });
  renderer.renderStatic();

  // 立即回答：首帧就画当前数据（不等下一次快照——Day 65"回答现在"纪律的延续）
  renderer.update(deviceStates.value, deviceTemps.value);

  ro = new ResizeObserver(() => rafOnce(() => renderer?.resize()));
  ro.observe(rootEl.value!);
});

onUnmounted(() => {
  ro?.disconnect();
  renderer?.destroy();
  renderer = null;
});
</script>

快照节奏：500ms/次 → watch 每 500ms 触发 → 整图重绘（20 节点 + 30 连线）
但状态色的真实变化频率：温度抖动每秒变，state(ok/warn) 可能几分钟不变
→ 90% 的重绘画的是一模一样的内容——白画

// core/topo-renderer.ts（追加）
/**
 * 数据驱动更新入口（Day 68 已有签名，今天补脏检查）
 * 脏检查粒度：状态层与温度层分开判定——
 *   状态变 → 状态层重绘（节点框颜色 + 连线）
 *   仅温度变 → 只重绘节点层的副标签（更轻）
 */
update(states: Map<string, DeviceState>, temps: Map<string, number>): void {
  // 状态脏检查：与上次比较（浅比较每设备一行）
  let stateDirty = false;
  for (const [id, s] of states) {
    if (this.lastStates.get(id) !== s) { stateDirty = true; break; }
  }
  // 温度脏检查：四舍五入到 0.1℃ 再比（避免浮点噪声触发重绘）
  let tempDirty = false;
  for (const [id, t] of temps) {
    if (Math.abs((this.lastTemps.get(id) ?? -999) - t) > 0.05) { tempDirty = true; break; }
  }

  if (stateDirty) {
    this.lastStates = states;
    this.drawEdges(states);
    this.drawNodes(states, temps);      // 状态变必然带温度一起画
  } else if (tempDirty) {
    this.lastTemps = temps;
    this.drawNodeLabels(temps);         // 只画副标签层（第 7 周分层红利的兑现）
  }
  // 都不脏 → 什么都不做（白嫖了 90% 的重绘预算）
}