自定义组件模板列表
内置模板1: neo-custom-cmp-template
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
simpleCmp__c | 简单示例组件 | 简单示例组件，适合快速上手 | web | template/neo-custom-cmp-template/src/components/simpleCmp__c/ |
customApi__c | 自定义API示例 | 通过通用代理请求外部数据接口，并以表格形式展示外部接口数据 | web | template/neo-custom-cmp-template/src/components/customApi__c/ |
entityDetail__c | 实体数据详情 | 实体详情信息展示，支持多列布局 | web | template/neo-custom-cmp-template/src/components/entityDetail__c/ |
entityForm__c | 实体表单 | 基于 XObject 的实现的对象表单组件，可用于新增实体业务数据 | web | template/neo-custom-cmp-template/src/components/entityForm__c/ |
entityTable__c | 实体数据表格 | 基于 XObject 实现的实体数据表格组件，支持实体数据的增删改查操作 | web | template/neo-custom-cmp-template/src/components/entityTable__c/ |
如何使用
bash
neo init -t neo -n myCustomCmps这是最通用的自定义组件模板，适合大多数业务场景：
simpleCmp__c：最小化示例，适合从零开始学习组件开发customApi__c：通过propsSchema中的customApi类型配置外部接口地址和请求参数entityTable__c：通过xObjectDataApi绑定实体数据源和字段列表entityDetail__c：通过xObjectDetailApi绑定实体详情数据，支持 1~4 列布局entityForm__c：通过xObjectDataApi绑定实体，表单提交后触发onSubmit事件
内置模板2: neo-h5-cmps
技术栈：React + TypeScript（H5 移动端）
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
chatPage__c | chatPage | chatPage 智能对话组件 | mobile | template/neo-h5-cmps/src/components/chatPage__c/ |
entityList__c | 数据列表 | 基于平台 entityList 实现的实体数据列表组件 | mobile | template/neo-h5-cmps/src/components/entityList__c/ |
globalSearchInput__c | 全局搜索组件 | 基于平台 GlobalSearchInput 实现的全局搜索组件 | mobile | template/neo-h5-cmps/src/components/globalSearchInput__c/ |
openChatPageBtn__c | 打开AI对话框 | 可用于打开 AI 对话页的按钮 | all（web + mobile） | template/neo-h5-cmps/src/components/openChatPageBtn__c/ |
entityTabs__c | 数据列表Tabs | 基于平台 H5端 entityList 实现的数据列表 Tabs 组件 | mobile | template/neo-h5-cmps/src/components/entityTabs__c/ |
如何使用
bash
neo init -t neo-h5-cmps -n myH5Cmps所有组件面向移动端（H5）场景：
chatPage__c/openChatPageBtn__c：通过propsSchema选择 Agent 类型（销售助理、营销、渠道经理、服务工程师）并配置 AI 提问内容entityList__c：通过xObjectEntityList选择实体对象，支持隐藏搜索、排序、筛选、操作按钮等globalSearchInput__c：配置搜索提示文字和背景色即可使用entityTabs__c：在entityList__c基础上增加 Tabs 切换和 AI 对话按钮，支持固定高度配置
内置模板3: neo-web-entity-grid
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
entityGrid__c | 基础大列表 | 基于平台 NeoEntityGrid 实现的数据列表，支持视图切换、搜索、新增、导出、分页等显隐控制 | web | template/neo-web-entity-grid/src/components/entityGrid__c/ |
entityGrid2__c | 自定义筛选列表 | 基于平台 NeoEntityGrid 实现，支持自定义表单筛选 + 大列表实时响应联动 | web | template/neo-web-entity-grid/src/components/entityGrid2__c/ |
entityGrid3__c | Picker列表 | 基于平台 NeoEntityGrid 实现的 Picker 列表模式数据选择器，支持单选和多选，不在设计器中直接展示 | web | template/neo-web-entity-grid/src/components/entityGrid3__c/ |
entityGrid4__c | 大列表/自定义工具栏 | 基于平台 NeoEntityGrid 实现，支持自定义工具栏 | web | template/neo-web-entity-grid/src/components/entityGrid4__c/ |
createForm__c | 新增数据表单 | 用于创建实体业务数据的表单组件 | web | template/neo-web-entity-grid/src/components/createForm__c/ |
searchForm__c | 自定义查询表单 | 对象数据查询表单，用于设置自定义筛选条件 | web | template/neo-web-entity-grid/src/components/searchForm__c/ |
如何使用
bash
neo init -t neo-web-entity-grid -n myWebListCmp适合需要完整列表管理能力的页面：
entityGrid__c：通用大列表，通过xObjectEntityList选择实体，可控制头部、工具栏、新建、导出、分页、行内编辑等所有功能的显隐entityGrid2__c：在entityGrid__c基础上增加自定义筛选联动，外部组件通过调用handleCustomSearchEvent传入筛选条件entityGrid3__c：作为子组件嵌入其他自定义组件中使用（exposedToDesigner: false），提供 Picker 选择能力entityGrid4__c：在entityGrid__c基础上支持自定义工具栏插槽createForm__c：通过xObjectDataApi绑定实体，表单提交后触发onSubmit事件（含表单数据）searchForm__c：与entityGrid2__c配合使用，点击查询后触发onQuery事件（含xObjectApiKey和conditions筛选条件）
内置模板4: neo-web-form
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
batchAddTable__c | 批量新增表格 | 批量新增数据组件，支持逐行录入与 Excel 批量导入 | web | template/neo-web-form/src/components/batchAddTable__c/ |
listSummary__c | 列表汇总 | 通过组件动作接收列表数据后展示商品总数与金额汇总，支持绑定实体、数量和金额字段 | web | template/neo-web-form/src/components/listSummary__c/ |
如何使用
bash
neo init -t neo-web-form -n myCustomForm适合表单录入与汇总场景，两个组件通常配合使用：
batchAddTable__c：通过xObjectDataApi绑定实体（如商机明细），支持逐行录入和 Excel 批量导入，点击提交触发onSubmit事件（含所有行数据）listSummary__c：通过setListData函数接收batchAddTable__c提交的列表数据，绑定数量字段和金额字段后自动汇总展示
内置模板5: antd-custom-cmp-template
技术栈：React + TypeScript + Ant Design
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
dataDashboard__c | 数据仪表板 | 使用 antd ui 组件实现的数据展示仪表板，支持动态数据更新和动画效果 | web | template/antd-custom-cmp-template/src/components/dataDashboard__c/ |
searchWidget__c | 搜索组件 | 使用 antd ui 组件实现的支持搜索输入，点击回车键显示搜索内容 | web | template/antd-custom-cmp-template/src/components/searchWidget__c/ |
如何使用
bash
# 基于此模板创建新项目
neo init -t antd -n antdCustomCmps在 src/components/ 下新建组件目录（命名规范：<cmpName>__c），包含：
index.tsx— 组件主体（React + Ant Design）model.ts— 编辑器描述文件（label、description、targetDevice、propsSchema 等）
内置模板6: echarts-custom-cmp-template
技术栈：React + TypeScript + ECharts
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
chartWidget__c | 酷炫图表组件 | 使用 echarts 实现的图表组件，支持多种图表类型切换，支持丰富的配置选项 | web（默认） | template/echarts-custom-cmp-template/src/components/chartWidget__c/ |
如何使用
bash
neo init -t echarts -n echartsCmps在 src/components/ 下新建组件目录，包含：
index.tsx— 使用echarts-for-react或原生 ECharts 渲染图表model.ts— 编辑器描述文件，通过propsSchema配置图表类型、标题、尺寸等属性
内置模板7: map-custom-cmp-template
技术栈：React + TypeScript + 高德地图
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
mapWidget__c | 地图组件 | 使用高德地图实现的地图区域展示组件，支持传入经纬度或地址名称 | web（默认） | template/map-custom-cmp-template/src/components/mapWidget__c/ |
如何使用
bash
neo init -t amap -n mapCmps组件通过 propsSchema 配置位置名称、经纬度、缩放级别、地图高度等。支持外部组件通过 functions.showLocation 动态更新展示区域。
内置模板8: neo-bi-cmps
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
targetNumber__c | 数值指标 | 关键数值指标展示卡片，支持从 XObject 实体对象获取动态数据，支持绑定多个字段进行展示 | all（web + mobile） | template/neo-bi-cmps/src/components/targetNumber__c/ |
filterBar__c | 筛选栏 | 筛选工具栏，支持日期范围、负责人、业务类型等多维度筛选 | all（web + mobile） | template/neo-bi-cmps/src/components/filterBar__c/ |
如何使用
bash
neo init -t neo-bi-cmps -n biCmpstargetNumber__c：在propsSchema中通过xObjectDetailApi绑定实体数据源，通过selectFieldDescApi选择要展示的字段。支持外部触发loadData刷新数据。filterBar__c：无需配置 propsSchema，通过事件onFiltersChange向外广播筛选条件变化；支持外部调用resetFilters/getFilters。
内置模板9: neo-order-cmps
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
entityInfoCard__c | 实体信息展示卡片 | 基于 xObject 实现的简版实体信息展示卡片，以网格布局展示实体数据信息 | web | template/neo-order-cmps/src/components/entityInfoCard__c/ |
simpleTable__c | 实体数据表格（简化版） | 基于 XObject 实现的数据表格组件，仅支持数据展示，不支持增删改查操作 | web | template/neo-order-cmps/src/components/simpleTable__c/ |
如何使用
bash
neo init -t neo-order-cmps -n myCustomCmps适合订单类页面场景：
entityInfoCard__c：通过xObjectDetailApi绑定实体详情，支持 2~6 列网格布局simpleTable__c：通过xObjectDataApi绑定实体数据源，只读展示，支持外部触发loadData刷新
内置模板10: react-custom-cmp-template
技术栈：React + JavaScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
infoCard__c | 信息卡片 | 简版信息展示卡片 | web（默认） | template/react-custom-cmp-template/src/components/infoCard__c/ |
如何使用
bash
neo init -t react -n reactCustomCmps使用 JavaScript（非 TypeScript）的 React 模板，适合不需要类型检查的轻量场景。model.js 中配置 propsSchema 支持标题、背景图、图片数量、评论数等属性。
内置模板11: react-ts-custom-cmp-template
技术栈：React + TypeScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
listWidget__c | 列表组件 | 自定义列表展示组件 | web（默认） | template/react-ts-custom-cmp-template/src/components/listWidget__c/ |
如何使用
bash
neo init -t react-ts -n tsCustomCmps标准 React + TypeScript 模板，适合新项目起步。model.ts 中通过 propsSchema 配置列表标题、图片显隐、标签显隐、列表项数量、列表样式（默认/卡片/简洁）等。
内置模板12: vue2-custom-cmp-template
技术栈：Vue 2 + JavaScript
| cmpType | 名称 | 描述 | 终端 | 示例组件位置 |
|---|---|---|---|---|
vueInfoCard__c | vue 信息卡片 | Vue2 版信息展示卡片 | web（默认） | template/vue2-custom-cmp-template/src/components/vueInfoCard__c/ |
如何使用
bash
neo init -t vue2 -n vueCustomCmps使用 Vue 2 + JavaScript 的模板，适合 Vue 技术栈团队。组件以 .vue 单文件组件形式开发，model.js 配置方式与 React 模板一致，支持卡片标题、背景图、图片数量、评论数等属性配置。
示例组件总览
| 序号 | cmpType | 组件名称 | 终端 | 技术栈 | 模板目录 | 描述 |
|---|---|---|---|---|---|---|
| 1 | simpleCmp__c | 简单示例组件 | web | React + TS | neo-custom-cmp-template | 简单示例组件，适合快速上手 |
| 2 | filterBar__c | 筛选栏 | all | React + TS | neo-bi-cmps | 筛选工具栏，支持日期范围、负责人、业务类型等多维度筛选 |
| 3 | entityDetail__c | 实体数据详情 | web | React + TS | neo-custom-cmp-template | 实体详情信息展示，支持多列布局 |
| 4 | entityForm__c | 实体表单 | web | React + TS | neo-custom-cmp-template | 基于 XObject 的实现的对象表单组件，可用于新增实体业务数据 |
| 5 | entityTable__c | 实体数据表格 | web | React + TS | neo-custom-cmp-template | 基于 XObject 实现的实体数据表格组件，支持实体数据的增删改查操作 |
| 6 | customApi__c | 自定义API示例 | web | React + TS | neo-custom-cmp-template | 通过通用代理请求外部数据接口，并以表格形式展示外部接口数据 |
| 7 | chatPage__c | chatPage | mobile | React + TS | neo-h5-cmps | chatPage 智能对话组件 |
| 8 | entityList__c | 数据列表 | mobile | React + TS | neo-h5-cmps | 基于平台 entityList 实现的实体数据列表组件 |
| 9 | globalSearchInput__c | 全局搜索组件 | mobile | React + TS | neo-h5-cmps | 基于平台 GlobalSearchInput 实现的全局搜索组件 |
| 10 | openChatPageBtn__c | 打开AI对话框 | all | React + TS | neo-h5-cmps | 可用于打开 AI 对话页的按钮 |
| 11 | entityTabs__c | 数据列表Tabs | mobile | React + TS | neo-h5-cmps | 基于平台 H5端 entityList 实现的数据列表 Tabs 组件 |
| 12 | entityInfoCard__c | 实体信息展示卡片 | web | React + TS | neo-order-cmps | 基于 xObject 实现的简版实体信息展示卡片，以网格布局展示实体数据信息 |
| 13 | simpleTable__c | 实体数据表格（简化版） | web | React + TS | neo-order-cmps | 基于 XObject 实现的数据表格组件，仅支持数据展示，不支持增删改查操作 |
| 14 | entityGrid__c | 基础大列表 | web | React + TS | neo-web-entity-grid | 基于平台 NeoEntityGrid 实现的数据列表，支持视图切换、搜索、新增、导出、分页等显隐控制 |
| 15 | entityGrid2__c | 自定义筛选列表 | web | React + TS | neo-web-entity-grid | 基于平台 NeoEntityGrid 实现，支持自定义表单筛选 + 大列表实时响应联动 |
| 16 | entityGrid3__c | Picker列表 | web | React + TS | neo-web-entity-grid | 基于平台 NeoEntityGrid 实现的 Picker 列表模式数据选择器，支持单选和多选，不在设计器中直接展示 |
| 17 | entityGrid4__c | 大列表/自定义工具栏 | web | React + TS | neo-web-entity-grid | 基于平台 NeoEntityGrid 实现，支持自定义工具栏 |
| 18 | createForm__c | 新增数据表单 | web | React + TS | neo-web-entity-grid | 用于创建实体业务数据的表单组件 |
| 19 | searchForm__c | 自定义查询表单 | web | React + TS | neo-web-entity-grid | 对象数据查询表单，用于设置自定义筛选条件 |
| 20 | batchAddTable__c | 批量新增表格 | web | React + TS | neo-web-form | 批量新增数据组件，支持逐行录入与 Excel 批量导入 |
| 21 | listSummary__c | 列表汇总 | web | React + TS | neo-web-form | 通过组件动作接收列表数据后展示商品总数与金额汇总，支持绑定实体、数量和金额字段 |
| 22 | dataDashboard__c | 数据仪表板 | web | React + TS + Ant Design | antd-custom-cmp-template | 使用 antd ui 组件实现的数据展示仪表板，支持动态数据更新和动画效果 |
| 23 | searchWidget__c | 搜索组件 | web | React + TS + Ant Design | antd-custom-cmp-template | 使用 antd ui 组件实现的支持搜索输入，点击回车键显示搜索内容 |
| 24 | chartWidget__c | 酷炫图表组件 | web | React + TS + ECharts | echarts-custom-cmp-template | 使用 echarts 实现的图表组件，支持多种图表类型切换，支持丰富的配置选项 |
| 25 | mapWidget__c | 地图组件 | web | React + TS + 高德地图 | map-custom-cmp-template | 使用高德地图实现的地图区域展示组件，支持传入经纬度或地址名称 |
| 26 | listWidget__c | 列表组件 | web | React + TS | react-ts-custom-cmp-template | 自定义列表展示组件 |
| 27 | infoCard__c | 信息卡片 | web | React + JS | react-custom-cmp-template | React 简版信息展示卡片 |
| 28 | vueInfoCard__c | vue 信息卡片 | web | Vue 2 + JS | vue2-custom-cmp-template | Vue2 版信息展示卡片 |
| 29 | targetNumber__c | 数值指标 | all | React + TS | neo-bi-cmps | 关键数值指标展示卡片，支持从 XObject 实体对象获取动态数据，支持绑定多个字段进行展示 |