框架概述
kavina 是 Vue 3 低代码框架，提供可视化设计器与组件化渲染引擎。
设计思路
kavina 的核心理念是编辑与运行分离。
Design 组件提供拖拽画布。用户在画布上排列部件、配置属性、嵌套层级，操作结果是一个 JSON 数组——每个元素是一个节点的完整配置。
Display 组件独立读取这个数组，配合部件注册表渲染页面。它不依赖设计器，可以单独打包、单独部署。
text
拖拽配置
↓
Design → [Node, Node, ...] → Display → 页面
↑
可保存为 JSON这带来三个好处：
- 渲染器不依赖设计器。生产环境只部署 Display，零冗余。
- 节点数据是可读的 JSON。可以存数据库、从接口下发、手动编辑、用脚本批量生成。
- 设计器本身是普通 Vue 组件，可以嵌入任何已有项目，不需要改造架构。
三块拼图
Design — 可视化设计器。 包含画布、工具栏、属性面板、部件大纲。用户通过拖拽构建页面结构，实时预览效果。Design 内部维护节点注册表，管理所有部件的挂载与卸载。
Display — 组件化渲染器。 接收节点数组和部件注册表，递归遍历节点树，为每个节点匹配对应的部件组件。支持 design / display / print 三种渲染模式，根据使用场景自动切换。
Widget — 部件。 可扩展的最小单元。每个部件定义它在不同环境下的外观：design 组件用于画布编辑、render 组件用于最终展示、print 组件用于打印。还支持 setting 配置面板、doc 文档视图、thumb 缩略图。部件通过 schema 声明默认数据，框架负责注入上下文和管理生命周期。
扩展能力
除核心的设计、渲染、部件体系外，kavina 还提供：
- 插件系统 — settings 设置面板、outline 部件大纲、widgets 部件库都是插件。开发者可以注册自定义插件扩展设计器能力。
- 主题系统 — 基于 CSS 变量实现亮色/暗色切换和主题色定制。不与任何 UI 框架绑定。
- 表达式引擎 — 节点字段
valueExpr支持 JavaScript 表达式，用于动态默认值和事件处理。 - 国际化 — 部件 schema 接收
lang参数，配合 i18n 工具为不同语言生成不同的默认配置。