@visual-interface/page-base

前端 from low code 平台

使用方法:
1、npm install create-design-cli -g 2、新建 [project-file] 3、cd [project-file] 2、create-design-cli init 3、npm install 4、npm run design

模式说明

1、普通模式: 普通模式时前端修改json，最终汇总提交到后台。预览时时通过循环json显示form。
2、开发者模式: 开发者模式使用的是,本地开发时node的能力进行保存和生成json和代码
普通模式和开发者模式的区别在于。开发者模式可以将项目单独拆分，进行自定义添加组件。开发者模式属于发送到线上的由于没有node能力，需要将数据保存到后端的版本。

普通模式preview 使用方法

1、引入preview
2、参数: list, formLayout, request, change, submit

  list: 表单数据
  formLayout: 表单布局数据
  request: 使用者项目的http请求方法{get: function, post: function}
  change: 组件修改数据时触发
  submit: 分页组件，点击保存时触发

3、preview 是一个antd 的Form 表单。通过ref 可以获得 ref.form。等同于 antd Form 的 Form.useForm()

开发者模式新增物料示例

1、create-design-cli init
2、在components 中新建文件夹(test)
3、在test文件新增 design文件夹、view文件夹、index.json文件
4、参考visual-interface-poject/src/materiel 的写法 tip: 如果需要兼容普通模式，index.json文件新增字段时，请和后端沟通，避免上传到接口时因以前没这个字段不兼容。现有字段如下(下面有注释了的字段，要有..不然没法使用)

    fieldType: string, // 组件类型（必须）
    fieldLabel: string, // 组件名称 （必须)
    fieldOrder: number,
    fieldKey: string, // 组件key （自动生成，修改时避免重复)
    fieldRequired: bool, // 是否必填
    fieldDesc: string, //  题目组件名称
    fieldTypeName: string, // 组件名称（没用到)
    formParams: {
      field: string,
      extra: string,
      dateType: string,
      dateFormat: string,
      defaultValue: ,
      placeholder: string,
      disabled: bool
    },
    colProps: {
      span: number,
      offset: number,
      push: number,
      pull: number 
    },// 布局
    designParams: {} any,
    fieldProperties: {
      titleColor: string,
      titleSize: any,
      showType: bool 
    },
    fieldOption: {
      type: string,
      checkReg: any,
      errorTip: string 
    }

本质上来讲，这套代码可以添加任何自定义组件，但是由于一些原因，现在只能生成表单组件。

实现目标：

1、通过命令创建可以新增任何自定义组件的项目 2、自动识别新增的物料 3、能管理自定义组件依赖 4、本地保存设计的状态 5、根据可视化界面编辑的数据，生成对应前端组件（页面）

create-cli

场景一: 创建可编辑项目 copy code 创建package.json

启动项目 展示可编辑物料 编辑 生成表单数据 新建物料 识别文件 展示可编辑物料 编辑 生成表单数据 打包 根据表单数据,打包前端自定义表单页面

design

1、监听项目文件(完成) 3、操作文件(完成) 4、生成、修改ast(完成) 5、生成code(完成) 6、创建文件(完成) 7、写入materiel(完成) webpack 监听刷新页面(待完成)

修改配置 1、发送事件(完成) 2、生成json (完成)

build

1、读取json (完成) 2、根据json生成代码 (完成)