低代码交互设计

低代码交互

选中舞台物料后，右侧的交互面板实现方式

三层设计

自底向上分为三种方式，简单的灵活性会差一点，复杂度灵活的极高可以实现任一要求

• Schema的方式
• 自定义渲染，配合一些钩子代码
• 自定义组件，耦合业务 完整的生命周期组件

Schema方式

根据数据类型渲染交互，默认每种数据类型会对应一种原子的交互类型

interface Schema <T extends Schema = Schema >{
    type: 'number' | 'boolean' | 'object' | 'array' | 'string';
    items?: T; // array item
    properties: { // object properties
       [property: string]: T
    } 
}

但往往有时候数据类型可能对应不同的交互，或者一种交互其实可以编辑多种数据类型，比如

• boolean 可以用Radio或者Switch来编辑
• Select可以编辑string或者number类型的数据，并且Select需要额外的补充数据Options

故需要衍生出一套支持交互定义

interface ComponentSchema extends Schema<ComponentSchema> {
    component?: Component;
}

interface Component {
    tag: 'Select' | 'Radio' | 'Input' | 'InputNumber' | 'ColorPicker';
    props: {
        label?: string;
        placeholder?: string;
        options?: Array<{ value: label }>;
        ...
    } 
}

自定义渲染

上述以Schema为核心的定义，有些需求比较难覆盖，比如特定的样式显示，条件显示控制，还有些子节点精细化的操作，联立的一些操作。

自定义界面用低代码的编辑方式自由编辑界面形式去排版交互界面。

且自定义界面以RenderComponent为核心暴露出一些钩子，比如渲染前，内容改变时，用于一些自定义的逻辑编排。

例子：

• Select的Options选项变化动态影响Select的子节点
• Table的column变化影响Table的子元素

interface RenderComponentHookOptions {
    node: ComponentNode;
    tree: ComponentTree;
    value: any;
    update: (id, key, value) => void;
}

type RenderComponentHook = () => void;

interface RenderComponent extends Component {
     hooks: {
         beforeRender: RenderComponentHook;
         onChange: RenderComponentHook;
     }，
     children: RenderComponent[];
}

自定义组件

自定义渲染本质不是一个真实的组件，没有自己的变量等，其所处的执行上下文其实和编辑器是同一层次的，很多业务性的操作最好还是封装在业务组件内部，所以需要的是一个有业务执行上下文的正式组件。

自定义组件本质就是低代码编辑产生的一个Vue组件只是它的交互组件的UI和上述两种保持一致。

该组件在交互渲染时被动态加载，并赋予业务执行的能力，和编辑交互的能力

例子：

• 商品列表的组件交互需要在分类列表中选择一个分类

interface VueComponent {
     props: {
         editor: Editor, // 通过editor与编辑器交互
         ...
     },
     render: (h, data, children) => vnode;
     data: () => any;
     created: () => void;
     ....
}