「AI + 低代码」的可视化设计器

可视化设计器

引言

本文件面向“可视化设计器”的使用者与扩展开发者，系统性阐述设计器框架的整体架构、组件系统设计理念、交互机制实现原理，并深入说明状态管理策略、扩展开发机制、物料系统的集成方式。文档同时覆盖拖拽式设计的技术实现、选中与编辑功能、属性设置面板等关键能力；并提供组件开发指南、自定义组件创建方法、设计器扩展的最佳实践，以及与渲染器的协作机制与数据同步策略。为保证可追溯性，文中所有技术细节均以仓库中的实际源码与文档为依据。

项目结构

该仓库采用多包（monorepo）组织方式，围绕“设计器”“核心模型”“渲染器”“UI 基础库”“物料与插件”“示例应用与开发站”等维度进行模块化拆分。核心关系如下：

• 设计器包：提供设计器框架导出、组件、管理器、包装器等能力入口
• 核心包：提供项目/区块/节点/属性/事件/指令等模型与协议
• 渲染器包：提供渲染服务、上下文提供者、钩子与插件体系
• UI 包：提供通用 UI 组件与适配层
• 物料与插件：提供物料描述与组件示例
• 示例与开发站：提供设计器示例页面、菜单侧边栏、元信息配置等

graph TB
subgraph "设计器"
DIndex["packages/designer/src/index.ts"]
DFrame["packages/designer/src/framework/index.ts"]
DManagers["packages/designer/src/managers/index.ts"]
DComponents["packages/designer/src/components/index.ts"]
DWappers["packages/designer/src/wrappers/index.ts"]
end
subgraph "核心模型"
CIndex["packages/core/src/index.ts"]
CModels["packages/core/src/models/index.ts"]
CNode["packages/core/src/models/node.ts"]
end
subgraph "渲染器"
RIndex["packages/renderer/src/index.ts"]
end
subgraph "UI 基础"
UIIndex["packages/ui/src/index.ts"]
end
subgraph "物料与插件"
MDevApp["apps/material/dev/App.vue"]
MDevMain["apps/material/dev/main.ts"]
MIndex["apps/material/src/material/index.ts"]
PIndex["apps/plugin/src/index.ts"]
PMaterial["apps/plugin/src/material.json"]
PComp["apps/plugin/src/component/Example.vue"]
end
subgraph "示例与开发站"
DevEditor["dev/src/views/designer/editor.vue"]
DevSetters["dev/src/views/designer/setters.vue"]
DevRenderer["dev/src/views/designer/renderer.vue"]
DevIndex["dev/src/views/designer/index.vue"]
DevMenus["dev/src/views/menus.vue"]
DevSidebar["dev/src/views/sidebar.vue"]
DevMeta["dev/src/components/Meta.vue"]
DevRouter["dev/src/router/index.ts"]
DevMain["dev/src/main.ts"]
end
DIndex --> DFrame
DIndex --> DManagers
DIndex --> DComponents
DIndex --> DWappers
DFrame --> CIndex
DFrame --> RIndex
DFrame --> UIIndex
CIndex --> CModels
CModels --> CNode
DevEditor --> DIndex
DevSetters --> DIndex
DevRenderer --> RIndex
DevIndex --> DIndex
DevMenus --> DevMeta
DevSidebar --> DevMeta
DevRouter --> DevMain
MDevApp --> MDevMain
MDevApp --> MIndex
PIndex --> PMaterial
PIndex --> PComp

核心组件

• 设计器框架导出：统一从设计器入口导出版本号、常量、组件、框架、管理器、包装器与工具函数，便于上层应用按需引入与扩展。
• 核心模型：提供节点模型 NodeModel 及其属性、事件、指令、插槽、可见性、锁定、父子关系、移动与销毁等完整能力，支撑拖拽、层级变更、属性编辑等核心交互。
• 渲染器导出：提供渲染上下文、服务、钩子与插件体系，作为设计器与渲染器协作的桥梁。
• UI 基础：提供通用 UI 组件与适配层，服务于设计器与物料组件的统一风格与行为。
• 管理器与包装器：管理器负责部件、Setter、依赖等扩展机制；包装器负责骨架、区域、部件、Setter 的封装与桥接。

架构总览

设计器与渲染器通过“模型驱动 + 上下文提供者 + 插件体系”协同工作：

