XRender：低代码开发的利器

FormRender：表单生成器

生成动态表单

import React from 'react';
import FormRender, { useForm } from 'form-render'; // 导入 FormRender 组件和 useForm Hook

const schema = { // 定义表单的 JSON Schema
  type: 'object', // 数据类型为对象
  properties: { // 对象的属性
    input: {
      title: '输入框', // 显示的标签
      type: 'string', // 数据类型为字符串
      widget: 'input' // 组件类型为输入框
    },
    select: {
      title: '下拉框', // 显示的标签
      type: 'string', // 数据类型为字符串
      widget: 'select', // 组件类型为下拉框
      props: { // 组件的其他属性
        options: [
          { label: '早', value: 'a' },
          { label: '中', value: 'b' },
          { label: '晚', value: 'c' }
        ]
      }
    }
  }
};

export default () => {
  const form = useForm(); // 创建表单实例

  const onFinish = (formData) => { // 定义表单提交时的回调函数
    console.log('formData:', formData); // 打印表单数据
  };

  return (
    <FormRender 
      form={form} // 传入表单实例
      schema={schema} // 传入表单的 JSON Schema
      onFinish={onFinish} // 传入表单提交时的回调函数
      maxWidth={360} // 设置表单的最大宽度
      footer={true} // 显示底部工具栏
    />
  );
}

TableRender：表格生成器

import React from 'react';
import TableRender from 'table-render'; // 导入 TableRender 组件
import { Button } from 'antd'; // 导入 Ant Design 的 Button 组件
import { PlusOutlined } from '@ant-design/icons'; // 导入 Ant Design 的图标组件

const dataSource = []; // 定义数据源
for (let i = 0; i < 6; i++) {
  dataSource.push({
    id: i.toString(),
    title: `标题${i + 1}`,
    created_at: new Date().getTime(),
  });
}

const schema = { // 定义表格的 JSON Schema
  type: 'object', // 数据类型为对象
  labelWidth: 70, // 标签宽度
  properties: { // 对象的属性
    title: {
      title: '标题', // 显示的标签
      type: 'string' // 数据类型为字符串
    },
    created_at: {
      title: '创建时间', // 显示的标签
      type: 'string', // 数据类型为字符串
      format: 'date' // 数据格式为日期
    }
  }
};

const columns = [ // 定义表格的列
  {
    title: '标题', // 列的标题
    dataIndex: 'title', // 列的数据索引
  },
  {
    title: '创建时间', // 列的标题
    key: 'since', // 列的键
    dataIndex: 'created_at', // 列的数据索引
    valueType: 'date', // 数据类型为日期
  },
  {
    title: '操作', // 列的标题
    render: (row) => <a onClick={() => alert(row.title)}>编辑</a>, // 自定义渲染函数
  }
];

const Demo = () => {
  const api = () => { // 定义数据请求函数
    return {
      data: dataSource, // 返回数据源
      total: dataSource.length // 返回数据总数
    };
  };

  return (
    <TableRender
      search={{ schema }} // 传入搜索表单的 JSON Schema
      request={api} // 传入数据请求函数
      columns={columns} // 传入表格的列定义
      title='最简表格' // 设置表格的标题
      toolbarRender={ // 自定义工具栏渲染函数
        <>
          <Button>查看日志</Button>
          <Button>导出数据</Button>
          <Button type='primary'>
            <PlusOutlined />
            新增
          </Button>
        </>
      }
    />
  );
}

export default Demo;

XFlow：画布流生成器

import React from 'react';
import XFlow from '@xrenders/xflow'; // 导入 XFlow 组件

