设计器接入

设计器接入的核心是两条线:

页面结构由 v-model 控制。
所有修改尽量走 CanvasHandle。

最小接入

vue

<script setup lang="ts">
import { ref } from 'vue'
import {
  HyperCardCanvasDesigner,
  type CanvasHandle,
  type PageDocument,
  type ComponentSourceMap,
} from '@hy-bricks/canvas'

const document = ref<PageDocument>(initialDocument)
const sourceMap = ref<ComponentSourceMap>(initialSourceMap)
const handle = ref<CanvasHandle | null>(null)
</script>

<template>
  <HyperCardCanvasDesigner
    v-model="document"
    :component-source-map="sourceMap"
    @handle-ready="handle = $event"
  />
</template>

属性面板怎么做

SDK 不渲染属性面板。宿主自己拿选中实例和组件 contract 渲染表单。

推荐流程:

watch(
  () => handle.value?.selectedInstances.value,
  (instances) => {
    primary.value = instances?.[0] ?? null
  },
)

改布局:

handle.value?.updateLayoutBox(instanceId, {
  widthMode: 'percent',
  width: 100,
})

改 props:

handle.value?.dispatch({
  type: 'updateInstance',
  instanceId,
  patch: {
    props: nextProps,
  },
})

组件库拖入

宿主负责组件库 UI。拖入画布时,宿主把组件信息转换成 addInstance action。

const point = handle.clientToCanvasPoint({
  x: event.clientX,
  y: event.clientY,
})

handle.dispatch({
  type: 'addInstance',
  instance: {
    instanceId,
    componentId,
    componentVersionKey,
    layoutBox: {
      x: point.x,
      y: point.y,
      width: 320,
      height: 180,
      widthMode: 'px',
      heightMode: 'px',
      overflow: 'hidden',
    },
  },
})

右键菜单怎么做

SDK 提供命中能力和命令入口,宿主自己渲染菜单。

const hit = handle.getInstanceAtClientPoint({
  x: event.clientX,
  y: event.clientY,
})

if (hit) {
  handle.dispatch({ type: 'select', ids: [hit.instanceId] })
  openMenu(event.clientX, event.clientY)
}

菜单项建议统一调用:

handle.executeCommand('duplicateSelection')
handle.executeCommand('deleteSelection')
handle.executeCommand('bringToFront')
handle.executeCommand('lockSelection')

设计态点击组件内部

如果需要在设计期间点击组件内部按钮,建议分清模式:

design:默认点选 / 拖拽 / resize。
preview:允许组件内部交互。
inspect:可选中,但不拖不改。

如果业务需要“设计态也能点内部控件”,应该通过工具模式或局部开关处理,不要让组件内部事件永久穿透选择层。

设计器接入 ​

最小接入 ​

属性面板怎么做 ​

组件库拖入 ​

右键菜单怎么做 ​