brick-core
- brick-core能做什么？
❝
brick-core对外暴露了Designer、Render 两个主要的模块，使调用者通过最简单的调用实现低代码的编辑/展示，从而快速实现/集成页面。
❞
- brick-core依赖什么样的数据驱动？
❝
brick-core目前依赖两个数据 JsonSchema 和 DataSource，前者是对拽入组件的描述(组件类型、大小、定位、样式、props等)，后者是对静态/动态数据的描述(运行时会依此去修改FormData供组件消费)。
❞
功能大览
「tip: 下文中我们把brick-core缩写为core」
1 快捷操作区
1.1 组件中心
「Now」
功能点：
- 图例支持拖拽到Designer中生成schemaNode
组件实现逻辑写在core，但是组件的schema相关配置是在低代码平台登记配置的，加载流程如下：
「以环形进度图RingProgress为例」
// core内部代码:
const RingProgress = ({props}) => {
const percent = props.percent > 1 ? props.percent / 100 : props.percent;
return <AntRingProgress percent={percent} {...props.options} />;
};
// 与右侧属性配置栏动态映射
RingProgress.attrSetting = [ 'percent', 'options' ];
// 接口返回的组件数据：SchemaNode
{
iconValue: 'ringPie', // icon图标,
name: '环形进度图', // 组件中文名
schema: {
component: 'Img', //组件标识
props: {
containerProps: {}, // 包裹组件的容器属性
elementProps: {
percent: 0.7,
options: "{}"
}, // 内容会被处理传递给上面的props
},
children: JsonSchema[], // 子元素描述
}
}
通过setComponent最后会生成结构如下的对象保存到全局Components对象中
interface ComponentType = {
/** 本地组件 */
Element: React.FC<any>;
/** 组件的属性映射设置 */
AttrSetting: string[];
/** 组件的图标 */
Icon: React.FC<any>;
/** 组件的schemaNode */
Schema: SchemaNode;
};
「Todo」
后期会把本地组件也提到远程，定制好组件的规范后，统一开发组件库然后打包上传到远程cdn(如www.brick-components/version/nam…
1.2 大纲树
「Now」
功能点：
- 节点表示JsonSchema中的对应的节点，以及对应的嵌套
- 单击节点后，编辑面板中也会选中对应的schema节点(高频)
- 拖拽节点可以调整节点间的嵌套关系，并映射到Designer/Render
// src/design/components/OutlinePanel
{treeData.map((item: TreeItem, index: number) => (
<TreeNode
index={index}
key={item.key}
node={item}
onDrop={onDrop}
onSelect={onSelect}
selectedKeys={designContext.choosed ? [designContext.choosed] : []}
/>
))
}
1.3 历史记录
「Now」
功能点：
- 默认初始缺省态
- 每条记录对应一份Jsonschema，目前最多缓存20条记录
- currentIndex记录当前的指针位置
- 点击对应历史可回切换其对应的Jsonschema，同时更新右侧视图
「Todo」
问题1: 目前属性配置的修改会高频的产生历史记录，后期会考虑针对属性变化加入防抖/节流等优化
问题2: 历史记录模块会和 2.2 历史进退模块产生通信，考虑到历史记录频繁更新，放在顶层管理会造成其他组件的更新，目前的做法是将历史记录放在历史进退组件中，UseEffect监听全局JsonSchema引用地址的改变，动态push到历史数组，通过eventBus(EventEmitter实现)通知记录模块更新数据(不太优雅，后续重构想办法优化)
1.4 静态资源
「Now」
功能点：
- 便于用户使用/管理静态资源，提供上传和上传列表(备份在localStorage)
- 上传资源会先获取OSS配置然后拼接调用返回的host && key
- 上传成功后会将name、url、time等信息保存
- 每条数据可以执行复制url 和 删除
「Todo」
是否需要限制类型/大小？ 是否需要支持断点续传？
2 视图区
2.1 历史进退
「Now」
功能点：
- 执行回退操作
- 执行反撤销操作
2.2 视图模式
「Now」
功能点：
- 提供web布局
- 提供mobile布局
- 提供自定义响应式布局
2.3 数据源管理
「Now」
功能点：
- 可由顶部DataSource配置渲染，编辑可修改配置
- 提供数据列表和编辑窗口（添加或配置静态、动态数据）
- 提供StaticsLoader和DynamicLoader加载数据
流程图如下:
「Todo」
静态数据接收？复用？配置式和组件式的对比？
2.4 编辑面板
「Now」
功能点：
- 负责接收从组件中心拖拽过来的图例
- 遍历生成、展示Schema节点
- 选中节点后高亮节点信息，可删除节点
- 拖拽改变节点位置信息
「Todo」
优化点： (核心组件，目前需要优化的地方很多)
「1、提供组件复制功能」
「2、嵌套优化(哪些组件接收嵌套、如何交互)」
「3、使用绝对定位 和 相对定位的情况」
「4、适配方案」
「5、层级设置 图层概念」
「6、丰富基础组件、复合组件」
「7、辅助工具 （对齐线、网格线等）」
「8、配置class复用样式」
「......」
2.5 JSON面板
「Now」
功能点：
- 支持JsonSchema的编辑
- 支持JsonSchema以树形式展示
「Todo」
编辑组件添加防抖/节流
2.6 展示面板
「Now」
同编辑面板，区别是不能编辑，只能展示组件
「Todo」
1、定义Design和Render的边界问题，如Design中的wrapper是否添加pointer-events: none来禁止操作组件
2、适配支持
3 属性区
3.1 属性配置
「Now」
功能点：
- 编辑组件属性
- 编辑组件样式
- 编辑容器样式
流程图如下:
组件属性结构定义
enum InputType {
Input, // 单行输入框
TextArea, // 多行输入框
NumberInput, // 数字输入框
Enum, // 枚举
Mix, // 动态输入类型
Switch, // 开关
Expression, // 代码片段
}
enum ValueType {
Number, // 数字
Text, // 文本
Boolean, // 布尔值
Expression, // 表达式
}
interface AttributeItem {
id: number;
symbol: string;
name: string;
valueType: ValueType;
description: string;
defaultValue: string;
inputType: InputType;
inputSetting: string;
}
「Todo」
1、组件属性管理 过滤优化？
2、展示、输入组件优化
3、防抖/截流优化