export default () => {
  const nodeSettings = [ // 定义节点设置
    {
      title: '开始', // 节点的标题
      type: 'Start', // 节点的类型
      hidden: true, // 是否隐藏节点
      targetHandleHidden: true, // 是否隐藏目标句柄
      icon: { // 节点的图标设置
        type: 'icon-start',
        bgColor: '#17B26A',
      },
      settingSchema: { // 节点的设置表单的 JSON Schema
        type: 'object',
        properties: {
          input: {
            title: '变量一', // 显示的标签
            type: 'string', // 数据类型为字符串
            widget: 'input', // 组件类型为输入框
          },
        },
      },
    },
    {
      title: '结束', // 节点的标题
      type: 'End', // 节点的类型
      hidden: true, // 是否隐藏节点
      sourceHandleHidden: true, // 是否隐藏源句柄
      icon: { // 节点的图标设置
        type: 'icon-end',
        bgColor: '#F79009',
      },
      settingSchema: { // 节点的设置表单的 JSON Schema
        type: "object",
        properties: {
          input: {
            title: '变量一', // 显示的标签
            type: 'string', // 数据类型为字符串
            widget: 'input', // 组件类型为输入框
          },
        }
      }
    },
    {
      title: 'LLM', // 节点的标题
      type: 'LLM', // 节点的类型
      description: '调用大语言模型回答问题或者对自然语言进行处理', // 节点的描述
      icon: { // 节点的图标设置
        type: 'icon-model',
        bgColor: '#6172F3',
      },
      settingSchema: { // 节点的设置表单的 JSON Schema
        type: 'object',
        properties: {
          model: {
            title: '模型', // 显示的标签
            type: 'string', // 数据类型为字符串
            enum: ['gpt-3.5', 'gpt-4'], // 枚举值
            default: 'gpt-3.5' // 默认值
          },
          temperature: {
            title: '温度', // 显示的标签
            type: 'number', // 数据类型为数字
            default: 0.7, // 默认值
            minimum: 0, // 最小值
            maximum: 1 // 最大值
          }
        }
      }
    },
    {
      title: 'Prompt', // 节点的标题
      type: 'Prompt', // 节点的类型
      description: '通过精心设计提示词，提升大语言模型回答效果', // 节点的描述
      icon: { // 节点的图标设置
        type: 'icon-prompt',
        bgColor: '#17B26A',
      },
    },
    {
      title: '知识库', // 节点的标题
      type: 'knowledge', // 节点的类型
      description: '允许你从知识库中查询与用户问题相关的文本内容', // 节点的描述
      icon: { // 节点的图标设置
        type: 'icon-knowledge',
        bgColor: '#6172F3',
      },
    },
  ];

  const initialValues = { // 定义初始的节点和边
    nodes: [
      {
        id: 'start', // 节点的唯一标识
        type: 'Start', // 节点的类型
        data: {
          input: '开始节点' // 节点的数据
        },
        position: {
          x: 100,
          y: 100
        }
      },
      {
        id: 'llm', // 节点的唯一标识
        type: 'LLM', // 节点的类型
        data: {
          model: 'gpt-3.5', // 节点的数据
          temperature: 0.7 // 节点的数据
        },
        position: {
          x: 500,
          y: 100
        }
      },
      {
        id: 'prompt', // 节点的唯一标识
        type: 'Prompt', // 节点的类型
        data: {},
        position: {
          x: 900,
          y: 100
        }
      },
      {
        id: 'end', // 节点的唯一标识
        type: 'End', // 节点的类型
        data: {
          input: '结束节点' // 节点的数据
        },
        position: {
          x: 1200,
          y: 100
        }
      }
    ],
    edges: [
      {
        id: 'start-llm', // 边的唯一标识
        source: 'start', // 边的起始节点
        target: 'llm' // 边的目标节点
      },
      {
        id: 'llm-prompt', // 边的唯一标识
        source: 'llm', // 边的起始节点
        target: 'prompt' // 边的目标节点
      },
      {
        id: 'prompt-end', // 边的唯一标识
        source: 'prompt', // 边的起始节点
        target: 'end' // 边的目标节点
      }
    ]
  };

  return (
     <div style={{ height: '600px' }}>
      <XFlow
        settings={nodeSettings} // 传入节点的设置
        initialValues={initialValues} // 传入初始的节点和边
        iconFontUrl="//at.alicdn.com/t/a/font_4069358_caoh6qs1z9a.js" // 图标字体的 URL
      />
     </div>
  );
}

SchemaBuilder：表单低代码编辑器

import React from 'react';
import SchemaBuilder from '@xrenders/schema-builder'; // 导入 SchemaBuilder 组件

const Demo = () => {
  return (
    <div style={{ height: '80vh' }}>
      <SchemaBuilder importBtn={true} exportBtn={true} pubBtn={false} /> // 渲染表单低代码编辑器
    </div>
  );
};

export default Demo;

关键点解释

• SchemaBuilder：渲染表单低代码编辑器。
  • importBtn：是否显示导入按钮。
  • exportBtn：是否显示导出按钮。
  • pubBtn：是否显示发布按钮。

ChartRender：图表生成器

import React from 'react';
import ChartRender from '@xrenders/chart-render'; // 导入 ChartRender 组件

const schema = { // 定义图表的 JSON Schema
  type: 'object', // 数据类型为对象
  properties: {
    chartType: {
      title: '图表类型', // 显示的标签
      type: 'string', // 数据类型为字符串
      enum: ['line', 'bar', 'pie'], // 枚举值
      default: 'line' // 默认值
    },
    data: {
      title: '数据', // 显示的标签
      type: 'array', // 数据类型为数组
      items: {
        type: 'object', // 数组元素的数据类型为对象
        properties: {
          x: { type: 'string' }, // x 轴数据类型为字符串
          y: { type: 'number' } // y 轴数据类型为数字
        }
      }
    }
  }
};

const data = [ // 定义图表的数据
  { x: '2021-01', y: 100 },
  { x: '2021-02', y: 200 },
  { x: '2021-03', y: 300 }
];

const Demo = () => {
  return (
    <ChartRender schema={schema} data={data} /> // 渲染图表
  );
};

export default Demo;

关键点解释

• schema：定义图表的 JSON Schema。
  • chartType：图表类型。
  • data：图表数据。
• ChartRender：渲染图表。
  • schema：图表的 JSON Schema。
  • data：图表的数据。

总结

XRender 是一个强大的低代码开发平台，提供了一系列基于 JSON Schema 的生成器，包括表单生成器、表格生成器、画布流生成器、移动端表单生成器、表单低代码编辑器和图表生成器。通过 XRender，你可以快速构建复杂的应用程序，极大地提高开发效率。

希望这篇文章对你有帮助！如果你有更多问题，请随时告诉我。