可视化搭建编辑器【2】--侧边栏与配置面板 #

在线地址

前面已经实现了主要布局，接下来我们需要实现每块布局的功能和交互。首先我们来规划和实现自定义节点，可视化搭建有很多节点，我们需要分类以及做好计划先实现一些常见的组件节点。

节点分类 #

• 基础
  • 时间（当前时间显示、每秒更新）
• 媒体
  • 单行文本
  • 多行文本
  • 图片
  • 视频（这个可以放到后面实现，优先级不高）
• 表单
  • 按钮
  • 下拉选择
  • 输入框
• 图表（比如Echarts）
  • 柱状图
  • 折线图
  • 圆环（先实现一两种）
• 业务
  • 任意一个业务模块也可以封装成自定义组件，当做拖拽搭建的物料，配置好样式、数据和交互即可

按照配型分组在侧边栏展示，后续如果节点越来越多需要在顶部添加一个搜索框，除了文本之外可以展示一下该自定义节点的预览图片，这样对用户更加直观一些。

先试用占位符替代这些节点，后续逐渐实现，效果如下：

也支持节点名称关键字搜索：

配置面板 #

节点和画布可以在右侧配置相关数据，选中节点时展示节点的相关配置面板，点击画布中的空白处可以配置画布：

我们参照Xflow的画布参数配置表单：

修改相关配置：

目前只做一些核心关键配置，并没有把所有的参数配置化，比如背景图、水印等等，后期可以慢慢完善配置项。

说到配置项，组件库使用的是antd，全局都是配置主题色，可以在这个主题编辑器网站编辑然后直接使用，也可做成表单允许用户导出导入。

到这里侧边栏节点目录已经设计开发完成，画布的配置也走通，接下来就是节点选中配置节点的相关表单。

在做之前先设计好节点的数据结构以及配置面板的交互布局：

节点数据结构 #

参考了Xflow的Node数据结构，我设计自定义节点初始化时候的数据结构是这样的：

export type CustomNodeType = {
  shape: string; // 类型字符串，每个类型定义一个字符串
  id?: string; // 画布中节点ID唯一
  name: string; // 节点原始名称
  alias: string; // 别名，用户可以自定义
  size: {
    width: number;
    height: number;
  };
  position?: {
    x: number;
    y: number;
  };
  visible?: boolean; // 显示隐藏
  tools: Array[any]; // 辅助工具
  previewPic?: string; // 预览图片,先预留字段

  component?: any; // 自定义组件
  CustomSetting?: any; //组件配置

  basicConfig?: any; // 基础配置
  styleConfig?: any; // 样式配置
  eventConfig?: any; // 事件联动列表
  dataSourceConfig?: any; // 数据源或接口配置
  dataParams?: any; // 节点业务数据或者拓展参数
};

我准备给每个节点配置按照模块来预留字段，分别是：基础配置、样式配置、事件联动列表、数据源或接口配置、以及节点业务数据或者拓展参数；

在交互上，配置面板分为三个小模块就好了，用户配置起来更清晰，其中基础配置和样式配置都在基础面板里配置，三个tab如下图所示：

自定义节点的实现和配置内容比较多，放在下期介绍，敬请期待~