<!-- TopoCanvas.vue（追加出向桥与交互绑定） -->
<script setup lang="ts">
// Day 85 出向契约的组件化落地
const emit = defineEmits<{
  (e: "hover", id: string | null): void;   // hover 变化：设备 id 或 null（离开）
  (e: "select", id: string): void;         // 节点点击（本周预留，未来跳详情）
}>();

onMounted(() => {
  renderer = new TopoRenderer({ /* Day 87 同 */ });

  // —— 交互事件的画布内处理 → 桥出 ——
  // renderer 的交互回调（第 7 周命中检测，Day 68 保留版）改为桥出：
  renderer.onHover = (id: string | null) => emit("hover", id);
  renderer.onSelect = (id: string) => emit("select", id);
});
</script>

// core/topo-renderer.ts（第 7 周 Day 45 命中检测的展示态保留版）
export class TopoRenderer {
  /** 桥出回调：由宿主组件注入（渲染器不认识 Vue） */
  onHover: (id: string | null) => void = () => {};
  onSelect: (id: string) => void = () => {};

  /** 绑定在节点层 canvas 的 mousemove（init 时 addEventListener） */
  private handleMove = (e: MouseEvent): void => {
    const hit = this.hitTest(e.offsetX, e.offsetY);   // 屏幕坐标 → 世界坐标 → 命中
    // 命中变化才上报（事件级去抖——鼠标在节点内滑动不重复 emit）
    if (hit?.id !== this.lastHoverId) {
      this.lastHoverId = hit?.id ?? null;
      this.onHover(this.lastHoverId);
      this.setCanvasCursor(hit ? "pointer" : "default");
    }
  };
}

<!-- src/components/TopoDetailPanel.vue -->
<script setup lang="ts">
/**
 * 拓扑节点详情面板（hover 驱动）
 * 纯 Vue 组件：只消费 id，数据全部回 store 取——画布世界零渗漏
 */
import { computed } from "vue";
import { storeToRefs } from "pinia";
import { useDashboardStore } from "../stores/dashboard";

const props = defineProps<{ deviceId: string | null }>();

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

// 按 id 从快照取设备详情（id → 数据的唯一映射点）
const device = computed(() =>
  latest.value?.devices.find((d) => d.deviceId === props.deviceId) ?? null
);

// 该设备的温度窗口尾巴（迷你趋势，最近 20 点）
const recentTemps = computed(() =>
  (store.tempWindows.get(props.deviceId ?? "") ?? []).slice(-20)
);

const STATE_LABEL = { ok: "运行正常", warn: "温度偏高", danger: "危险", offline: "离线" } as const;
</script>

<template>
  <!-- v-if 挂载卸载即可：详情面板无重状态，不需要 KeepAlive -->
  <div v-if="device" class="topo-detail" :data-state="device.state">
    <div class="topo-detail__title">{{ device.name }}</div>
    <div class="topo-detail__row">
      <span>状态</span><span>{{ STATE_LABEL[device.state] }}</span>
    </div>
    <div class="topo-detail__row">
      <span>当前温度</span><span class="num">{{ device.temperature.toFixed(1) }}℃</span>
    </div>
    <!-- 迷你趋势：内联 SVG 折线（20 点，纯展示不需要 ECharts） -->
    <svg class="topo-detail__spark" viewBox="0 0 100 24" preserveAspectRatio="none">
      <polyline
        :points="recentTemps.map((p, i) =>
          `${(i / Math.max(recentTemps.length - 1, 1)) * 100},${24 - (p.v - 60) / 40 * 24}`
        ).join(' ')"
      />
    </svg>
  </div>
</template>

<!-- ScreenC.vue（本周逐步成形，今天完成交互部分） -->
<script setup lang="ts">
import { ref } from "vue";
import TopoCanvas from "../components/TopoCanvas.vue";
import TopoDetailPanel from "../components/TopoDetailPanel.vue";

defineOptions({ name: "ScreenC" });

// hover 状态：屏级 Vue 状态（Day 85 裁决 #8——存 id！）
const hoverId = ref<string | null>(null);
</script>

<template>
  <section class="screen screen-c">
    <TopoCanvas @hover="(id) => (hoverId = id)" />
    <!-- 面板浮在画布右上：只响应 hoverId，与画布渲染零耦合 -->
    <TopoDetailPanel :device-id="hoverId" />
  </section>
</template>

鼠标移动 → renderer 命中检测（画布内）
  → emit("hover", "f2")（桥出）
    → hoverId.value = "f2"（Vue 状态）
      → TopoDetailPanel props 变化
        → device computed 重算（回 store 取数）
          → 面板重渲（Vue 世界）

□ 鼠标滚轮缩放：以鼠标点为中心（世界坐标锚定）——正常
□ 拖拽平移：光标变化（grab/grabbing）——正常
□ 视口状态：scale/offset 存在 renderer 内部——Console 检查不进 Vue
□ 拖拽期间：零 watch 触发（Day 87 的 update 打点不增长）——边界干净的证据
□ resize 后：视口保持（offset 不漂移）——DPR 与视口的正交性确认