业务卡片运行态

业务原型里常见这种结构:

• 外层业务页面循环多个卡片。
• 每个卡片内部是一个 HyperCard 页面。
• 卡片大小由业务容器决定。

推荐写法

<section class="business-card">
  <HyperCardPageRenderer
    :payload="payload"
    :canvas-id="canvasId"
  />
</section>

.business-card {
  width: 100%;
  min-height: 520px;
}

画布尺寸

运行态推荐:

• 父容器有明确高度。
• 画布使用 fill / percent 语义。
• 组件内部 .root 使用 width: 100%; height: 100%;。

如果设置了 100% 但页面空白,优先检查父容器是否有高度。

Demo

当前 playground 对应 /cards-render-demo。