华炎魔方前端控件

华炎魔方 · 文档 · 报告错误 · 社区

华炎魔方是Salesforce低代码平台的开源替代方案，华炎魔方将低代码技术与企业业务场景结合，助力企业在最短时间内开发数字化解决方案，包括数据建模、权限控制、流程审批、统计分析、应用集成，并可以编写“高代码”实现高级业务逻辑。

🤖 🎨 🚀

技术框架

华炎魔方前端使用 React 开发表单、列表视图控件，并基于 Meteor 实现完整界面。

• Ant Design ProForm: 基于 ProForm 开发表单控件，根据自定义对象动态创建表单、操作业务数据。
• Salesforce Lightning Design System: Salesforce 开源的企业软件设计标准和样式库。React 控件库
• Tailwind CSS: 直接用class表述样式，而无需编写和维护css文件。
• AG Grid: 因为ProTable功能太弱，我们选择 AG Grid 构建列表视图控件。
• Redash: 引入Redash部分前端源码，开发查询设计器、图表设计器、仪表盘设计器。
• Mobx React Lite：基于Mobx React Lite实现华炎魔方的React Store。

源码目录索引

• Storybook：实现展示 Storybook 示例。
• Apps/Charts-Design：基于 redash 的部分源码，实现了华炎魔方 仪表盘 的设计器。
• NPM Packages： 华炎魔方各种React组件包源码，其内每个子文件夹都是一个标准的NPM包。

组件源码在 NPM Packages 文件夹内的各个NPM包中，要修改源码调式可以参考以下教程 运行Storybook 或 运行WebApp 来调式源码。

运行Storybook

在项目根目录按以下步骤指示可以运行一个 Storybook 服务。

配置华炎魔方服务地址

假设我们需要连接到的华炎魔方服务地址为http://localhost:5000。

请在根目录创建一个.env.local文件，输入以下内容把华炎魔方服务地址配置为环境变量。

REACT_APP_API_URL=http://localhost:5000

安装依赖包

请打开命令行窗口并在根目录执行以下命令来安装项目依赖包。

yarn

运行项目

接下来执行以下命令来运行项目。

yarn start

等待几分钟，当服务成功跑起来后会自动打开浏览器访问服务地址： http://localhost:6006/。

运行WebApp

按以下步骤指示可以运行源码在packages/react-webapp目录中的React Web APP，这是一个包括登录界面在内的可独立运行的连接华炎魔方平台的React应用。

配置WebApp连接的服务地址

假设我们需要连接到的华炎魔方服务地址为http://localhost:5000。

请在packages/react-webapp中创建一个.env.local文件，输入以下内容把华炎魔方服务地址配置为环境变量。

REACT_APP_API_URL=http://localhost:5000

安装相关依赖包

请打开命令行窗口并在根目录分别执行以下命令来安装项目依赖包。

yarn
cd packages/react-webapp
yarn

运行React WebApp

接下来执行以下命令来运行React WebApp。

yarn start

等待几分钟，当服务成功跑起来后会自动打开浏览器访问服务地址： http://localhost:3000/。

打包测试

在根目录执行 yarn build 命令，复制packages/builder-community路径下的dist文件夹替换steedos-platform项目中creator/node_modules/@steedos-ui/builder-community路径下的dist文件夹，运行steedos-platform项目进行测试。

发布新版本

请将当前开发（目前是2.1）分支代码合并到 publish-latest 分支，合并代码后 Git Actions 会自动开始打包并发布。

待 Git Actions 执行成功后把publish-latest 分支代码合并到当前开发分支。

在 steedos-platform 项目的 creator/package.json 文件中找到 @steedos-ui/builder-community 属性，修改为最新版本值，提交代码。