# react-lcd-engine

**Repository Path**: VLeeDesignTheory/react-lcd-engine

## Basic Information

- **Project Name**: react-lcd-engine
- **Description**: 一款基于React的低代码引擎
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-18
- **Last Updated**: 2024-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center"><a href="https://gitee.com/VLeeDesignTheory/react-lcd-engine" target="_blank" rel="noopener noreferrer"><img width="200" src="assets/logo.png" alt="logo"></a></p>

# react-lcd-engine

## 介绍

> 一款基于 React 的低代码引擎

## 软件架构

总体架构采用分层设计，通过组件层、模板层以及工程层进行拆分

![总体架构](/assets/architecture.png)

对于[react-lcd-engine](https://gitee.com/VLeeDesignTheory/react-lcd-engine)分别通过`component`、`tooler`、`sider`、`setter`、`renderer`、`share`进行模块拆分。其中，`component`模块是暴露给开发者进行协同开发的共建区块

![技术选型](/assets/technology.png)

## 安装教程

1.  下载

```
npm install react-lcd-engine
```

2.  引入

```js
import {
  Cascader,
  ComponentBox,
  ConfigItem,
  EditScreens,
  Feedback,
  Layout,
  Loading,
  Ruler,
  Size,
  SvgIcon,
  Thumbnail,
  Assist,
} from "react-lcd-engine";
```

3.  使用

```jsx
import React from "react";
import {
  ComponentBox
} from "react-lcd-engine";

export default () => {
  return <ComponentBox />;
};
```

## 组件说明

|组件|名称|备注|
|:-:|:-:|:-:|
|Cascader|级联组件|`import { Cascader } from 'react-lcd-engine'`|
|ComponentBox|容器组件|`import { ComponentBox } from 'react-lcd-engine'`|
|ConfigItem|配置项组件|`import { ConfigItem } from 'react-lcd-engine'`|
|EditScreens|编辑大屏组件|`import { EditScreens } from 'react-lcd-engine'`|
|Feedback|反馈组件|`import { Feedback } from 'react-lcd-engine'`|
|Layout|布局组件|`import { Layout } from 'react-lcd-engine'`|
|Loading|加载组件|`import { Loading } from 'react-lcd-engine'`|
|Ruler|刻度尺组件|`import { Ruler } from 'react-lcd-engine'`|
|Size|尺寸组件|`import { Size } from 'react-lcd-engine'`|
|SvgIcon|Svg图标组件|`import { SvgIcon } from 'react-lcd-engine'`|
|Thumbnail|缩略图组件|`import { Thumbnail } from 'react-lcd-engine'`|
|Assist|AI助手组件|`import { Assist } from 'react-lcd-engine'`|

## 依赖说明

|依赖|依赖包|备注|
|:-:|:-:|:-:|
|react|[react 16.12.x](https://www.npmjs.com/package/react)|基于react 16.12.x以上的运行时进行构建|
|ant-design|[ant design 4.x](https://www.npmjs.com/package/antd)|基于ant design 4.x的组件库进行构建，主题色修改等请参考ant desgin的官方文档|

## 参考文献

- [React 官方文档](https://17.reactjs.org/)
- [Ant Design 官方文档](https://4x.ant.design/index-cn)

## 许可说明

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2024-present we452366