[{"data":1,"prerenderedAt":176},["ShallowReactive",2],{"\u002Fworks\u002Fkavina":3},{"work":4,"creator":165},{"id":5,"title":6,"author":7,"body":8,"description":149,"extension":150,"meta":151,"navigation":152,"order":153,"path":154,"repository":155,"seo":156,"stem":157,"tags":158,"type":162,"website":163,"__hash__":164},"works\u002Fworks\u002F01.kavina.md","kavina","himavanta",{"type":9,"value":10,"toc":143},"minimark",[11,15,19,22,25,28,31,73,76,89,92,99,105,111,114,117,139],[12,13,14],"h2",{"id":14},"框架概述",[16,17,18],"p",{},"kavina 是 Vue 3 低代码框架，提供可视化设计器与组件化渲染引擎。",[12,20,21],{"id":21},"设计思路",[16,23,24],{},"kavina 的核心理念是编辑与运行分离。",[16,26,27],{},"Design 组件提供拖拽画布。用户在画布上排列部件、配置属性、嵌套层级，操作结果是一个 JSON 数组——每个元素是一个节点的完整配置。",[16,29,30],{},"Display 组件独立读取这个数组，配合部件注册表渲染页面。它不依赖设计器，可以单独打包、单独部署。",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-txt shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","拖拽配置\n  ↓\nDesign → [Node, Node, ...] → Display → 页面\n                      ↑\n                可保存为 JSON\n","txt","",[39,40,41,49,55,61,67],"code",{"__ignoreMap":37},[42,43,46],"span",{"class":44,"line":45},"line",1,[42,47,48],{},"拖拽配置\n",[42,50,52],{"class":44,"line":51},2,[42,53,54],{},"  ↓\n",[42,56,58],{"class":44,"line":57},3,[42,59,60],{},"Design → [Node, Node, ...] → Display → 页面\n",[42,62,64],{"class":44,"line":63},4,[42,65,66],{},"                      ↑\n",[42,68,70],{"class":44,"line":69},5,[42,71,72],{},"                可保存为 JSON\n",[16,74,75],{},"这带来三个好处：",[77,78,79,83,86],"ul",{},[80,81,82],"li",{},"渲染器不依赖设计器。生产环境只部署 Display，零冗余。",[80,84,85],{},"节点数据是可读的 JSON。可以存数据库、从接口下发、手动编辑、用脚本批量生成。",[80,87,88],{},"设计器本身是普通 Vue 组件，可以嵌入任何已有项目，不需要改造架构。",[12,90,91],{"id":91},"三块拼图",[16,93,94,98],{},[95,96,97],"strong",{},"Design"," — 可视化设计器。 包含画布、工具栏、属性面板、部件大纲。用户通过拖拽构建页面结构，实时预览效果。Design 内部维护节点注册表，管理所有部件的挂载与卸载。",[16,100,101,104],{},[95,102,103],{},"Display"," — 组件化渲染器。 接收节点数组和部件注册表，递归遍历节点树，为每个节点匹配对应的部件组件。支持 design \u002F display \u002F print 三种渲染模式，根据使用场景自动切换。",[16,106,107,110],{},[95,108,109],{},"Widget"," — 部件。 可扩展的最小单元。每个部件定义它在不同环境下的外观：design 组件用于画布编辑、render 组件用于最终展示、print 组件用于打印。还支持 setting 配置面板、doc 文档视图、thumb 缩略图。部件通过 schema 声明默认数据，框架负责注入上下文和管理生命周期。",[12,112,113],{"id":113},"扩展能力",[16,115,116],{},"除核心的设计、渲染、部件体系外，kavina 还提供：",[77,118,119,122,125,132],{},[80,120,121],{},"插件系统 — settings 设置面板、outline 部件大纲、widgets 部件库都是插件。开发者可以注册自定义插件扩展设计器能力。",[80,123,124],{},"主题系统 — 基于 CSS 变量实现亮色\u002F暗色切换和主题色定制。不与任何 UI 框架绑定。",[80,126,127,128,131],{},"表达式引擎 — 节点字段 ",[39,129,130],{},"valueExpr"," 支持 JavaScript 表达式，用于动态默认值和事件处理。",[80,133,134,135,138],{},"国际化 — 部件 schema 接收 ",[39,136,137],{},"lang"," 参数，配合 i18n 工具为不同语言生成不同的默认配置。",[140,141,142],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":51,"depth":51,"links":144},[145,146,147,148],{"id":14,"depth":51,"text":14},{"id":21,"depth":51,"text":21},{"id":91,"depth":51,"text":91},{"id":113,"depth":51,"text":113},"Vue 3 低代码框架 — 可视化设计器与组件化渲染引擎","md",{},true,"1","\u002Fworks\u002Fkavina",null,{"title":6,"description":149},"works\u002F01.kavina",[159,160,161],"Vue","Design System","低代码框架","网站","https:\u002F\u002Fkavina.unsun.cc\u002F","eiTjLiVdW67YT2oOoiu0-W7Y9J-lGlEdW51sils-p70",{"id":166,"avatar":167,"extension":168,"href":169,"meta":170,"name":171,"order":172,"role":173,"stem":174,"__hash__":175},"creators\u002Fcreators\u002Fhimavanta.yml","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002FHimavanta.jpeg","yml","https:\u002F\u002Fgithub.com\u002Fhimavanta",{},"Himavanta","2","前端开发者 \u002F prop.show 创作者","creators\u002Fhimavanta","nxUeEQICL0UQctqSQKySYupxANMW1YmepMjbS4HaAYI",1785520403631]