README.md

    可视化表单低代码平台

    简介

    react可视化表单设计及代码生成器,可将多种不同的组件通过拖拽、排序、组合成整套适合你的表单组件;包括问题关联,动态删减,问题描述、图片搭配、设置标签、多样模板等功能,使用配套组件能更好的完成任务需求。

    技术分析

    • react + react-dom 18.2.0
    • react-router-dom 6.8.1
    • typescript 4.9.3
    • vite 4.1.0
    • @reduxjs/toolkit 1.9.2
    • antd 5.4.6
    • @dnd-kit 6.0.0+
    • monaco-editor + js-beautify + file-saver 可视化文件导出

    运行

    • 确保已经安装node.js 16.8+
    • 首次下载项目后,安装项目依赖:
    建议使用npm安装,避免使用其它方式在安装过程中丢包的问题
    
    npm install

    本地运行

    npm run dev

    构建打包

    npm run build

    注意事项

    • antd5
    antd5已经放弃less,使用css-in-js的方式注入样式,所以安装antd之后不需要引入样式文件都可使用,
    但是antd4必须要引入样式文件才行。
    • less
    vite4中已经默认安装less使用,但是建立样式文件必须是.module.less才能使用,
    所以为了方便全局使用less,还是建议手动安装。
    • 样式兼容
    Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧版浏览器,请根据实际需求进行降级处理:
    代码库中使用的是:where 选择器,降低 CSS Selector 优先级。
    如果你需要支持的旧版浏览器(或者如 TailwindCSS 优先级冲突),
    你可以使用 @ant-design/cssinjs 取消默认的降权操作(请注意版本保持与 antd 一致),
    并且在代码库中修改Ant Design的css前面加上:root即可,如下所示:
    
    css样式修改:
     :root .ant-form-item {
    	margin-bottom: 26px;
    };
    
    less样式修改:
     :root {
    	 .ant-form-item {
    		 margin-bottom: 26px;
    	 }
     }
    

    项目简介

    react可视化表单设计及代码生成器,可将多种不同的组件通过拖拽排序组合成整套适合你的表单组件,包括动态排序,问题关联,多样模板等功能,使用配套组件能更好的完成任务需求。 新代码请前往github获取:https://github.com/youjia727/form-active

    发行版本

    当前项目没有发行版本

    贡献者 4

    youjia727 @youjia727
    6 645f2f6c055b24798d5f829a @645f2f6c055b24798d5f829a
    Y yuanzengding-0401 @yuanzengding-0401
    Y youjia727 @youjia727

    开发语言

    • TypeScript 81.4 %
    • Less 17.7 %
    • CSS 0.7 %
    • HTML 0.1 %
    • Shell 0.0 %