npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@riil-frontend/component-page-config

v2.0.5

Published

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

Downloads

9

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]; //默认间隔 <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.0.0