@riil-frontend/component-page-config 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;