@riil-frontend/component-page-creater

page creater components,include components list,component attribute panel and page canvas

Usage no npm install needed!

<script type="module">
  import riilFrontendComponentPageCreater from 'https://cdn.skypack.dev/@riil-frontend/component-page-creater';
</script>

README

UICBB 可配置页面生成器套件

page-creater

可以通过组件列表,属性面板以及画布组件,实现通过拖拽的方式,产生一套页面配置数据。并通过此页面配置数据,呈现组件化页面的一组套件。

开发一个可用的业务组件,需按业务组件接口定义开发

[TOC]

API

数据结构定义:templateConfig 一个 uicbb 模板配置文件的属性

参数名 说明 必填 类型 默认值 备注
pageId 页面 id string
pageName 名称 string
configs 页面的集合 pageConfig[]

数据结构定义:pageConfig 一个 uicbb 页面配置文件的属性

参数名 说明 必填 类型 默认值 备注
pageId 页面 id string
pageName 名称 string
widgets 组件配置集合 widget[]
layoutConfig 布局配置 object {cols: number; //默认栅格为 24 格
rowHeight: number; //高度比为 4 倍
margin: [x: number, y: number]; //默认间隔
measureBeforeMount: boolean; //如果为 true,画布将在装入组件之前测量容器宽度。
isFitHeight:boolean//是否一屏显示页面内组件。true 时会按屏幕的高度,按 widgets 中高度比例,适配各个组件的高度;false 时,会严格按照 widgets 中配置的高度显示组件}

数据结构定义:widget 页面文件中一个组件的配置文件属性

参数名 说明 必填 类型 默认值 备注
layouts 组件布局信息 ReactGridLayout.Layout
id 组件实例化后的 id,等于 config.layouts.lg.i。此值无需设置,在创建组件实例时会自动赋值 string
title 组件列表上组件的悬浮信息 string
icon 组件列表若有图标,icon 表示此图标(需求待定,预留属性) string
type 组件的类型,若是 npm 发布组件,则填写为 npm 分组/后部分 string exp:@riil-uicbb/component-template,则 type 为 component-template
importFrom 组件来源 npm/local 'npm' 'local'
isOnlyOne 画布上唯一的组件,即一个画布上只能拖拽上一个这样的组件 boolean false
attributes 属性面板对应属性,此属性对应 AttrPanel 内实现的各种数值编辑组件 object
comContainerAttributes 属性面板组件容器公共属性 object {paddingLeft: 8,paddingTop: 8,paddingRight: 8,paddingBottom: 8}
userConfig 用户浏览时记录数据 object
dependentProps 组件所依赖的属性,key 为属性值,info 为缺少依赖时组件显示的文案。依赖属性由 pageProps 传入组件。 依赖性验证由生成器完成,组件无需关注 { key: string; info: string }[]
publishProps 组件对外提供的属性,通过 setPageState,将属性发布到生成器公共属性状态中,作为公共依赖使用。生成器会在组件拖拽创建后,自动将此属性以及默认值发布到公共状态中。 { key: string; defaultValue: string }[]

数据结构定义:comListItem 组件列表数据子项

参数名 说明 必填 类型 默认值 备注
key 分组 key 必填 string
title 名称 必填 string 显示为折叠面板名称
iconInfo 分组说明 {icon:string,tooltip:string} 显示为折叠面板名称后的 icon 悬浮提示 {icon:图标 type,tooltip:图标悬浮内容文案}
children 组件集合 {type:string,name:string,importFrom:'local'|'npm',config:object}|{type:'template',name:string,template:object}[] 描述组件或模板。组件数据结构为:{type:组件类型,name:组件名称,importFrom:引用方式,config:组件配置} 。模板数据结构:{type:'template',name:组件名称,template:整页布局模板数据}

业务组件接口定义:ComponentBase 实现一个 uicbb 业务组件,可使用以下接口来进行业务开发,交互通信。

注意:uicbb 组件必须在代码根目录创建 index.js,index.scss 作为组件程序入口,否则无法被画布引用。且组件所依赖的其他包,应为 npm 包或组件内部类

参数名 说明 必填 类型 默认值 备注
isEdit 是否是编辑模式 boolean
jumpto (path,isTabSelf)=>void 页面跳转操作,若 isTabSelf 为 true,则跳转为内部页签跳转到 url 对应的组件所在页签中 (path: string,isTabSelf:boolean) => void
pageProps 父页面公共属性 object
widgetsProps 父页面存储的分组属性 object
setPageState 添加或修改父页面公共属性(pageProps),可用来实现组件间数据联动 (state: object) => {}
removePageState 删除页面属性(容器组件需要) (keys)=>void
setWidgetsState 添加或修改父页面分组属性 (state: object) => {}
config 组件配置数据 widget
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any
onConfigChange 组件内部可调用此方法修改组件配置数据 (config: widget,callback:function,isUpdateService:boolean) => void
toggleFullScreen 切换当前组件全屏状态,返回 true/false 全屏/正常 () => boolean
getFullScreenState 获取当前组件是否全屏状态,返回 true/false 全屏/正常,可在初始化时调用 () => boolean
getComRequire 获取组件句柄类 (comName,importFrom,customGetComRequire)=>React.ComponentClass
customGetComRequire 自定义获取组件方法
getBaseAttributes 获取组件基础属性配置
onSelect 当前业务组件选中回调,容器组件使用此属性 (id)=>void
selectedId 当前画布选中的组件,容器组件使用此属性 string
allWidgets 同级所有组件的集合,容器组件使用此属性 widget[]
onAllWidgetsChangeByCom 容器组件间,其内部业务组件互相拖拽,引发业务组件迁移时,调用此方法 (allWidgets:[]widget, callback:()=>void, isUpdateService = true)=>void
dragPanelIsDroppable 容器组件使用此属性,用来判断父是否允许拖入 boolean

业务组件接口定义: ComponentBase.AttrPanel

参数名 说明 必填 类型 默认值 备注
pageProps 页面属性 any
config 所选组件配置 widget
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any
attributes 属性值 any
onChange 表单项变更回调 (values) => void
ref.field 组件应是可被调用 ref 的组件,且组件应具备对外公开的 field 属性({Field} from '@alifd/next')。使得表单校验可被框架统一调用。 必填 {Field} from '@alifd/next'

业务组件接口定义: ComponentBase.getSchema :({ pageProps, config, request }: SchemaProps) => ISchema;使用 Schema 方式生成属性面板 getSchema /AttrPanel 二选一

参数名 说明 必填 类型 默认值 备注
pageProps 页面属性 any
config 所选组件配置 widget
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any

业务组件接口定义: ComponentBase.validate:(attributes:object) => boolean;组件属性面板数据统一校验规则

参数名 说明 必填 类型 默认值 备注
attributes 组件属性 object

业务组件接口定义: ComponentBase.CustomScCom?:object schema 自定义表单组件传递,在使用 schema 时,若有自定组件,则使用此参数 exp:{custom1:Custom1,custom2:Custom2}

业务组件接口定义: ComponentBase.config :见数据结构定义widget 组件出场配置信息,定义组件的基础信息

DragLayoutCanvas 页面生成器- 核心画布组件

参数名 类型 说明 必填 默认值 备注
layoutProps object ResponsiveReactGridLayout 组件属性
selectedId string 当前选中项 id
onSelect (id: String) => void; 子组件选中回调(id)=>void
isEdit boolean 是否是编辑模式
onChange (pageConfig: pageConfig,callback:func,isUpdateService:boolean) => void (pageConfig,callback,isUpdateService)=>void 切换布局,增加组件,删除组件回调,将组件配置数据传出
pageProps object 页面顶级参数,例如业务详情页面的业务 appId 将放在此属性中,供组件以及页面使用
request any 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice'
jumpto (path:string,isTabSelf:boolean) => void (path,isTabSelf)=>void 页面跳转操作
pageConfig pageConfig pageConfig
parentDOM HTMLElement 画布外层 dom 对象,用来实现自动适配高度的功能
customGetComRequire (comName: string, importFrom: string) => React.ComponentClass; 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class -
ExpCom React.ComponentClass 在开发 npm 包组件时需用到此属性。或自定义引用包,子组件整体二次封装时刻使用 -

ComList 页面生成器-组件列表,可实现从组件列表拖拽到画布,添加组件的编辑模式功能

此组件为非公组件,后期会根据编辑功能需求的产出后,做重构或废弃

参数名 说明 必填 类型 默认值 备注
comList 组件列表数据 exp:[{key:'workbench',title:'工作台',iconinfo:{icon:'atm',tooltip:'xxxx'},children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help',config:{组件配置数据}}] }], comListItem[] 特定布局类型 { type: 'template', name: '布局 1', template:{布局配置数据}},此类型描述一整个布局页面
onItemDragStart 当组件图标拖拽开始时回调,config 为拖拽组件的配置数据,e 为鼠标 event (config: widget, e: MouseEvent) => void;
onItemClick 当组件图标点击时回调,非功设计,暂不启用,config 为点击组件的配置数据,e 为鼠标 event (config: widget, e: MouseEvent) => void;
collapseProps 透传折叠面板属性 object

**(1.2.0 弃用)**AttrPanel 页面生成器-属性面板

此组件为非公组件,后期会根据编辑功能需求的产出后,做重构或废弃

参数名 说明 必填 类型 默认值 备注
pageConfig 画布的配置数据 pageConfig
selectId 当前选中组件 id string
onChange (pageConfig)=>void 属性面板发生改变时的回调 (pageConfig: pageConfig) => void;
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any
pageProps 页面顶级参数,例如业务详情页面的业务 appId 将放在此属性中,供组件以及页面使用 object

**(1.2.0 新增)**AttributesPanel 页面生成器-属性面板

参数名 说明 必填 类型 默认值 备注
templateData 模板数据 必填 templateConfig
pageConfig 画布的配置数据 必填 pageConfig
selectId 当前选中组件 id string
onChange (pageConfig)=>void 属性面板发生改变时的回调 (pageConfig: pageConfig) => void;
ExpCom React.ComponentClass;
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any
pageProps 页面顶级参数,例如业务详情页面的业务 appId 将放在此属性中,供组件以及页面使用 object
attrConfig 属性面板配置数据 attrConfigItem[]; attrConfigItem = {name?: string;key?: string;render?: (selectItem?: widget, pageConfig?: pageConfig, templateData?: object) => ReactNode;}
onTemplateChange 模板数据发生变更时回调 (templateData: templateConfig) => void;
noDataImgSrc 无数据组件图片 string
imgPath 布局选择组件依赖的图片路径 string
layoutList 布局分类数据 layoutListItem[]; layoutListItem = {label?: string;key?: 'single' / 'vertical' / 'horizontal';img?: string;}
tabProps 透传 tab 组件属性 object
customGetComRequire 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class (comName: string, importFrom: string) => React.ComponentClass;

**(1.2.0 弃用)**PageCreaterProps 页面生成器套件 由 AttrPanel ,ComList ,DragLayoutCanvas 三个组件组合使用的一个创建页面配置数据的,可拖拽的组件。

后期会根据编辑功能需求的产出后,做重构或废弃

参数名 说明 必填 类型 默认值 备注
comList 组件列表数组,组件包名的域部分 comListItem[] exp:@riil-uicbb/component-page-creater ->[{key:'workbench',title:'工作台',children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}] }]
pageProps 页面级公共参数部分,会透传给画布子组件 pageProps object
pageConfig 页面生成器配置数据 pageConfig
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice' any
layoutProps ResponsiveReactGridLayout 组件属性 object
jumpto (path,isTabSelf)=>void 页面跳转操作 (path:string,isTabSelf:boolean) => void;
onChange 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调(pageConfig)=>void (pageConfig: pageConfig) => void

Editor 页面生成器-编辑器套件

参数名 说明 必填 类型 默认值 备注
comList 组件列表数据 exp:[{key:'workbench',title:'工作台',children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}] }], 必填 comListItem[] -
pageProps 透传给 DragLayoutCanvas 的公共属性 必填 object -
request 应用框架级数据请求方法,用来实现数据请求,参考 {request} from 'ice'
appPageConfig 页面配置数据 templateConfig
layoutProps ResponsiveReactGridLayout 组件属性 object
jumpto (path,isTabSelf)=>void 页面跳转操作 (path:string,isTabSelf:boolean) => void;
onChange 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调 (templateConfig: templateConfig) => void;
attributeProps {attrConfig:属性面板分页签数据,可自定义扩展,自定义扩展数据中的 render 为属性面板自定义实例;layoutList 切换分页布局属性,目前支持一下三种分页布局方式; noDataImgSrc 无数据组件图标路径;imgPath 布局属性组件图片路径;tabProps 透传 tab 页签属性} object
comListProps 组件列表属性{collapseProps - 折叠面板组件属性透传} object
customGetComRequire 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class (comName: string, importFrom: string) => React.ComponentClass;

