多画布渲染

业务页面里可以同时渲染多个画布。典型场景是 dashboard 卡片列表。

<template>
  <div class="grid grid-cols-2 gap-4">
    <div v-for="card in cards" :key="card.id" class="h-[520px]">
      <HyperCardPageRenderer
        :payload="card.payload"
        :canvas-id="`card-${card.id}`"
      />
    </div>
  </div>
</template>

规则

• canvas-id 必须稳定。
• instanceId 只要求在单个 canvas 内唯一。
• 跨画布调用必须显式带 canvasId。
• CSS scope 按组件版本复用,不按 canvas 拆,避免重复注入样式。

调用

const hc = window.__HYPERCARD__

hc?.canvases.callComponent('card-a', 'chart1', 'refresh')
hc?.canvases.broadcast('theme-change', { theme: 'dark' })