• 设计器侧：维护项目/区块/节点树，提供拖拽、选中、编辑、属性设置、历史回退等能力；通过管理器与包装器扩展部件与 Setter。
• 核心模型侧：以 NodeModel 为核心，抽象节点的属性、事件、指令、插槽、可见性、锁定、层级关系与序列化 DSL。
• 渲染器侧：基于上下文提供者与服务，将模型转换为具体平台（Web/H5/UniApp）的渲染结果，并支持插件扩展。
• UI 侧：提供统一的 UI 组件与适配层，确保设计器与物料组件风格一致。
• 物料与插件：通过物料描述与组件示例，快速接入新部件；通过插件机制扩展设计器能力。

graph TB
Designer["设计器框架<br/>packages/designer/src/index.ts"] --> Core["核心模型<br/>packages/core/src/models/node.ts"]
Designer --> Renderer["渲染器导出<br/>packages/renderer/src/index.ts"]
Designer --> UI["UI 基础<br/>packages/ui/src/index.ts"]
Designer --> Managers["管理器<br/>packages/designer/src/managers/index.ts"]
Designer --> Wrappers["包装器<br/>packages/designer/src/wrappers/index.ts"]
Core --> Models["模型索引<br/>packages/core/src/models/index.ts"]
Renderer --> Provider["上下文提供者/服务"]
Renderer --> Hooks["钩子/插件"]
Managers --> WidgetMgr["部件管理器"]
Managers --> SetterMgr["Setter 管理器"]
Managers --> DepsMgr["依赖管理器"]
Wrappers --> SkeletonW["骨架包装器"]
Wrappers --> RegionW["区域包装器"]
Wrappers --> WidgetW["部件包装器"]
Wrappers --> SetterW["Setter 包装器"]
DevApp["示例应用<br/>dev/src/views/designer/index.vue"] --> Designer
DevApp --> Renderer
DevApp --> UI

详细组件分析

设计器框架与导出体系

• 入口导出：统一导出版本号、常量、组件、框架、管理器、包装器与工具函数，便于上层应用按需引入。
• 框架子模块：类型、引擎、资源、模拟器、渲染器、设计器、OpenAPI、状态、更新器、工具注册表等，形成完整的设计器运行时。
• 管理器子模块：内置管理器、部件管理器、依赖管理器、Setter 管理器，支撑扩展与配置。
• 组件子模块：骨架、Setter 视图、编辑器、部件/区域/Setter 注册表等，构成设计器 UI 基础。
• 包装器子模块：骨架、区域、部件、Setter 的封装，桥接核心模型与 UI 展示。

classDiagram
class 设计器入口 {
+导出版本号
+导出常量
+导出组件
+导出框架
+导出管理器
+导出包装器
+导出工具
}
class 框架子模块 {
+类型
+引擎
+资源
+模拟器
+渲染器
+设计器
+OpenAPI
+状态
+更新器
+工具注册表
}
class 管理器子模块 {
+内置管理器
+部件管理器
+依赖管理器
+Setter 管理器
}
class 组件子模块 {
+骨架
+Setter 视图
+编辑器
+部件注册表
+区域注册表
+Setter 注册表
}
class 包装器子模块 {
+骨架包装器
+区域包装器
+部件包装器
+Setter 包装器
}
设计器入口 --> 框架子模块
设计器入口 --> 管理器子模块
设计器入口 --> 组件子模块
设计器入口 --> 包装器子模块

核心模型：节点模型 NodeModel

• 职责：抽象页面/区块/组件的节点，提供属性、事件、指令、插槽、可见性、锁定、层级关系、序列化 DSL 等能力。
• 关键能力：
  • 更新与变更通知：支持静默更新与事件广播，保证设计器状态一致性。
  • 属性管理：新增/更新/删除属性，支持表达式与函数值。
  • 事件与指令：新增/更新/删除事件与指令，支持序列化。
  • 层级操作：插入前后、移动顺序、追加/移除子节点、锁定/解锁、可见性切换。
  • 序列化：输出 DSL 结构，便于持久化与传输。
  • 生命周期：销毁节点及其子树，清理引用与全局映射。
• 复杂度与性能：层级操作与序列化为 O(n) 级别，适合中大型页面模型；事件广播在频繁变更场景下应配合静默模式降低开销。

