了解接入边界
DragCraft 提供页面编辑能力，不替你的应用定义业务物料、保存接口或生产运行时。接入完成后，你会拥有一个能够编辑 DocumentSchema 的 Vue 工作台，以及一份可以交给服务端和多端 Runtime 消费的页面数据。
这套指南假设你已经会使用 Vue 3、TypeScript 和你选择的 UI 组件库。你不需要了解 DragCraft 的内部 package；先完成 5 分钟跑通 就可以开始。
先看两个可运行结果
仓库中的 guide-project 同时提供最小接入和完整活动页编辑器：
bash
pnpm install
pnpm --filter guide-project dev打开以下地址：
http://localhost:9982/minimal.html：只有一个文本物料，用于确认安装和挂载过程。http://localhost:9982/：包含业务物料、属性配置、容器、设备预览、草稿保存和 Vue 只读运行时。
在最小编辑器中拖入“文本”，选中节点，再修改右侧的“文本内容”。画布更新后，使用工作台撤销这次修改。完整示例可以继续观察设备切换、容器 region、草稿修订和生产 Runtime 的差异。
在完整编辑器中可以观察四种页面结构：
| 页面内容 | Schema 表达 | 设计态结果 |
|---|---|---|
| 公告、文本 | 普通节点 | 由宿主内容组件放入可滚动区域 |
| 活动页头 | 页面框架物料 | 由 Designer Frame 或宿主展示策略放置在页面边缘 |
| 浮动操作 | 业务浮层物料 | 由 Designer Frame 或生产 Runtime 自己决定叠放关系 |
| 分栏容器 | container.regions | 由业务容器拥有并排列子节点 |
先划清职责
| DragCraft 负责 | 你的应用负责 |
|---|---|
| DocumentSchema、AuthoringAction、history 和导入校验 | 页面记录、草稿修订、发布和审核 |
| 物料拖放、选择和属性绑定 | 业务 Vue 组件、资源选择器和内容主题 |
| 设计态布局投影和交互反馈 | 生产端的组件注册表与布局解释 |
| 字段 adapter 协议和表单状态 | UI 库、异步选项、权限和服务端校验 |
IMPORTANT
DcDesigner、DesignerRegionOutlet 和编辑器的 Device Frame 都包含设计态语义。生产页面应读取导出的 Schema，并使用自己的只读 Runtime 渲染。
选择阅读入口
- 需要从空白 Vue 应用接入时，继续 创建可运行编辑器。
- 已经挂载编辑器，需要理解数据流时，阅读 Schema 与样式作用域。
- 正在评估业务扩展边界时，查看 框架如何协作。
完整的内部设计依据保留在 Architecture Map。公开应用只能直接导入 @dragcraft/designer、@dragcraft/device-frames 和匹配的 @dragcraft/fields-* 字段 adapter；其他 workspace package 由 Designer 组合，不属于业务接入面。