dragcraft面向小程序装修场景的可视化页面搭建引擎

dragcraft 解决什么问题 ​

dragcraft 适合用来建设小程序装修后台：运营或业务同学在设计器里拖拽物料、配置属性、预览不同设备形态，研发侧则把页面保存为稳定的 Schema，并在自己的运行时中解释和渲染。

它的重点不是把 DOM 任意拖来拖去，而是把装修页面拆成三件可治理的事情：

• 用 WidgetMeta 描述业务物料能不能创建、移动、删除、配置和展示。
• 用 DesignerSchema 保存页面结构、属性、样式 DSL 和布局意图。
• 用 LayoutPlan 把 root 节点投影到内容区、固定 chrome 和浮层，保证每个节点只渲染一次；外部容器单独管理自己的 region 子树。

推荐接入路径 ​

第一次接入时，从 @dragcraft/designer 开始最省心。它已经把核心引擎、画布渲染和属性表单组合成标准设计器入口。

import '@dragcraft/themes'
import { createDesigner, DcDesigner } from '@dragcraft/designer'
import { createAntDesignVueFields } from '@dragcraft/fields-ant-design-vue'

const designer = createDesigner({
  widgetMetas: myWidgetMetas,
  componentMap: myComponentMap,
  fieldComponentMap: createAntDesignVueFields(),
  globalConfigSchema: myGlobalConfigSchema,
})

你需要准备三份业务输入：

如果你只想先跑起来，直接阅读 快速开始。如果你要设计一套可长期演进的装修平台，建议先看 核心心智模型。

架构一眼看懂 ​

dragcraft 的架构边界刻意保持清晰：core 管状态和命令，designer 管产品化设计器交互，renderer 管 schema 到组件树的渲染，form-generator 管属性表单，themes 和 device-frames 分别承接工作台主题与设备外壳。

业务应用
  -> @dragcraft/designer
      -> @dragcraft/core
      -> @dragcraft/renderer
      -> @dragcraft/form-generator
  -> @dragcraft/widgets
  -> @dragcraft/fields-ant-design-vue
  -> @dragcraft/themes
  -> @dragcraft/device-frames

这套分层带来几个关键结果：

• 业务写入统一经过 engine.execute()，撤销重做、事件通知和命令校验不会散落在 UI 里。
• form-generator 不依赖 core，只负责字段渲染和值变更，字段到命令的翻译由 designer 承担。
• renderer 不持久化业务状态，只消费 schema、组件映射、扩展点和事件 hooks。
• themes 不改变组件逻辑，只聚合必要结构样式并通过公开 token 与 component/part/state 契约提供工作台视觉。
• device-frames 通过 renderer 的 containerShell 接入，让手机、平板、桌面预览成为可替换外壳。

完整设计约束可以继续阅读 技术架构文档。

按目标继续阅读 ​

适合从这里开始的团队 ​

• 正在建设小程序、H5 或营销页装修后台，希望沉淀可导入导出的页面 Schema。
• 需要把运营配置、页面预览、设备外壳、物料管理和属性面板放进同一个设计器体验里。
• 希望 UI 结构、工作台主题、字段组件和业务物料保持解耦，避免后期扩展时牵一发动全身。
• 希望核心写入链路可测试、可审计、可拦截，并天然支持历史记录和事件订阅。