classDiagram
class NodeModel {
+id : string
+name : string
+from : NodeFrom
+locked : boolean
+invisible : boolean
+children : NodeModel[] | string | JSExpression
+slot : NodeSlot
+props : Record<string, PropModel>
+events : Record<string, EventModel>
+directives : DirectiveModel[]
+disposed : boolean
+update(schema, silent)
+setChildren(children, silent)
+setSlot(slot, silent)
+setProp(name, value, default, silent)
+removeProp(name, silent)
+getPropValue(name)
+setEvent(schema, silent)
+removeEvent(name, silent)
+setDirective(schema, silent)
+removeDirective(directive, silent)
+removeChild(node, silent)
+appendChild(node, silent)
+insertAfter(node, silent)
+insertBefore(node, silent)
+movePrev(silent)
+moveNext(silent)
+toDsl()
+dispose(silent)
+lock(silent)
+unlock(silent)
+setVisible(visible, silent)
+isChild(node) : boolean
+findChildIndex(child) : number
}

渲染器与设计器协作

• 渲染器导出：提供版本号、常量、工具、上下文提供者、渲染函数、服务、钩子与插件体系。
• 协作机制：设计器维护模型树，渲染器基于模型生成渲染结果；二者通过上下文提供者与服务进行解耦。
• 数据同步：模型变更通过事件广播触发渲染器更新；渲染器内部通过服务与钩子对渲染过程进行扩展。

sequenceDiagram
participant 设计器 as "设计器"
participant 核心模型 as "NodeModel"
participant 渲染器 as "渲染器"
participant 提供者 as "上下文提供者"
设计器->>核心模型 : "更新节点/属性/事件/指令"
核心模型-->>设计器 : "事件广播 : 节点变更"
设计器->>渲染器 : "请求渲染"
渲染器->>提供者 : "获取渲染上下文"
提供者-->>渲染器 : "返回上下文"
渲染器-->>设计器 : "渲染结果"

管理器与扩展机制

• 部件管理器：负责部件注册、查找与生命周期管理，支撑拖拽与渲染。
• Setter 管理器：负责属性 Setter 的注册与渲染，支撑属性面板编辑。
• 依赖管理器：负责外部依赖的加载与注入，保障扩展环境可用。
• 扩展最佳实践：
  • 使用管理器注册部件与 Setter，避免直接修改核心逻辑。
  • 通过包装器桥接核心模型与 UI，保持关注点分离。
  • 利用插件机制扩展渲染器能力，确保与设计器解耦。

graph LR
Managers["管理器"] --> WidgetMgr["部件管理器"]
Managers --> SetterMgr["Setter 管理器"]
Managers --> DepsMgr["依赖管理器"]
WidgetMgr --> 包装器["包装器"]
SetterMgr --> 包装器
DepsMgr --> 插件["插件体系"]
包装器 --> UI["UI 组件"]
插件 --> 渲染器["渲染器服务"]

物料系统与插件集成

• 物料入口：物料索引集中导出物料描述与共享模块，便于设计器识别与加载。
• 插件入口：插件索引导出插件主程序与物料描述，支持组件示例与物料注册。
• 开发建议：
  • 将组件封装为标准插件，提供物料描述与示例组件。
  • 通过设计器的部件管理器注册插件提供的部件，实现即插即用。
  • 使用 Setter 管理器为部件属性提供可视化编辑能力。

graph TB
物料入口["apps/material/src/material/index.ts"] --> 物料描述["物料描述"]
物料入口 --> 共享模块["共享模块"]
插件入口["apps/plugin/src/index.ts"] --> 物料描述
插件入口 --> 组件示例["Example.vue"]
插件入口 --> 物料JSON["material.json"]

拖拽式设计与交互机制

• 拖拽实现：通过部件管理器注册可拖拽部件，结合包装器与 UI 组件实现拖拽预览与落盘。
• 选中与编辑：通过节点模型的属性与事件管理，联动属性面板与编辑器，实现所选即所改。
• 属性设置面板：通过 Setter 管理器注册不同类型的 Setter，为属性提供可视化编辑控件。
• 数据流：模型变更 -> 事件广播 -> 渲染器更新 -> UI 重绘。

flowchart TD
Start(["开始拖拽"]) --> Hover["悬停目标区域"]
Hover --> CanDrop{"可放置?"}
CanDrop --> |否| Cancel["取消拖拽"]
CanDrop --> |是| Drop["落盘创建节点"]
Drop --> Select["选中节点"]
Select --> EditProps["属性面板编辑"]
EditProps --> ModelUpdate["模型更新"]
ModelUpdate --> Render["触发渲染"]
Render --> End(["完成"])

