如何改变低代码平台物料状态？浅谈属性模块拆解

在低代码平台的开发过程中，属性列表是非常重要的一部分，它直接决定了开发人员能够使用哪些组件和功能。然而，基础低代码平台属性列表却存在一些限制，不能够支持复杂的功能，这对于开发人员来说非常不便。因此，开发团队进行了一轮功能扩展，对属性列表进行了优化，让开发人员能够更加方便地使用各种功能，以属性配置较为复杂的Echart图表组件为例，界面如下：

其部分属性配置代码如下：

getPropType({
  name: '', names: ['x', 'y'], title: '位置', appType: [AppType.canvas],
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.numbers,
  attrs: {
    options: [ { label: 'x', prop: 'x' }, { label: 'y', prop: 'y' } ]
  },
}),
getPropType({
  name: '', names: ['width', 'height'], title: '尺寸', appType: [AppType.canvas],
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.numbers,
  attrs: {
    options: [ { label: '宽', prop: 'width' }, { label: '高', prop: 'height' } ]
  },
}),
getPropType({
  name: 'height', title: '高度', appType: [AppType.questionnaire],
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.int,
}),
getPropType({
  name: '', names: ['margin', 'padding'], title: '边距', default: [[0,0,0,0], [0,0,0,0]],
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.box,
}),
getPropType({
  name: 'visible', title: '是否显示', default: true,
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.boolean,
  remark: '是否在界面上显示。'
}),
getPropType({
  name: 'color', title: '颜色表', default: [
    { color: 'rgba(93, 114, 194, 1)' },
    { color: 'rgba(165, 200, 125, 1)' },
  ],
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.modelList, attrs: {
    rowKey: 'color',
    columns: [
      { name: 'color', title: '颜色', editor: ComponentPropertyEditor.color, attrs: { } },
    ]
  }
}),
getPropType({
  name: ['title', 'show'], title: '标题', default: false,
  group: ComponentPropertyGroup.style, editor: ComponentPropertyEditor.boolean,
  children: [
    {
      name: ['title', 'text'], title: '标题', default: '图表标题',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'link'], title: '标题链接',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'subtext'], title: '子标题', default: '',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'sublink'], title: '子标题链接',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'left'], title: '左侧距离', default: 'center',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'right'], title: '右侧距离', default: 'auto',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'top'], title: '顶部距离', default: 'top',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'bottom'], title: '底部距离', default: 'auto',
      editor: ComponentPropertyEditor.singerLine,
    }, {
      name: ['title', 'textAlign'], title: '水平对齐', default: 'auto',
      editor: ComponentPropertyEditor.dropdownList,
      attrs: {
        options: [
          { label: '自动', value: 'auto' },
          { label: '左对齐', value: 'left' },
          { label: '居中对齐', value: 'center' },
          { label: '右对齐', value: 'right' },
        ]
      }
    }, {
      name: ['title', 'textStyle'], title: '标题字体', editor: ComponentPropertyEditor.none,
      children: [
        {
          name: ['title', 'textStyle', 'color'], title: '字体颜色', default: '#666666', visible: true,
          editor: ComponentPropertyEditor.color,
        }, {
          name: ['title', 'textStyle', 'fontSize'], title: '字体大小', default: '12px', visible: true,
          editor: ComponentPropertyEditor.width,
        }
      ]
    }
  ]
}),

以上为图表编辑器的一部分，如果要单纯的去作为项目功能实现其实并不复杂。但如果是要考虑到整个低代码平台，则又要额外考虑很多定制化功能及边界情况，实现难度就会直线提升。

为什么要开发各式各样的编辑器？

从基础需求来说，在低代码平台新增的物料当然需要修改物料的属性配置。

从最简单的文本框/下拉框/数字框，到复杂一些的富文本框/多选列表/文件选择器，再到功能定制化的边距编辑器/调色盘/公式编辑器等等，无非是用于提升用户的编辑体验，降低用户编辑时的心智成本。（PS：当然用户不介意的话也可以考虑让用户全程手搓JSON 🤣 ）

编辑器功能

除了普通的直接修改属性功能，作为低代码平台，还需要完成以下功能：

