创建可运行编辑器

最小编辑器由一个 MaterialDefinition、一个字段 adapter map、一个 DesignerInstance 和一个 DcDesigner 组成。完成后，你可以拖入文本、修改属性并撤销修改。这里的 DesignerInstance 持有文档、选择和历史；DcDesigner 只负责把实例投影为工作台。

安装设计器、默认字段 adapter 和对应 UI 库：

bash

pnpm add @dragcraft/designer @dragcraft/fields-ant-design-vue ant-design-vue vue

定义第一个物料

物料定义把持久化协议、authoring 能力、属性面板和 Vue Presentation 放在一起。示例中的完整文本物料如下：

import { defineComponent, h } from 'vue'

export const GuideTextWidget = defineComponent({
  name: 'GuideTextWidget',
  props: {
    content: { type: String, default: '新文本' },
  },
  setup(props) {
    return () => h('p', { class: 'guide-text-widget' }, props.content)
  },
})

type 是 Schema 中保存的稳定标识。presentation.preview 是设计态组件；组件名可以重构，type 改名则需要宿主在导入前离线重写已有 Schema。

defaultProps 在拖入物料时复制到新节点。formSchema 中没有显式 bindTo 的 content 字段默认写入当前节点的 props.content。

创建设计器实例

完整的最小实例工厂只有三类输入：

import { createDesigner } from '@dragcraft/designer'
import { createAntDesignVueFields } from '@dragcraft/fields-ant-design-vue'
import { guideMaterials } from '../domain/materials'

export function createMinimalDesigner() {
  return createDesigner({
    schema: {
      version: '1',
      globalConfig: {},
      page: { props: {} },
      nodes: [{ id: 'welcome-text', type: 'guide-text', props: { content: '欢迎使用 DragCraft' } }],
      structure: { root: ['welcome-text'], containers: {} },
    },
    materials: guideMaterials.filter(material => material.type === 'guide-text'),
    fieldComponentMap: createAntDesignVueFields(),
  })
}

输入	回答的问题
`materials`	设计器允许创建和编辑哪些 `type`，以及如何展示
`fieldComponentMap`	属性表单如何把字段键渲染为真实控件

materials 是唯一的物料注册面；字段 adapter 只负责把表单字段键映射为控件。不要再维护一份只给 Designer 使用的类型注册表。

挂载并释放实例

最小页面完整地创建、挂载并释放 Designer：

vue

<script setup lang="ts">
import { DcDesigner } from '@dragcraft/designer'
import { onBeforeUnmount } from 'vue'
import { createMinimalDesigner } from './editor/minimal-designer'

const designer = createMinimalDesigner()

onBeforeUnmount(() => designer.dispose())
</script>

<template>
  <main class="minimal-app">
    <DcDesigner :instance="designer" />
  </main>
</template>

designer.dispose() 会清理实例拥有的事件监听、历史和交互状态。实例由组件创建时，应在组件卸载时释放；如果实例由应用级容器持有，则由该容器管理生命周期。不要在多个组件中重复创建同一页面的实例，否则每个实例都有自己的 history。

应用入口加载字段 UI 的基础样式和 Standard 工作台主题：

import { createApp } from 'vue'
import MinimalApp from './MinimalApp.vue'
import 'ant-design-vue/dist/reset.css'
import '@dragcraft/designer/standard.css'
import './styles.css'

createApp(MinimalApp).mount('#app')

@dragcraft/designer/standard.css 包含完整工作台主题。只有准备实现整套工作台视觉时，才改用 @dragcraft/designer/structure.css。

验证结果

bash

pnpm --filter guide-project dev

打开 http://localhost:9982/minimal.html，验证以下行为：

左栏显示“文本”。
拖入后画布显示“新文本”。
选中节点后右栏显示“文本内容”。
修改内容后可以撤销和重做。

如果左栏存在物料但画布显示 fallback，检查 presentation 是否使用了相同的 type。如果右栏显示未知字段，检查 fieldComponentMap 是否注册了 inspector.formSchema 中的组件键；如果节点来自导入 Schema，再检查导入时是否出现 degraded 或 conflicted。

接下来可以接入业务物料与属性配置，或先建立 Schema 与样式作用域的数据模型。

创建可运行编辑器 ​

定义第一个物料 ​

创建设计器实例 ​

挂载并释放实例 ​

验证结果 ​

创建可运行编辑器

定义第一个物料

创建设计器实例

挂载并释放实例

验证结果