HorizontalEditor 左页签编辑画布,SingleEditor 无页签编辑画布,VerticalEditor 上页签编辑画布 具体实现方式,请参考 Editor 组件源码

参数名 说明 必填 类型 默认值 备注
onTabChange 页签修改,删除,新增回调 SingleEditor 无此属性 (params: {tabSelectedIndex?: string / number;currentPageConfig: pageConfig;selected?: string / number;}) => void; -
tabSelectedIndex 页签当前值 SingleEditor 无此属性 string/number -
appPageConfig 页面模板数据 templateConfig
onClickBlank 点击画布空白处回调 () => void
selected 当前选中组件索引 string/number
droppingItem 拖拽体 any
isDroppable 是否可以拖拽释放 boolean
isEdit 编辑模式 boolean
onChange 当前画布变化回调 (pageConfig: pageConfig) => void
onWidgetSelect 组件选中回调 (id: string) => void;
pageProps 页面属性透传 object
jumpto 跳转功能透传 (path:string,isTabSelf:boolean) => void;
onClose 删除某个组件回调 (index?: number) => void;
request web 请求体透传 any
addNewTab 新增一个页签回调(新页签,由外部实现) SingleEditor 无此属性 () => void;
layoutProps 画布布局属性透传 object
customGetComRequire 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class (comName: string, importFrom: string) => React.ComponentClass;