设计器与渲染器协作机制与数据同步

• 协作机制：设计器维护模型树，渲染器基于上下文提供者与服务生成渲染结果；二者通过事件与服务进行解耦协作。
• 数据同步：模型变更通过事件广播触发渲染器更新；渲染器内部通过服务与钩子对渲染过程进行扩展。
• 最佳实践：
  • 使用静默更新减少事件风暴。
  • 将复杂计算放入渲染器服务，保持设计器轻量。
  • 通过插件扩展渲染器能力，避免侵入核心逻辑。

组件开发指南与自定义组件创建

• 创建步骤：
  • 定义组件与物料描述，导出到插件入口。
  • 通过部件管理器注册组件，使其可被拖拽。
  • 通过 Setter 管理器注册属性编辑器，使属性可被可视化编辑。
  • 使用包装器桥接核心模型与 UI，确保交互一致。
• 示例参考：
  • 插件示例组件与物料描述，可作为自定义组件模板。
  • 设计器示例页面展示了编辑器、属性面板与渲染器的组合使用。

设计器扩展的最佳实践

• 使用管理器注册扩展点，避免直接修改核心逻辑。
• 通过包装器桥接核心模型与 UI，保持关注点分离。
• 利用插件机制扩展渲染器能力，确保与设计器解耦。
• 通过文档与示例完善扩展生态，降低二次开发成本。

依赖分析

• 设计器依赖核心模型与渲染器导出，形成“模型驱动 + 渲染服务”的双轮驱动。
• UI 基础库为设计器与物料组件提供统一风格与行为。
• 物料与插件通过索引集中导出，便于设计器识别与加载。
• 示例应用与开发站提供端到端的使用路径与调试环境。

graph TB
设计器["packages/designer/src/index.ts"] --> 核心模型["packages/core/src/models/index.ts"]
设计器 --> 渲染器导出["packages/renderer/src/index.ts"]
设计器 --> UI基础["packages/ui/src/index.ts"]
物料入口["apps/material/src/material/index.ts"] --> 物料描述["物料描述"]
插件入口["apps/plugin/src/index.ts"] --> 物料描述
插件入口 --> 组件示例["Example.vue"]
示例应用["dev/src/views/designer/index.vue"] --> 设计器
示例应用 --> 渲染器导出
示例应用 --> UI基础

性能考虑

• 事件风暴控制：在批量更新时使用静默模式，减少事件广播频率。
• 序列化优化：仅在必要时调用 toDsl 输出，避免频繁序列化。
• 渲染节流：在高频交互场景下，将复杂计算放入渲染器服务，减少主线程压力。
• 模型缓存：利用 NodeModel 的静态映射与事件机制，避免重复查询与重建。

故障排查指南

• 节点变更未生效：检查是否正确触发事件广播与渲染器更新。
• 属性编辑异常：确认 Setter 管理器已注册对应属性的编辑器。
• 插件未加载：检查插件入口与物料描述是否正确导出与引用。
• 渲染结果不一致：核对上下文提供者与服务配置，确保渲染上下文正确。

结论

本文件系统性梳理了可视化设计器的架构与实现要点，明确了模型驱动、扩展机制与协作流程。通过核心模型 NodeModel、管理器与包装器、渲染器服务与插件体系，设计器实现了可扩展、可维护、可协作的可视化设计能力。建议在二次开发中遵循“管理器注册 + 包装器桥接 + 插件扩展”的最佳实践，结合示例应用与文档，快速构建高质量的设计器扩展与物料生态。

附录

• 快速开始与脚手架：参考项目搭建与脚手架文档，快速初始化设计器工程。
• 设计器指南：涵盖设计器基础概念、使用流程与高级特性。
• 核心模型文档：深入理解项目/区块/节点/属性/事件/指令等模型。
• 扩展工具链：包括部件管理器、Setter 管理器、依赖管理器与引擎/解析器/生成器等。

参考资料

VTJ.PRO 是一个开源的、AI 驱动的 Vue 3 企业级应用开发平台。它通过 AI 智能体与可视化编排实现高效开发，并支持导出标准 Vue 代码以避免平台锁定。更多信息请访问：

• 📘 官方文档：vtj.pro/
• 🌐 在线平台：app.vtj.pro/
• 📦 开源仓库：gitee.com/newgateway/…