@xliez/cyber-builder

CyberBuilder

页面搭建模块

该组件提供一个基础的 UI 框架和组件注入的方式，用户可以按照约定编写展示组件和编辑组件，传入该组件中后由该组件来控制编辑的配置数据、展示、整体导出

使用方式

import React, { useRef } from 'react';
import { CyberBuilder, CyberImage, CyberGoodsList } from '@xliez/cyber-builder';
import { IComponentSaver } from './types';

export default () => {
  /**
   * 提供自定义组件的名称、描述、包含展示组件和编辑组件的对象
   * 编辑组件的对象约定以 { View, Edit } 的形式传入
   */
  const componentsMap: Record<string, IComponentSaver> = {
    CyberImage: {
      componentName: 'CyberImage',
      description: '图片',
      components: CyberImage,
    },
    CyberGoodsList: {
      componentName: 'CyberGoodsList',
      description: '商品列表',
      components: CyberGoodsList,
    },
  };

  const ref = useRef();

  const onConfirm = () => {
    console.log('ref', ref.current.getComponentsList());
  };

  return <CyberBuilder componentsMap={componentsMap} ref={ref} />;
};

1. 提供自定义组件的名称、描述、包含展示组件和编辑组件的对象
2. 编辑组件需要将最终编辑保存的数据通过传入的 onSubmit 属性抛出
3. 展示组件可以使用编辑组件中的配置数据进行渲染
4. 可用通过 ref 中抛出的方法获取&设置组件的数据

内部逻辑和字段约定

该组件内部会有一个全局状态：

{
    // 存储传入的自定义组件
    componentsMap: {} as Record<string, IComponentSaver>,
    // 存储当前画布页面中被添加的自定义组件
    componentsList: [] as IComponent[],
    // 当前选中编辑中的自定义组件
    currentTarget: {} as Partial<IComponent>,
}

功能

• [x] 提供基础的 Layout
• [x] 外部传入组件的展示、编辑、保存、回填
• [ ] 编辑组件表单的配置化方案
• [ ] 预设的组件