@riil-frontend/component-page-creater NPM

UICBB 可配置页面生成器套件

page-creater

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

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

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; //默认间隔 `<br>`measureBeforeMount: boolean; //如果为 true，画布将在装入组件之前测量容器宽度。`<br>`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 }[]

<span id="comListItem">

数据结构定义：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 :(: 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:

* 业务组件接口定义: ComponentBase.stopChangeOnValidateError?:boolean true/false，标记为 true 的组件，其属性面板若未通过表单校验，则阻止其 onChange 事件，不将修改数据传入画布。若为 false，则即时表单校验失败，依然会将修改数据传入画布

* 业务组件接口定义: 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 包组件时需用到此属性。或自定义引用包，子组件整体二次封装时刻使用	-
hideComList	array	隐藏组件列表，数组内填组件 type	-	[]

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 值进行修改
2.0.21 优化组件删除后，属性面板依然存在的问题；优化容器组件选中交互为 mousedown,拖拽组件到容器后，立即选中组件
2.0.22 优化二次确认提示信息使用叹号图标
2.0.23 优化二次确认提示信息使用文案
2.0.24 优化当业务组件不存在时，不阻断其他组件显示；将容器组件内置到包内，不从外部依赖.
2.0.25 优化属性面板折叠面板样式
2.0.26 修正属性面板 request 属性无值问题
2.0.27 优化属性面板折叠面板样式
2.0.28 当业务组件被拖拽到画布上时，立即选中该组件并显示组件的属性面板
2.0.29 组件增加定义属性 stopChangeOnValidateError true/false，标记为 true 的组件，其属性面板若未通过表单校验，则阻止其 onChange 事件，不将修改数据传入画布。若为 false，则即时表单校验失败，依然会将修改数据传入画布
2.0.30 属性面板-自定义折叠面板组件样式修改，去掉右侧 padding
2.0.31 属性面板样式调整
2.0.32 增加属性 hideComList，实现隐藏 hideComList 内成列的组件
2.0.33 d.ts 代码补全文件增加新属性
2.0.34 组件列表更新 RiilIcon
2.0.35 更新皮肤库
2.0.36 优化编辑模式，画布下留白，方便添加新组件