HorizontalLayoutView 左页签浏览模式画布,SingleLayoutView 无签浏览模式画布,VerticalLayoutView 上页签浏览模式画布

参数名 说明 必填 类型 默认值 备注
setSelectId 设置当前模板选中页 id 回调 不填写此属性,则页面切换由内部实现 (selectId?: string / number) => void; -
appPageConfig 模板数据 必填 templateConfig -
selectId 当前模板显示页面 id 不填写此属性,则页面切换由内部实现 string/number
pageProps 页面参数 object
onChange 页面配置触发回调 (pageConfig?: pageConfig, callback?: () => void) => void;
request web 请求体透传 any
jumpto 跳转功能透传 (path:string,isTabSelf:boolean) => void;
customGetComRequire 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class (comName: string, importFrom: string) => React.ComponentClass;

getComRequire(comType,importFrom) 动态获取组件实例的公共方法

参数名 说明 必填 类型 默认值 备注
comType 组件唯一表示类型 必填 string -
importFrom 组件发布类型 必填 "local"/"npm" -

dispatchResizeEvent(time) 触发浏览器 resize 事件

参数名 说明 必填 类型 默认值 备注
time 延迟触发时间,毫秒 string 1000

CHANGE LOG

  • 1.1.1 fix bug 解决当滚动条处于下方时,组件全屏会超出屏幕的问题
  • 1.1.0 新增组件全屏功能 组件属性增加 toggleFullScreen(切换) getFullScreenState(获取状态) 两个方法
  • 1.0.3 更新核心依赖包 react-grid-layout 版本到 1.2.5
  • 1.0.2 fix bug 1 页面生成器编辑模式,解决需要点击两次才能选中问题 2 页面生成器修改移动组件位置,保存不生效的 bug 3 修改样式
  • 1.0.1 样式调整
  • 1.2.0 新增编辑器套件,浏览模式套件
  • 1.2.3 demo 在公网上可正常显示图片;修改组件依赖为 dev 依赖
  • 1.2.5 修改一些属性缺省报错的问题
  • 1.2.6 更新组件列表 d.ts;组件列表无 name 值时,使用 config.attributes.comName 显示
  • 1.2.8 解决 tab 浏览模式组件 VerticalLayoutView 无法自适应高度的问题
  • 1.2.9 解决全屏模式下,全局浮层被遮挡问题
  • 1.2.11 tab 页签使用 jumpto 方法,实现内部跳转到指定组件所在页签功能,jumpto 方法增加第二个参数 isTabSelf。若传入第二个参数为 true,则第一个参数应被设置为目标组件的 type,用来实现当前页面页签跳转功能
  • 1.2.12 tab 浏览模式,tab 页签样式右边距调整为 16px
  • 2.0.1 新页面生成器第一版
  • 2.0.2 修复浏览模式也可以拖拽组件的 bug;修复组件列表上边线样式
  • 2.0.3 修复页面名称校验必填,drag-panel 默认参数,整体校验组件支持容器组件
  • 2.0.4 组件属性面板无数据升级
  • 2.0.5 修复容器内组件被拖拽到全局的问题和部分样式调整
  • 2.0.6 formily 自定义组件折叠面板,修复 title 悬浮问题
  • 2.0.7 formily 自定义组件折叠面板,修复样式问题
  • 2.0.8 修复从组件列表拖拽容器时,响应慢,报错的问题;修复背景网格缺少边框的问题
  • 2.0.9 修复组件选择切换时,导致属性面板报错的问题
  • 2.0.10 组件列表修改 icon 样式以及主题包更新
  • 2.0.11 网格背景改为直接在画布上绘制背景;编辑器 dom 嵌套结构去掉中间多余层;组件列表宽度调整适配出滚动条时也是 3 列布局
  • 2.0.12 优化网格背景函数,产生的 style 样式不影响页面其他样式布局
  • 2.0.13 画布滚动条优化,不再常驻一个纵向的滚动条了;容器内组件删除按钮样式修改,行为改为 hover 时显示;
  • 2.0.14 解决组件选择切换时,fomily 报错问题;getSchma 方法增加 tryCatch,避免页面卡死;布局容器属性面板校验,去掉自定义提示样式;
  • 2.0.15 解决组件选择切换时,fomily 引发报错问题,formily 实例增加 key 值。组件列表提示信息从右边弹出
  • 2.0.16 当画布为空时,拖拽布局进入画布时,不出提示信息。
  • 2.0.17 保存校验方法 checkAll,返回值增加 hasBusinessCom,描述页面里是否包含业务组件。
  • 2.0.18 优化组件属性列表,若选中组件发生变化,才重新获取 schma 数据,否则只更新状态。
  • 2.0.19 优化样式,解决组件列表出现滚动条时,滚动条无法被拖拽的样式问题
  • 2.0.20 属性面板修改重绘依赖属性,仅依赖当前项 id 的变化,修改属性面板回调,仅对 attributes 值进行修改