lowcode-engine 组件面板详解：资产包解析、分组排序与搜索机制

lowcode-engine 组件面板详解资产包解析、分组排序与搜索机制【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine导读组件面板Component Panel是 lowcode-engine 搭建界面中承载并展示组件的核心面板它负责获取并解析低代码引擎的资产包数据按照分组group与分类category规则对组件进行 tab / collapse 两级编排并提供基于关键词的搜索能力。读完本文你将掌握资产包数据与面板展示之间的字段映射关系、sort.groupList/sort.categoryList的排序协议、组件低代码 schema 片段snippets在拖拽时的插入机制以及如何为组件配置搜索关键词从而为上层搭建平台定制一套符合业务需要的组件面板。组件面板概述数据从资产包到面板组件面板顾名思义就是承载组件的面板。它本身并不负责生产组件而是获取并解析传入给低代码引擎的资产包数据从中得到需要被展示的组件列表再根据分类、排序规则对组件进行排列同时提供搜索功能。这里的资产包数据即 低代码引擎资产包协议Assets 协议所定义的结构化数据。按该协议资产包最顶层包含 7 类描述内容version当前协议版本号packages低代码编辑器中加载的资源列表公共库、组件库 CDN 资源等components所有组件的描述协议列表sort用于描述组件面板中的 tab 和 categoryplugins设计器插件描述协议列表setters设计器中设置器描述协议列表extConfig平台自定义扩展字段。其中components与sort是组件面板展示的直接数据来源前者描述有哪些组件、每个组件长什么样后者描述这些组件在面板里如何分组、如何排序。协议中sort属于 AA 级规范推荐规范由低代码引擎官方插件支持定义在协议文档 2.4 sort 章节。组件信息面板承载的七类组件元数据组件面板承载的组件信息包括信息项说明面板上的呈现方式组件标题title组件的中文/展示名称直接可见用于识别组件组件截图screenshot组件的快照图片直接可见作为组件预览图组件低代码 schema 片段snippets组件不同状态下的低代码 schema可有多份拖拽到设计器时自动插入页面 schema组件分组group一级分组决定组件位于组件面板的哪个 tab作为 tab 分组依据组件分类category二级分组决定组件位于同一 tab 下的哪个区域作为 collapse折叠区分组依据是否隐藏组件控制组件是否出现在面板中控制展示/隐藏关键词keywords用于搜索聚合 name、title、description、keywords 等字段作为搜索匹配目标这些组件信息均通过资产包数据获取。在源码层面与上述字段一一对应的类型定义位于 packages/types/src/shell/type/component-metadata.ts其IPublicTypeComponentMetadata接口明确声明了titletitle or descriptionscreenshot组件快照snippets可用片段见下文group一级分组category二级分组priority组件优先级排序keywords、tags、description等附加检索字段。字段更完整的定义可参考 《低代码引擎物料协议规范》 中 2.2.2 组件描述协议 的基础信息表componentName、title、description、docUrl、screenshot、icon、tags、keywords、devMode、npm、snippets、group、category、priority。其中group用于描述当前组件位于组件面板的哪个 tabcategory用于描述组件位于组件面板同一 tab 的哪个区域priority用于描述组件在同一 category 中的排序。组件低代码 schema 片段snippets与拖拽插入IPublicTypeSnippet定义见 packages/types/src/shell/type/snippet.ts描述组件在面板中可供拖拽的可用片段其内容为组件不同状态下的低代码 schema可以有多个title组件分类 titlescreenshotsnippet 截图schema待插入的 schema。从源码注释可以确认其运行机制用户从组件面板拖入组件到设计器时会向页面 schema 中插入snippets中定义的组件低代码 schema。也就是说面板里看到的标题与截图是皮真正起作用的是背后的 schema 片段——一次拖拽本质上是把一段预置的低代码 schema 落到当前编辑页面的节点树上这与 资产包协议 中Snippet接口title/screenshot/schema: ElementJSON的定义完全一致。组件分组、分类与排序组件面板采用两级分组的编排结构tab一级相同group的组件放在同一个 tab 下collapse二级相同category的组件放在同一个 collapse折叠区间中同时支持对 tab 和 collapse 进行整体排序。由于这是整体性的排序单个组件自身的信息无法决定该排序因此在资产包数据根节点新增了sort字段用于指定分组和分类的排序。按 资产包协议 2.4 sort 章节 的定义根属性名称类型说明变量支持默认值sort.groupListString[]组件分组用于组件面板 tab 展示-[精选组件, 原子组件]sort.categoryListString[]组件面板中同一个 tab 下的不同区间用 category 区分category 的排序依照 categoryList 顺序排列-[通用, 数据展示, 表格类, 表单类]该类型在引擎中的 TypeScript 定义为IPublicTypeComponentSort见 packages/types/src/shell/type/component-sort.tsexport interface IPublicTypeComponentSort { /** 用于描述组件面板的 tab 项及其排序例如[精选组件, 原子组件] */ groupList?: string[]; /** 组件面板中同一个 tab 下的不同区间用 category 区分category 的排序依照 categoryList 顺序排列 */ categoryList?: string[]; }需要强调的是groupList/categoryList中的顺序即面板中的展示顺序groupList决定 tab 从左到右的排列categoryList决定每个 tab 内折叠区自上而下的排列。面板会将组件按其group/category归入对应位置未出现在列表中的分组/分类按默认策略处理。组件自身的 group、category、priority除了资产包根节点的sort组件描述本身也携带分组相关信息见 物料协议基础信息表group用于描述当前组件位于组件面板的哪个 tabcategory用于描述组件位于组件面板同一 tab 的哪个区域priority用于描述组件在同一 category 中的排序。结合IPublicTypeComponentMetadatacomponent-metadata.ts可以看到group/category同时支持string | IPublicTypeI18nData即支持多语言文案适合国际化搭建平台按当前语言展示分组名。实践中建议约定组件描述里的group/category取值应尽量与资产包根节点sort.groupList/sort.categoryList中的项保持一致否则组件会被归入面板的其他区域或默认位置。搜索机制关键词如何命中组件组件面板提供搜索能力其匹配目标是组件元数据中的多个文本字段。按本文档说明面板会提取组件的 name、title、description、keywords 等字段作为搜索匹配的目标。因此通过组件名称、组件描述可以直接搜索到对应组件还可以额外指定一些keywords关键词用来命中名称和描述里没有、但业务上希望可被搜到的词汇keywords既可以是数组string[]也可以是字符串string类型两种写法均被支持。在组件描述协议中keywords字段被定义为组件关键词用于搜索联想见 物料协议 2.2.2.2 基础信息其类型为String允许为空IPublicTypeComponentMetadata中keywords?: string[]也印证了数组形式的存在。搜索的实现实际上是多个字段的聚合匹配即一次搜索会同时拿查询词去比对 name、title、description、keywords因此为组件补充恰当的关键词可以显著提升其在面板中的可检索性。实战构造一份带分组排序的资产包下面给出一份最小可用的资产包示例完整演示sort、components与组件元数据字段的配合写法字段含义以 资产包协议 为准{ version: 1.1.0, packages: [ { package: example/biz-components, version: 1.0.0, library: BizComponents, editUrls: [https://cdn.example.com/biz-components/view.js], urls: [https://cdn.example.com/biz-components/index.js] } ], sort: { groupList: [精选组件, 原子组件, 业务组件], categoryList: [通用, 数据展示, 表格类, 表单类] }, components: [ { componentName: BizTable, title: 业务表格, description: 带分页与筛选的业务表格, keywords: [table, 列表, 分页], group: 业务组件, category: 表格类, priority: 1, npm: { package: example/biz-components, exportName: BizTable, version: 1.0.0 }, snippets: [ { title: 业务表格, schema: { componentName: BizTable, props: { size: medium, pagination: true } } } ] } ] }将该资产包作为 assets 参数传入引擎初始化后组件面板会解析components得到组件列表及每个组件的标题、截图、schema 片段、分组、分类、关键词等元数据依据sort.groupList依次创建精选组件 / 原子组件 / 业务组件三个 tab在每个 tab 内依据sort.categoryList创建通用 / 数据展示 / 表格类 / 表单类四个折叠区并把BizTable归入业务组件tab 下的表格类区域当用户搜索分页或table时通过 keywords 聚合命中BizTable当用户把BizTable拖入画布时将snippets[0].schema作为节点插入页面 schema。至此组件面板的数据解析 → 分组排序 → 检索 → 拖拽插入完整链路就打通了。总结组件面板是 lowcode-engine 物料体系面向编辑器的窗口它通过 资产包协议 读取组件描述与排序配置将group映射为 tab、category映射为 collapse并通过根节点的sort.groupList/sort.categoryList完成整体排序组件自身的title、screenshot、snippets、keywords等字段则分别支撑面板展示、拖拽插入与搜索联想。理解这套字段映射关系后上层搭建平台即可通过定制资产包数据灵活控制组件面板的分组结构、展示顺序与检索效果而无需改动引擎本身。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考