low-code

最近几年，低代码平台的概念一直很火，我也借助两个月利用摸鱼时间初步完成了一个低代码大屏构建平台。 这次文章我打算分为四个模块的连载系列，这篇文章主要整体介绍项目模块以及结构和实现思路，由于最近 将迎来996，如果大家感兴趣我后续将每个模块已文章的形式连载。

先上效果

项目结构

├── build.vue 主容器
 └─ components 组件库
  └─ build 模块组件库
      └─ border 边框视图组件
      └─ charts 图表视图组件
      └─ config 存放右侧配置模块中的相关组件
      └─ other  其它视图组件
      └─ table  表格视图组件
      └─ datavCanvas  画布模块组件
      └─ datavcharts  图层操作组件
      └─ datavConfig  配置模块组件
      └─ datavHeader  组件选择模块组件
      └─ datavPreview 大屏预览组件
  └─ common 共用组件库 
      └─ code-editor 编辑器组件
      └─ layer-operation 鼠标右击菜单组件
      └─ vue-draggable-resizable 拖拽组件
  └─ config 组件表单配置对象
  └─ mixins 组件共用逻辑
  ...

IT知识分享网

主容器

IT知识分享网主容器比较简单，简单来说就是存放各个模块的组件
唯一特殊就是我将整个画布对象放在主容器中，暴露出整个画布对象以供深层组件使用

provide() {
  return {
    $this: this,
    contain: this.contain,//画布对象
  };
},

画布模块

IT知识分享网这里做简单的思路介绍，后续会在相关模块的文章中详细介绍
标尺插件-vue-sketch-ruler
拖拽组件-vue-draggable-resizable（这里对拖拽组件进行了二次封装）
画布模块主要用到标尺以及拖拽

graph LR
添加组件 --> component动态渲染组件 --> 对焦标尺line --> 传入自定义表单对象

组件模块

组件模块也就是添加组件到画布的功能以及一些撤回、恢复、预览功能
撤回恢复这边用的是栈的概念保存操作记录的形式实现

graph LR
选择组件 --> 添加到画布对象中 --> 渲染到画布

图层组件

图层组件主要功能：渲染画布上的组件以及对画布上的组件拥有层级调整和删除的功能（通过右键菜单）
这里用到vuedraggable插件实现图层拖动组合以及鼠标右击菜单组件

graph LR
显示组件图层 --> 改写鼠标右键菜单 --> 调整层级 --> 影响画布组件的层级

配置模块

low-code的核心就在于配置模块和画布模块，配置模块也是相对于最复杂的模块
配置模块主要功能：
 - 画布背景配置(自定义表单组件)
 - 组件表单配置(自定义表单组件)
 - 操作配置 (配置静态数据以及接口动态数据)
 - 事件模块 (配置图表组件的点击事件、提示事件、以及自定义数值处理)
 - 交互模块 (这里初步实现选项卡与图表组件之间的联动，用于关联接口的请求参数)

自定义表单对象

由于表单配置对象在这一个模块是重点，下面贴出表单配置对象结构
(由于整个对象都是通过主容器的画布对象暴露出来的，这里通过共用指针实现表单改动，画布视图更新)

//自定义表单对象参考
export const border1 = { //组件容器实例对象
  name: { //图层名称
    label: '图层名称',
    type: 'input',
    value: '边框1'
  },
  hide: { //显示隐藏
    label: '隐藏',
    type: 'switch',
    value: false
  },
  width: {
    label: '宽度',
    type: 'slider',
    value: 400,
    max: 1920
  },
  height: {
    label: '高度',
    type: 'slider',
    value: 300,
    max: 1080
  },

自定义编辑器

编辑器的实现思路:右侧提供不同数据模板
左侧提供自定义逻辑编写，保存后以字符串的形式经过一系列处理成函数形式挂载于组件配置对象上
这里通过new Function代替eval(从vue源码中得到的灵感)实现字符串转js
编辑器插件用到vscode前身 monaco-editor

this.monacoEditor
  .getValue()
  .replaceAll(/(?:^|\n|\r)\s*//.*(?:\r|\n|$)/g, '')
  .replaceAll(/[\r\n]/g, '')
  .replace(/(data)[\s]=>[\s]{(.*)}/g, function(val, ...arr) {
    that.contain.coverage[that.contain.coverageIndex].apiModule.dispose = null;
    that.contain.coverage[that.contain.coverageIndex].apiModule.disposeEditorValue = that.monacoEditor.getValue();
    that.contain.coverage[that.contain.coverageIndex].apiModule.dispose = data => {
      //eslint-disable-line
      const obj = new Function('data', arr[0].replaceAll('return', ';return'))(data);
      return obj;
    };
    that.$emit('close');
  });

画布背景配置

实现思路：以配置对象形式通过表单对背景大小颜色以及图片进行修改

组件表单配置

实现思路大体上和画布背景一样，依赖于指针以及表单自定义组件

操作配置

操作配置我分为两个小模块：
- 静态数据(主要是提供数据模板，自定义静态数据数值)
- 动态数据(提供请求配置以及参数模板以及自定义回调数据处理函数)
这个模块主要依赖于编辑器组件

静态数据

动态数据

事件模块

事件模块依赖于编辑器组件，主要实现的功能是图表组件的点击自定义回调事件处理、提示语自定义、
数值自定义等(详细到对应模块的文章中详细解析)

交互模块

交互模块：由于时间原因交互模块目前只实现（选项卡以及下拉框）
实现思路：通过绑定图层的形式（首先图层需要配置动态数据）以及绑定对应请求参数
监听选项卡或下拉框值的变化去请求绑定图层所对应的接口以及修改某个参数的值

小结

这篇文章主要是对整个low-code做一个简单介绍以及思路讲解，如果大家感兴趣请点赞与评论，我将会更新以模块的形式分篇更新，大家感兴趣哪个模块可以在评论下告诉我，我根据大家的意愿优先更新对应模块，创作编码不易，给个赞吧~~~