实现编辑器默认值，当物料组件的属性没有指定默认值时就可以从编辑器默认值中取。
实现额外编辑器属性，例如允许填写数字，同时允许调用接口返回数据。
实现编辑器显隐，通过固定值或get访问器/函数的方式动态控制显隐。
实现常规事件钩子，例如 onChange事件等。
实现多个属性的修改，例如尺寸编辑器，同时修改 width及 height属性。
实现多层级属性的修改，例如修改 obj.config.timer.isOpen。
实现远程api调用。
自定义工具栏。
其他...

已实现编辑器展示

目前小白快搭一共支持近30种属性编辑器，并且在不断扩展中，其中部分效果如下：

标签

/ 无编辑功能

单行文本框

多行文本框

文本列表

富文本框

数字框（整数/浮点数）

数字列表框

滑块

长度

开关

边距

代码

颜色

调色盘 / 背景

组件选取

数据编辑器

下拉列表

时长编辑器

文件选择器

对象列表

单选框列表

文本规则校验

标签组

变量选择器

公式

条件编辑器

除了以上编辑器，另外 字体编辑器、角度编辑器、停靠编辑器、阴影编辑器等等编辑器也正在开发计划中。

现在，让我们来实现一个简单的编辑器

实现一个简单的编辑器分为 组件部分及 配置部分，编辑器只需完成基础编辑功能，剩余功能及交互由平台完成。

组件部分的示例代码如下（使用vue3开发）：

<template>
  <div v-if="props.readonly" class="text-editor-preview editor-preview">
    {{ state.inputValue }}
  </div>
  <Input
    v-else
    class="text-editor"
    :class="{ disabled: props.disabled }"
    :disabled="props.disabled"
    :placeholder="props.placeholder"
    v-model:value="state.inputValue"
    @change="onInput"
  >
    <template v-if="props.suffix" #addonAfter>
      <span>{{ props.suffix }}</span>
    </template>
  </Input>
</template>

<script lang="ts" setup>
import { throttle } from '@/tools/common';
import { Input } from 'ant-design-vue';
import { onMounted, reactive, watch } from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  readonly: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '',
  },
  /** 是否开启节流事件 */
  openThrottle: {
    type: Boolean,
    default: true
  },
  suffix: {
    type: String,
  }
});

const emit = defineEmits<{
  (event: 'change', val: string): void;
}>();

const state = reactive({
  inputValue: '',
});

watch(() => props.value, (val, oldVal) => {
  state.inputValue = val;
});

/** 值改变事件 */
const onInput = props.openThrottle ? throttle(changeValue) : changeValue;

onMounted(() => {
  state.inputValue = props.value;
});
</script>

配置部分的示例如下：

{
  // 编辑器名称
  name: 'single-line',
  // 编辑器描述
  description: '单行文本',
  // 对应组件名称
  component: 'text-editor',
  // 默认配置参数
  attrs: {
    style: { width: '100%' },
    allowClear: false,
    size: 'small',
  },
  // 对应编辑器枚举
  editor: ComponentPropertyEditor.singerLine,
}

在我们完成编辑器的开发后，在组件中使用的示例如下：

getComponentPropType({
  // 属性名
  name: 'placeholder',
  // 属性标题
  title: '占位提示文本',
  // 属性分组
  group: ComponentPropertyGroup.style,
  // 默认值
  default: '请输入',
  // 对应编辑器
  editor: ComponentPropertyEditor.singerLine,
  // 副编辑器列表
  attach: [ ComponentPropertyEditor.variable ],
}),

从chatgpt的大火，就预示着未来交互方式的改变，现在已经有平台实现通过一句自然语言来改变应用配置项，通过准确的描述甚至是一句话来让低代码平台自动生成表单/问卷/管理界面，我相信现有的大部分低代码平台都属于过渡期，最终会转为自然语言识别与大数据的方式。

除了以上已经集成的效果，我们还在不断地开发和完善其他功能模块，包括表单设计器、报表设计器、流程设计器等，以便更好地满足客户的需求。同时我们也在不断优化用户体验和界面设计，保证平台的易用性和美观性。

我们也希望能与业内的大佬进行交流和合作，共同学习及探讨低代码平台的发展趋势和未来的发展方向。如果您对我们的低代码平台有兴趣，欢迎一起讨论交流。

小白快搭（低代码）讨论交流群