一、开源项目简介

XRender

中后台「表单/表格/图表/流程编排」开箱即用解决方案

二、开源协议

使用MIT开源协议

三、界面展示

四、功能概述

优势

• FormRender：像写一个 input 一样写表单
• TableRender：协议生成 & 高度灵活的搜索列表
• ChartRender：傻瓜式的图表绘制库
• FormGenerator：中后台表单可视化搭建生成利器

FormRender

像写一个 input 一样写表单

TableRender

协议生成 & 高度灵活的搜索列表

中后台列表开箱即用解决方案，常用于搜索列表快速生成

简介

• 开箱即用：以最简单的方式配置 API 请求和表头字段，就能生成一个好用的搜索列表。
• XRender 生态：搜索部分集成 FormRender，以最小成本快速生成搜索面板。
• 无缝对接：表格部分沿用 Ant Design Table， API 无缝对接，降低用户使用成本。
• 数据模版：表格列内置多种数据展示模版，减少自定义 Render 函数配置。
• 多种形态：支持搜索栏、工具栏、表格内容，根据业务需求相互组合展示多种形态。

FormGenerator

中后台表单可视化搭建生成利器

ChartRender

易用且轻量的中后台图表解决方案，常用于图表展示页快速生成

简介

1. 真正开箱即用
   ：以最简单的 API 配置请求，就能生成一个好用搜索图表。
2. XRender 生态
   ：搜索筛选能力用 FormRender 来提供，以最小成本快速生成搜索面板。
3. 无缝习惯使用
   ：表格能用 Ant Design Charts 来提供，降低用户使用成本。

XFlow

画布流程编排解决方案

简介

XFlow 是一个基于 ReactFlow 底层能力和 Dify 交互体验实现的新一代开箱即用流程画布插件。它旨在为中后台项目提供统一、高效、易用的流程画布解决方案。

特点

• 性能卓越：基于ReactFlow，提供高性能的图形渲染和交互能力。
• XRender 生态：配置面板部分集成FormRender，以最小成本快速生成配置面板。
• 快速上手：提供丰富的预设配置和组件，大幅减少开发工作量。
• 灵活定制：支持自定义节点、配置面板和节点组件，满足各种复杂业务需求。
• 操作便捷：支持缩放、撤销/重做、自动布局、全屏展示等功能。

FormRender Mobile

简介

FormRender Mobile 是为移动端设置的开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。基于 FormRender2.0 和 Ant Design Mobile 实现。API 与 FormRender 2.0 基本一致，如果你熟悉 FromRender 2.0 那么你就已经会使用 FormRender Mobile 了。

五、技术选型

FormRender

中后台表单解决方案，通过 JsonSchema 协议渲染表单

npm i form-render --save

TableRender

中后台列表开箱即用解决方案，常用于搜索列表快速生成

安装

table-render 依赖 ant design，单独使用不要忘记安装～

npm i table-render --save

ChartRender

安装

npm i chart-render --save

XFlow

画布流程编排解决方案

安装

npm install @xrenders/xflow

FormRender Mobile

为移动端设置的开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。

安装

FormRender Mobile 依赖 Ant Design Mobile，单独使用不要忘记同时安装 antd-mobile

npm i form-render-mobile --save