本项目是一个基于 React 和 Ant Design 的 低代码平台 ，旨在通过配置 JSON 来生成复杂的用户界面和交互逻辑。保留了原始组件的 API 风格，支持通过配置 JSON 来生成目标组件，标签名需要写成 tag，其他属性字段名称保持不变。
- 保留原始组件风格 ：通过配置 JSON，保留了原始组件的 API 风格，使得开发者可以轻松地迁移和扩展。
- 支持复杂交互 ：支持通过配置实现复杂的交互逻辑，如表单提交、数据请求、对话框管理等。
- 易于扩展 ：通过定义新的 tag，可以轻松扩展新的组件和功能。
- 支持无限层级嵌套
npm i collect-ui传统的页面开发方式通常需要编写大量的原生代码，例如：
const App=()=>{
return (
<div>
<label>低代码测试</label>
<input class="ui-input" placeholder="请输入用户名"/>
</div>
)
}而使用低代码组件，可以通过简洁的 JSON 配置实现相同的功能：
import { Render } from "collect-ui"
const config={
"tag":"div",
"children":[
{
"tag":"label",
"children":"低代码测试"
},
{
"tag":"input",
"className":"ui-input",
"placeholder":"请输入用户名"
}
]
}
const App = () => {
return <Render {...config}/>
};尽管 JSON 配置看起来可能比原生代码更冗长，但低代码组件的优势在于其灵活性和可维护性。通过后台返回的 JSON 配置，可以轻松实现页面的动态改动和新建，无需深入了解复杂的代码逻辑，从而大大提升了开发效率和灵活性。
在 demo 目录下的 App.tsx 文件中，提供了一个用户增删改查的示例。该示例展示了如何通过配置 JSON 来生成一个完整的用户管理界面。
以下是一个简化的示例配置，展示了如何通过 JSON 配置生成一个输入框组件：
<input placeholder="请输入用户名" style="background:blue" className="ui-input"/>对应配置，只有标签名input 需要写成tag:"input", 其他属性字段名称都不变。
{
"tag":"input",
"className":"ui-input",
"placeholder":"请输入用户名",
"style":{
"background":"blue"
}
}import { Render } from "collect-ui/src/index"
const App = () => {
return <Render {...config}/>
};通过低代码组件的 JSON 配置，我们能够保持原始组件的风味，同时实现动态页面的生成。这种配置方式不仅能够完成原始组件的任何功能，还可以通过前端配置生成，未来甚至可以直接由后台返回。这意味着，一旦后台返回新的配置，页面的改动将无需重新打包，从而极大地提升了开发的灵活性和效率。
例如，tag 中注册的 input 标签实际上是基于 Ant Design 组件的二次封装，这使得我们能够在保持 Ant Design 风格的同时，通过简单的 JSON 配置实现复杂的功能。
- 保持原始组件风格 ：通过 JSON 配置，保持了原始组件的风格和功能。
- 动态页面配置 ：前端配置生成页面，未来可由后台动态返回配置，实现页面的实时更新。
- 无需重新打包 ：后台返回的配置更改无需重新打包，极大提升了开发效率和灵活性。
- Ant Design 二次封装 ：通过二次封装的 Ant Design 组件，保持了组件的风格一致性，同时简化了配置过程。
无需重新打包：后台返回的配置更改无需重新打包，极大提升了开发效率和灵活性。
Ant Design 二次封装：通过二次封装的 Ant Design 组件，保持了组件的风格一致性，同时简化了配置过程。
npm inpm run dev自定义代码高亮组件指南 本文档将指导您如何在项目中自定义一个代码高亮组件，并使用 react-syntax-highlighter 作为底层实现。我们将通过以下步骤完成这一任务：
- 注册自定义组件：在应用层注册 coder 标签。
- 实现自定义组件 ：创建一个 Coder 组件，利用 utils.transferProp 将字符串变量转换为实际的 store 变量。
- 配置组件：在实际配置中使用自定义组件。
首先，在应用层注册 coder 标签。以下是 App 组件的代码：
import React from 'react';
import gateway from "./data/gateway.json"
import { Render,setRegister } from "collect-ui"
import Coder from "./components/coder"
setRegister('coder',Coder)
const App = () => {
return (
<Render {...gateway}/>
);
};
export default App;接下来，创建一个 Coder 组件。该组件将使用 react-syntax-highlighter 来实现代码高亮，并利用 utils.transferProp 将字符串变量转换为实际的 store 变量。以下是 Coder 组件的代码：
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
import {utils} from "collect-ui"
const CoderComponent = (props) => {
const {...rest}=props;
const newProps =utils.transferProp(rest,"coder")
return <SyntaxHighlighter language="nginx" style={tomorrow} className="h100" {...newProps}/>
};
export default CoderComponent;最后，在实际配置中使用自定义组件。以下是配置示例，其中 config.router_path 对应 initStore 的变量：
{
"tag": "coder",
"customStyle": {
"height": "100%"
},
"children": "${config.router_path}"
}通过以上步骤，您已经成功地在项目中自定义了一个代码高亮组件，并将其集成到应用中
你可以通过以下步骤在本地部署包含文档内容的静态网站，并确保根路由以 collect-ui 开头：
- 创建目录：在你的Nginx根目录创建一个名为 docs 的目录，然后就collect-ui目录。
- 拷贝内容：将你的 docs 文件夹内容拷贝到 collect-ui 目录中。
- 配置Web服务器：使用你选择的Web服务器（如Nginx）来设置你的静态网站。确保你的Web服务器配置指向 collect-ui 目录，并且根路由以 collect-ui 开头。
(ps带有collect-ui,是在app.json里面配置的，以及vite.demo.config.ts配置打包路径，为适配github的项目路由)
以下是修改后的Nginx配置，监听8888端口，并且根路由指向 collect-ui 目录：
server {
listen 8888;
server_name _;
location / {
root docs;
try_files $uri $uri/ /index.html;
}
}可以在在nginx目录下创建collect-ui 然后 http://127.0.0.1:8888/collect-ui
在 demo 目录下的 App.tsx 文件中，我们实现了一个用户管理的低代码示例。该示例展示了如何通过 JSON 配置与后端（使用 Go 语言编写的 collect 低代码后台）进行对接，实现用户的增删改查功能。为了简化演示，我们预先造了一些数据。
示例代码在demo文件夹下App.tsx中