一种用户界面配置方法、装置及存储介质与流程
未命名
10-26
阅读:77
评论:0
1.本发明涉及用户界面开发领域,尤其涉及一种用户界面配置方法、装置及存储介质。
背景技术:
2.随着企业统一管理意识的增强,对于企业的ui(user interface,用户界面)主题也有着统一的ui主题规范,为了适应企业发展需求,ui主题规范会不断迭代更新。在ui主题规范迭代更新后,企业的各个项目组开发的时候,每个项目ui主题也需要适应企业最新的ui主题规范。
3.在相关技术中,各个项目组的ui主题由单个项目组的程序员维护,即手动编写最新ui主题规范的代码且发布到npm(node package manager,node包管理器)私库,供该项目组使用,在此过程中,各个项目组开发的时候,都需要不断对每个项目进行最新ui主题规范的代码编写,完成ui主题维护以适应企业最新ui主题规范,对各个项目开发造成了大量的冗余工作。
技术实现要素:
4.为了对披露的实施例的一些方面有基本的理解,下面给出了简单的概括。所述概括不是泛泛评述,也不是要确定关键/重要组成元素或描绘这些实施例的保护范围,而是作为后面的详细说明的序言。
5.鉴于以上所述现有技术的缺点,本发明公开了一种用户界面配置方法、装置及存储介质,以在企业ui主题规范迭代更新时,减少企业各个项目组对项目ui主题进行配置的冗余工作。
6.本发明提供了一种用户界面配置方法,包括:创建用户界面主题,并将所述用户界面主题所对应的主题信息存储于数据库中,所述主题信息包括主题名称、主题描述、安装包名称与版本信息,其中,所述安装包为npm包;根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,所述npm私库存储有多个历史安装包;解析所述历史安装包提取第一字符串,并根据所述第一字符串对所述用户界面主题进行渲染,生成当前主题界面,其中,字符串为json字符串;基于预设主题规范对所述当前主题界面进行配置,获得当前主题版本,并将所述当前主题版本及对应的当前版本号存储于所述数据库的版本信息;提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库。
7.可选地,根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,包括:将所述npm私库与所述数据库进行连接,以使数据互通;根据所述主题名称与所述主题描述从所述数据库中确定出历史主题版本,其中,每个主题版本具有一一对应的版本号;基于所述历史主题版本从所述数据库中查询并获得对应的历史版本号,其中,每个版本号一一对应有一个安装包;基于所述历史版本号对所述npm私库进行匹配,
获得与所述历史版本号对应的所述历史安装包。
8.可选地,基于预设主题规范对所述当前主题界面进行配置,包括:获取所述预设主题规范中的第一主题配置参数,并根据所述第一主题配置参数在主题配置界面中对所述当前主题界面进行配置,生成新的所述主题配置界面并进行预览,所述第一主题配置参数包括第一颜色参数、第一尺寸参数与第一风格参数中至少一种;或将外部用户界面库接入所述主题配置界面,基于所述预设主题规范在所述外部用户界面库中选择外部主题;将所述外部主题所对应的主题内容编码写入所述主题配置界面的编码区域,加载所述主题内容编码获得第二主题配置参数以对所述当前主题界面进行配置,生成新的所述主题配置界面并进行预览,所述第二主题配置参数包括第二颜色参数、第二尺寸参数与第二风格参数中至少一种。
9.可选地,基于预设主题规范对所述当前主题界面进行配置,还包括:对新的主题配置界面所呈现的颜色、尺寸、风格进行评估,分别获得颜色评估分数、尺寸评估分数与风格评估分数;分别将所述颜色评估分数、所述尺寸评估分数与所述风格评估分数与各自对应的第一预评估分数阈值进行一次比较,根据第一比较结果对颜色参数、尺寸参数与风格参数中的至少一种配置参数进行调整,获得第三主题配置参数;根据所述第三主题配置参数对所述当前主题界面进行一次优化配置,并对一次优化配置后所对应的主题配置界面所呈现的整体效果进行评估,获得整体效果评估分数;将所述整体效果评估分数与第二评估分数阈值进行二次比较,并根据二次比较结果对所述颜色参数、所述尺寸参数与所述风格参数中至少一种配置参数进行调整,获得第四主题配置参数;根据所述第四主题配置参数对所述当前主题界面进行二次优化配置,直至所述整体效果评估分数达到所述第二评估分数阈值,完成所述当前主题界面的配置。
10.可选地,提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库,包括:接收到目标用户的发布请求后,基于所述发布请求中携带的所述当前版本号从所述数据库中获取所述当前主题版本;对所述当前主题版本进行读取,获得所述第二字符串,并将所述第二字符串进行编译封装成成新安装包并存储于所述npm私库;响应于所述发布请求进行所述主题名称的写入,并将所述新安装包在所述npm私库中进行发布。
11.可选地,在创建用户界面主题之前,还包括:接收到所述目标用户的登录请求后,获取所述登录请求中携带的第一用户信息;基于目标用户信息库对所述第一用户信息进行审核,确定所述目标用户是否有权限,所述目标用户信息库中存储有各目标用户的用户信息;若确定所述目标用户没有权限,则显示登录npm私库失败;若确定所述目标用户有权限,则显示登录npm私库成功,进入主题创建界面。
12.可选地,将所述第二字符串进行编译封装成新安装包发布到所述npm私库之后,还包括:获取所述目标用户的第二用户信息,并基于所述目标人员信息库对所述第二用户信息进行审核;当审核结果为通过时,通过获取所述目标用户录入的调用请求,所述调用请求中均携带有所述安装包名称;基于所述安装包名称在所述npm私库中查找获得所述新安装包,并响应于所述调用请求对所述当前安装包进行调用。
13.可选地,在所述数据库中,对于同一主题名称对应有主版本与次版本,其中,未进行修改编辑的版本为主版本,进行修改编辑后的版本为次版本,所述次版本中的各历史主
题版本按照更新时间进行版本号排序,所述方法还包括:在所述当前主题界面渲染中出现渲染异常时,在所述npm库中匹配出最新版本号对应的最新历史安装包;解析所述最新历史安装包提取第三字符串,并根据所述第三字符串进行渲染异常排查。
14.本发明提供了一种用户界面配置装置,包括:创建模块,用于创建用户界面主题,并将所述用户界面主题所对应的主题信息存储于数据库中,所述主题信息包括主题名称、主题描述、安装包名称与版本信息,其中,所述安装包为npm包;获取模块,用于根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,所述npm私库存储有多个历史安装包;生成模块,用于解析所述历史安装包提取第一字符串,并根据所述第一字符串对所述用户界面主题进行渲染,生成当前主题界面,其中,字符串为json字符串;配置模块,用于基于预设主题规范对所述当前主题界面进行配置,获得当前主题版本,并将所述当前主题版本及对应的当前版本号存储于所述数据库的版本信息;发布模块,用于提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库。
15.本发明提供了一种计算机读取介质,其上存储有计算机程序,所述计算机程序用于使计算机执行上述的方法。
16.本发明的有益效果:
17.首先通过创建用户界面主题并将用户界面主题所对应主题名称、主题描述、安装包名称与版本信息的存储于数据库中,然后根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包进行解析提取第一字符串并根据第一字符串对用户界面主题进行渲染,以生成当前主题界面,再基于预设主题规范对当前主题界面进行配置,以获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息,最后提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库,将ui主题配置由程序员手动编写最新ui主题规范的代码且发布到npm私库的操作搬到了线上,通过用户操作即可在程序中执行相关命令配置主题内容且发布到npm私库,将程序员依照ui主题规范修改项目ui主题的工作全交由ui处理,在需要使用最新主题版本时,直接在npm私库中进行调用,便于各项目组的ui主题维护以适应企业最新ui主题规范,减少了各项目开发的冗余工作。
附图说明
18.图1是本发明实施例中一个用户界面配置方法的流程示意图;
19.图2是本发明实施例中一个主题创建界面的示意图;
20.图3是本发明实施例中一个主题配置界面的示意图;
21.图4是本发明实施例中一个获取历史安装包的流程示意图;
22.图5是本发明实施例中一个当前主题界面的配置示意图;
23.图6是本发明实施例中另一个当前主题界面的配置示意图;
24.图7是本发明实施例中一个配置当前主题界面的流程示意图;
25.图8是本发明实施例中一个发布当前主题版本的流程示意图;
26.图9是本发明实施例中一个当前主题版本发布界面的示意图;
27.图10是本发明实施例中一个用户界面配置装置的结构示意图;
28.图11是本发明实施例中一个电子设备的示意图。
具体实施方式
29.以下通过特定的具体实例说明本发明的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用,本说明书中的各项细节也可以基于不同观点与应用,在没有背离本发明的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,以下实施例及实施例中的子样本可以相互组合。
30.需要说明的是,以下实施例中所提供的图示仅以示意方式说明本发明的基本构想,遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制,其实际实施时各组件的型态、数量及比例可为一种随意的改变,且其组件布局型态也可能更为复杂。
31.在下文描述中,探讨了大量细节,以提供对本发明实施例的更透彻的解释,然而,对本领域技术人员来说,可以在没有这些具体细节的情况下实施本发明的实施例是显而易见的,在其他实施例中,以方框图的形式而不是以细节的形式来示出公知的结构和设备,以避免使本发明的实施例难以理解。
32.本公开实施例的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开实施例的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含。
33.除非另有说明,术语“多个”表示两个或两个以上。
34.本公开实施例中,字符“/”表示前后对象是一种“或”的关系。例如,a/b表示:a或b。
35.术语“和/或”是一种描述对象的关联关系,表示可以存在三种关系。例如,a和/或b,表示:a或b,或,a和b这三种关系。
36.随着企业统一管理意识的增强,对于企业的ui主题也有着统一的ui主题规范,为了适应企业发展需求,ui主题规范会不断迭代更新。在ui主题规范迭代更新后,企业的各个项目组开发的时候,每个项目ui主题也需要适应企业最新的ui主题规范。其中,各个项目组的ui主题由单个项目组的程序员维护,即手动编写最新ui主题规范的代码且发布到npm私库,供该项目组使用,各项目组开发的时候,都需要不断对每个项目进行最新ui主题规范的代码编写,完成ui主题维护以适应企业最新ui主题规范,无疑对各个项目开发造成了大量的冗余工作。
37.需要说明的是,npm是一种管理工具,通过npm可以完成npm包的安装、共享、分发代码以及管理依赖关系的操作,各个过程完全自动化处理,因此,npm为开发人员带来了一定的方便。
38.结合图1所示,本公开实施例提供了一种用户界面配置方法,包括:
39.步骤s101,创建用户界面主题,并将用户界面主题所对应的主题信息存储于数据库中。
40.其中,主题信息是创建用户界面主题所编辑的基础信息,包括主题名称、主题描述、安装包名称与版本信息,其中,安装包为npm包,请参见图2,图2是本发明实施例中一个
主题创建界面的示意图,如图2所示,主题信息包括主题名称、描述、安装包名称与版本信息,该版本信息即为该主题名称所对应的各主题版本以及对应的版本号,称为草稿版本,可以切换到任一版本,基于该版本编辑新的主题。需要说明的是,主题信息中还包括更新时间,是指该主题版本配置好后存储于数据库中的时间,各个草稿版本按照更新时间排序存储,获得按序排列的版本号。另外,在主题创建界面中还有编辑主题按钮和发布按钮,用户进行点击操作,则可以进行主题编辑或主题发布。
41.步骤s102,根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包。
42.其中,npm私库中存储有多个历史安装包,即每次修改编辑的版本所对应的安装包,而同一主题名称以及主题描述对应有多个历史主题版本,即对应对个历史安装包,而该实施例中获取的历史安装包为最新的历史安装包。
43.步骤s103,解析历史安装包提取第一字符串,并根据第一字符串对用户界面主题进行渲染,生成当前主题界面。
44.其中,字符串为json字符串,简洁和清晰的层次结构易于阅读和编写,也易于机器解析和生成,能够有效提升数据传输效率。请参见图3,图3是本发明实施例中一个主题配置界面的示意图,如图3所示,右侧则为当前主题界面的预览效果。
45.步骤s104,基于预设主题规范对当前主题界面进行配置,获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息。
46.请继续参见图3,如图3左侧所示,可以根据预设主题规范对当前主题界面进行颜色、尺寸、风格等配置。
47.步骤s105,提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库。
48.采用本公开实施例提供的用户界面配置方法,首先通过创建用户界面主题并将用户界面主题所对应主题名称、主题描述、安装包名称与版本信息的存储于数据库中,然后根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包进行解析提取第一字符串并根据第一字符串对用户界面主题进行渲染,以生成当前主题界面,再基于预设主题规范对当前主题界面进行配置,以获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息,最后提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库,将ui主题配置由程序员手动编写最新ui主题规范的代码且发布到npm私库的操作搬到了线上,通过用户操作即可在程序中执行相关命令配置主题内容且发布到npm私库,将程序员依照ui主题规范修改项目ui主题的工作全交由ui处理,在需要使用最新主题版本时,直接在npm私库中进行调用,便于各项目组的ui主题维护以适企业最新ui主题规范,减少了各项目开发的冗余工作。
49.可选地,请参见图4,图4是本发明实施例中一个获取历史安装包的流程示意图。如图4所示,根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包至少包括步骤s401至步骤s404,如下:步骤s401,将npm私库与数据库进行连接,以使数据互通;步骤s402,根据主题名称与主题描述从数据库中确定出历史主题版本,其中,每个主题版本具有一一对应的版本号;步骤s403,基于历史主题版本从数据库中查询并获得对应的历史版本号,其中,每个版本号一一对应有一个安装包;步骤s404,基于历史版本号对npm私
库进行匹配,获得与历史版本号对应的历史安装包。
50.可选地,基于预设主题规范对当前主题界面进行配置,包括:获取预设主题规范中的第一主题配置参数,并根据第一主题配置参数在主题配置界面中对当前主题界面进行配置,生成新的主题配置界面并进行预览,第一主题配置参数包括第一颜色参数、第一尺寸参数与第一风格参数中至少一种;或将外部用户界面库接入主题配置界面,基于预设主题规范在外部用户界面库中选择外部主题;将外部主题所对应的主题内容编码写入主题配置界面的编码区域,加载主题内容编码获得第二主题配置参数以对当前主题界面进行配置,生成新的主题配置界面并进行预览,第二主题配置参数包括第二颜色参数、第二尺寸参数与第二风格参数中至少一种。
51.在该实施例中,对当前主题界面的配置包括根据预设主题规范在主题配置界面进行配置和根据预设主题规范选择外部主题在主题配置界面进行配置,配置当前主题界面时根据两种方式中的任一种进行配置即可。请参见图5,图5是本发明实施例中一个当前主题界面的配置示意图,如图5左侧所示,对当前主题界面的配置包括但不限于颜色、尺寸、风格的配置,通过获取预设主题规范中的第一主题配置参数,即包括第一颜色参数、第一尺寸参数与第一风格参数中至少一种,并根据第一主题配置参数在主题配置界面中对当前主题界面进行配置,生成新的主题配置界面并可以在如图5所示右侧区域进行预览。
52.需要说明的是,请继续参见图5,在主题配置界面的右下角具有json按钮和保存按钮,若当前主题界面配置完毕,即可点击保存按钮进行当前主题版本的保存。若是根据预设主题规范选择外部主题在主题配置界面进行配置,即点击json按钮选择外部主题,请参见图6,图6是本发明实施例中另一个当前主题界面的配置示意图,如图6所示,在点击json按钮后,主题配置界面弹出主题内容编码的弹窗,将外部主题的内容编码复制到text的文本区域中,即可使用外部主题,该使用依赖的操作逻辑为根据外部用户界面库提供的方法,以antd(阿里的ui库)主题注入方式为例,在文件中使用:《configprovider theme={themeconfig}》,加载主题内容编码获得第二主题配置参数,即第二颜色参数、第二尺寸参数与第二风格参数中至少一种,以对当前主题界面进行配置,生成新的主题配置界面并进行预览。
53.可选地,请参见图7,图7是本发明实施例中一个配置当前主题界面的流程示意图。如图7所示,基于预设主题规范对当前主题界面进行配置至少包括步骤s701至步骤s705,如下:步骤s701,对新的主题配置界面所呈现的颜色、尺寸、风格进行评估,分别获得颜色评估分数、尺寸评估分数与风格评估分数;步骤s702,分别将颜色评估分数、尺寸评估分数与风格评估分数与各自对应的第一预评估分数阈值进行一次比较,根据第一比较结果对颜色参数、尺寸参数与风格参数中的至少一种配置参数进行调整,获得第三主题配置参数;步骤s703,根据第三主题配置参数对当前主题界面进行一次优化配置,并对一次优化配置后所对应的主题配置界面所呈现的整体效果进行评估,获得整体效果评估分数;步骤s704,将整体效果评估分数与第二评估分数阈值进行二次比较,并根据二次比较结果对颜色参数、尺寸参数与风格参数中至少一种配置参数进行调整,获得第四主题配置参数;步骤s705,根据第四主题配置参数对当前主题界面进行二次优化配置,直至整体效果评估分数达到第二评估分数阈值,完成当前主题界面的配置。
54.在该实施例中,通过对当前主题界面进行两次优化配置,一次是对当前主题的颜
色、尺寸、风格等分别进行优化,一次是对颜色、尺寸、风格等进行整体优化,保证当前主题界面获得较佳的视觉效果。
55.例如,请继续参见图5,如图5左侧,是对当前主题界面的颜色进行配置,包括品牌主色、主色浅色背景色、主色描边色等,可以单击左侧菜单的色块,弹窗出现取色框,用以修改颜色,右侧渲染的组件集会随之变化。通常品牌主色可以影响大部分样式的色彩,另外还有成功色、警戒色、错误色、信息色、中性色等主色,可以根据需要进行配置,未配置的内容,自动配置为默认色。需要说明的是,颜色参数包括但不限于用于生成当前主题界面的背景色以及用于配置当前主题界面中的字体颜色、按钮颜色与图标颜色,对颜色参数进行调整包括结合背景色、主题颜色、按钮颜色与图标颜色等的配色效果,对颜色参数中不同色彩的色调、明度与饱和度参数中至少一种进行调整。而对于界面的尺寸和风格配置,也是根据具体需求进行配置。
56.可选地,请参见图8,图8是本发明实施例中一个发布当前主题版本的流程示意图,如图8所示,提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库至少包括步骤s801至步骤s803,如下:步骤s801,接收到目标用户的发布请求后,基于发布请求中携带的当前版本号从数据库中获取当前主题版本;步骤s802,对当前主题版本进行读取,获得第二字符串,并将第二字符串进行编译封装成成新安装包并存储于npm私库;步骤s803,响应于发布请求进行安装包名称的写入,并将新安装包在npm私库中进行发布。
57.在该实施例中,请继续参见图5,在完成当前主题界面的配置后,目标用户点击右下角的保存按钮,即跳转到主题创建页面,然后点击主题创建页面中的发布按钮,将当前主题版本发布到npm私库中。请参见图9,图9是本发明实施例中一个当前主题版本发布界面的示意图,如图9所示,目标用户点击发布按钮后,便接收到目标用户的发布请求,该发布请求中携带有当前版本号,根据当前版本号从数据库中获取当前主题版本并对当前主题版本进行读取获得第二字符串,然后将第二字符串进行编译封装成成新安装包存储于npm私库中,并且,在发布界面上具有当前主题版本发布前的npm私库中最新版本的版本号说明以及当前主题版本发布后的版本号说明,最后响应于发布请求进行主题名称的写入,点击确定按钮,将新安装包在npm私库中进行发布。应当理解的是,新安装包并不会对历史安装包进行覆盖保存,是按照版本号按序存储。
58.可选地,在创建用户界面主题之前,还包括:接收到目标用户的登录请求后,获取登录请求中携带的第一用户信息;基于目标用户信息库对第一用户信息进行审核,确定目标用户是否有权限,目标用户信息库中存储有各目标用户的用户信息;若确定目标用户没有权限,则显示登录npm私库失败;若确定目标用户有权限,则显示登录npm私库成功,进入主题创建界面。
59.需要说明的是,企业ui主题界面的配置需要对目标用户进行身份验证,目标用户通过账号方式进行登录并发出登录请求,该实施例并不限制目标用户的登录方式,接收到目标用户的登录请求后,获取登录请求中携带的第一用户信息,基于目标用户信息库中存储的用户信息对该第一用户信息进行审核,确定目标用户具有登录权限后,显示登录npm私库成功,则进入主题创建界面,一般企业内部的目标用户都具有权限,防止外部人员登录,保证企业ui主题的规范管理。
60.可选地,将第二字符串进行编译封装成新安装包发布到npm私库之后,还包括:获取目标用户的第二用户信息,并基于目标人员信息库对第二用户信息进行审核;当审核结果为通过时,通过获取目标用户录入的调用请求,调用请求中携带有安装包名称;基于安装包名称在npm私库中查找获得新安装包,并响应于调用请求对当前安装包进行调用。
61.需要说明的是,npm私库中的新安装包,可以供企业内部的目标用户调用,但在调用的时候,也需要进行身份验证,只有当身份审核成功时,目标人员才能进行新安装包的调用。避免外部人员随意调用,对于新安装包的调用包括但不限于下载、引入等,下载新安装包的操作逻辑为输入npminstall“@gplus-packages/theme-geega”,引入安装包的操作逻辑为输入import themeconfig from"@gplus-packages/theme-geega"。
62.可选地,在数据库中,对于同一主题名称对应有主版本与次版本,其中,未进行修改编辑的版本为主版本,进行修改编辑后的版本为次版本,次版本中的各历史主题版本按照更新时间进行版本号排序,方法还包括:在当前主题界面渲染中出现渲染异常时,在npm库中匹配出最新版本号对应的最新历史安装包;解析最新历史安装包提取第三字符串,并根据第三字符串进行渲染异常排查。
63.需要说明的是,主版本对应有主版本号,当进行不兼容的api更改时,即需要增加主版本号(x),次版本对应有次版本号,当添加向后兼容的功能时,增加次版本号(y),当进行向后兼容的错误修复时,增加修订号(z),上述当前主题版本的版本号即为x.y.z,请继续参见图9,在主题创建界面进行当前版本发布时,发布界面对应有相应的说明。
64.在该实施例中,继续参见图2,次版本中的各历史主题版本,即草稿版本,按照更新时间进行版本号排序,如图2中版本号所示。在当前主题界面渲染中出现渲染异常时,在npm库中匹配出最新版本号对应的最新历史安装包,解析最新历史安装包提取第三字符串,并根据第三字符串进行渲染异常排查,对渲染异常进行修复处理,以继续完成当前主题版本的配置。
65.采用本公开实施例提供的用户界面配置方法,首先通过创建用户界面主题并将用户界面主题所对应主题名称、主题描述、安装包名称与版本信息的存储于数据库中,然后根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包进行解析提取第一字符串并根据第一字符串对用户界面主题进行渲染,以生成当前主题界面,再基于预设主题规范对当前主题界面进行配置,以获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息,最后提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库,具有以下优点:
66.第一、将ui主题配置由程序员手动编写最新ui主题规范的代码且发布到npm私库的操作搬到了线上,通过用户操作即可在程序中执行相关命令配置主题内容且发布到npm私库,企业的目标人员都可以完成用户界面的配置以及在npm私库中进行发布;
67.第二、将程序员依照ui主题规范修改项目ui主题的工作全交由ui处理,在需要使用最新主题版本时,目标用户可以直接在npm私库中进行调用,便于各项目组的ui主题维护以适应企业最新ui主题规范,减少了各项目开发的冗余工作。
68.结合图10所示,本公开实施例提供了一种用户界面配置装置,至少包括创建模块1001、获取模块1002、生成模块1003、配置模块1004和发布模块1005。创建模块1001用于创建用户界面主题,并将用户界面主题所对应的主题信息存储于数据库中,主题信息包括主
题名称、主题描述、安装包名称与版本信息,其中,安装包为npm包;获取模块1002用于根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,npm私库存储有多个历史安装包;生成模块1003用于解析历史安装包提取第一字符串,并根据第一字符串对用户界面主题进行渲染,生成当前主题界面,其中,字符串为json字符串;配置模块1004用于基于预设主题规范对当前主题界面进行配置,获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息;发布模块1005用于提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库。
69.采用本公开实施例提供的用户界面配置装置,首先通过创建用户界面主题并将用户界面主题所对应主题名称、主题描述、安装包名称与版本信息的存储于数据库中,然后根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包进行解析提取第一字符串并根据第一字符串对用户界面主题进行渲染,以生成当前主题界面,再基于预设主题规范对当前主题界面进行配置,以获得当前主题版本,并将当前主题版本及对应的当前版本号存储于数据库的版本信息,最后提取当前主题版本所对应的第二字符串,将第二字符串进行编译封装成新安装包发布到npm私库,将ui主题配置由程序员手动编写最新ui主题规范的代码且发布到npm私库的操作搬到了线上,通过用户操作即可在程序中执行相关命令配置主题内容且发布到npm私库,将程序员依照ui主题规范修改项目ui主题的工作全交由ui处理,在需要使用最新主题版本时,直接在npm私库中进行调用,便于各项目组的ui主题维护以适企业最新ui主题规范,减少了各项目开发的冗余工作。
70.图11示出了适于用来实现本技术实施例的电子设备的计算机系统的结构示意图。需要说明的是,图11示出的电子设备的计算机系统1100仅是一个示例,不应对本技术实施例的功能和使用范围带来任何限制。
71.如图11所示,计算机系统1100包括中央处理单元(central processing unit,cpu)1101,其可以根据存储在只读存储器(read-only memory,rom)1102中的程序或者从储存部分11011加载到随机访问存储器(random access memory,ram)1103中的程序而执行各种适当的动作和处理,例如执行上述实施例中的方法。在ram 1103中,还存储有系统操作所需的各种程序和数据。cpu 1101、rom 1102以及ram 1103通过总线1104彼此相连。输入/输出(input/output,i/o)接口1105也连接至总线1104。
72.以下部件连接至i/o接口1105:包括键盘、鼠标等的输入部分1106;包括诸如阴极射线管(cathode ray tube,crt)、液晶显示器(liquid crystal display,lcd)等以及扬声器等的输出部分1107;包括硬盘等的储存部分1108;以及包括诸如lan(local area network,局域网)卡、调制解调器等的网络接口卡的通信部分1109。通信部分1109经由诸如因特网的网络执行通信处理。驱动器1110也根据需要连接至i/o接口1105。可拆卸介质1111,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器1110上,以便于从其上读出的计算机程序根据需要被安装入储存部分1108。
73.特别地,根据本技术的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本技术的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的计算机程序。在这样的实施例中,该计算机程序可以通过通信部分1109从网络上被下载和安装,和/或从可拆卸介质1111被安装。在该计算机程序被中央处理单元(cpu)1101执行时,执行本技术的系统中限
(the)旨在同样包括复数形式。类似地,如在本技术中所使用的术语“和/或”是指包含一个或一个以上相关联的列出的任何以及所有可能的组合。另外,当用于本技术中时,术语“包括”(comprise)及其变型“包括”(comprises)和/或包括(comprising)等指陈述的子样本、整体、步骤、操作、元素,和/或组件的存在,但不排除一个或一个以上其它子样本、整体、步骤、操作、元素、组件和/或这些的分组的存在或添加。在没有更多限制的情况下,由语句“包括一个
…”
限定的要素,并不排除在包括要素的过程、方法或者设备中还存在另外的相同要素。本文中,每个实施例重点说明的可以是与其他实施例的不同之处,各个实施例之间相同相似部分可以互相参见。对于实施例公开的方法、产品等而言,如果其与实施例公开的方法部分相对应,那么相关之处可以参见方法部分的描述。
81.本领域技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,可以取决于技术方案的特定应用和设计约束条件。技术人员可以对每个特定的应用来使用不同方法以实现所描述的功能,但是这种实现不应认为超出本公开实施例的范围。技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
82.本文所披露的实施例中,所揭露的方法、产品(包括但不限于装置、设备等),可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,单元的划分,可以仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些子样本可以忽略,或不执行。另外,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例。另外,在本公开实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
83.附图中的流程图和框图显示了根据本公开实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这可以依所涉及的功能而定。在附图中的流程图和框图所对应的描述中,不同的方框所对应的操作或步骤也可以以不同于描述中所披露的顺序发生,有时不同的操作或步骤之间不存在特定的顺序。例如,两个连续的操作或步骤实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这可以依所涉及的功能而定。框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
技术特征:
1.一种用户界面主题配置方法,其特征在于,所述方法包括:创建用户界面主题,并将所述用户界面主题所对应的主题信息存储于数据库中,所述主题信息包括主题名称、主题描述、安装包名称与版本信息,其中,所述安装包为npm包;根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,所述npm私库存储有多个历史安装包;解析所述历史安装包提取第一字符串,并根据所述第一字符串对所述用户界面主题进行渲染,生成当前主题界面,其中,字符串为json字符串;基于预设主题规范对所述当前主题界面进行配置,获得当前主题版本,并将所述当前主题版本及对应的当前版本号存储于所述数据库的版本信息;提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库。2.根据权利要求1所述的方法,其特征在于,根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,包括:将所述npm私库与所述数据库进行连接,以使数据互通;根据所述主题名称与所述主题描述从所述数据库中确定出历史主题版本,其中,每个主题版本具有一一对应的版本号;基于所述历史主题版本从所述数据库中查询并获得对应的历史版本号,其中,每个版本号一一对应有一个安装包;基于所述历史版本号对所述npm私库进行匹配,获得与所述历史版本号对应的所述历史安装包。3.根据权利要求2所述的方法,其特征在于,基于预设主题规范对所述当前主题界面进行配置,包括:获取所述预设主题规范中的第一主题配置参数,并根据所述第一主题配置参数在主题配置界面中对所述当前主题界面进行配置,生成新的所述主题配置界面并进行预览,所述第一主题配置参数包括第一颜色参数、第一尺寸参数与第一风格参数中至少一种;或将外部用户界面库接入所述主题配置界面,基于所述预设主题规范在所述外部用户界面库中选择外部主题;将所述外部主题所对应的主题内容编码写入所述主题配置界面的编码区域,加载所述主题内容编码获得第二主题配置参数以对所述当前主题界面进行配置,生成新的所述主题配置界面并进行预览,所述第二主题配置参数包括第二颜色参数、第二尺寸参数与第二风格参数中至少一种。4.根据权利要求3所述的方法,其特征在于,基于预设主题规范对所述当前主题界面进行配置,还包括:对新的主题配置界面所呈现的颜色、尺寸、风格进行评估,分别获得颜色评估分数、尺寸评估分数与风格评估分数;分别将所述颜色评估分数、所述尺寸评估分数与所述风格评估分数与各自对应的第一预评估分数阈值进行一次比较,根据第一比较结果对颜色参数、尺寸参数与风格参数中的至少一种配置参数进行调整,获得第三主题配置参数;根据所述第三主题配置参数对所述当前主题界面进行一次优化配置,并对一次优化配
置后所对应的主题配置界面所呈现的整体效果进行评估,获得整体效果评估分数;将所述整体效果评估分数与第二评估分数阈值进行二次比较,并根据二次比较结果对所述颜色参数、所述尺寸参数与所述风格参数中至少一种配置参数进行调整,获得第四主题配置参数;根据所述第四主题配置参数对所述当前主题界面进行二次优化配置,直至所述整体效果评估分数达到所述第二评估分数阈值,完成所述当前主题界面的配置。5.根据权利要求1所述的方法,其特征在于,提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库,包括:接收到目标用户的发布请求后,基于所述发布请求中携带的所述当前版本号从所述数据库中获取所述当前主题版本;对所述当前主题版本进行读取,获得所述第二字符串,并将所述第二字符串进行编译封装成成新安装包并存储于所述npm私库;响应于所述发布请求进行所述主题名称的写入,并将所述新安装包在所述npm私库中进行发布。6.根据权利要求5所述的方法,其特征在于,在创建用户界面主题之前,还包括:接收到所述目标用户的登录请求后,获取所述登录请求中携带的第一用户信息;基于目标用户信息库对所述第一用户信息进行审核,确定所述目标用户是否有权限,所述目标用户信息库中存储有各目标用户的用户信息;若确定所述目标用户没有权限,则显示登录npm私库失败;若确定所述目标用户有权限,则显示登录npm私库成功,进入主题创建界面。7.根据权利要求6所述的方法,其特征在于,将所述第二字符串进行编译封装成新安装包发布到所述npm私库之后,还包括:获取所述目标用户的第二用户信息,并基于所述目标人员信息库对所述第二用户信息进行审核;当审核结果为通过时,通过获取所述目标用户录入的调用请求,所述调用请求中均携带有所述安装包名称;基于所述安装包名称在所述npm私库中查找获得所述新安装包,并响应于所述调用请求对所述当前安装包进行调用。8.根据权利要求1至7任一项所述的方法,其特征在于,在所述数据库中,对于同一主题名称对应有主版本与次版本,其中,未进行修改编辑的版本为主版本,进行修改编辑后的版本为次版本,所述次版本中的各历史主题版本按照更新时间进行版本号排序,所述方法还包括:在所述当前主题界面渲染中出现渲染异常时,在所述npm库中匹配出最新版本号对应的最新历史安装包;解析所述最新历史安装包提取第三字符串,并根据所述第三字符串进行渲染异常排查。9.一种用户界面配置装置,其特征在于,所述装置包括:创建模块,用于创建用户界面主题,并将所述用户界面主题所对应的主题信息存储于数据库中,所述主题信息包括主题名称、主题描述、安装包名称与版本信息,其中,所述安装
包为npm包;获取模块,用于根据所述主题名称与所述主题描述对npm私库内安装包进行匹配,获取对应的历史安装包,所述npm私库存储有多个历史安装包;生成模块,用于解析所述历史安装包提取第一字符串,并根据所述第一字符串对所述用户界面主题进行渲染,生成当前主题界面,其中,字符串为json字符串;配置模块,用于基于预设主题规范对所述当前主题界面进行配置,获得当前主题版本,并将所述当前主题版本及对应的当前版本号存储于所述数据库的版本信息;发布模块,用于提取所述当前主题版本所对应的第二字符串,将所述第二字符串进行编译封装成新安装包发布到所述npm私库。10.一种计算机读取介质,其特征在于,其上存储有计算机程序,所述计算机程序用于使计算机执行如权利要求1至8中任一项所述的方法。
技术总结
本发明涉及用户界面开发领域,公开了一种用户界面配置方法、装置及存储介质,该方法通过创建用户界面主题,并将所对应的主题信息存储于数据库中;根据主题名称与主题描述对npm私库内安装包进行匹配,获取对应的历史安装包;解析历史安装包提取第一字符串,并根据第一字符串对用户界面主题进行渲染,生成当前主题界面,字符串为json字符串;基于预设主题规范对当前主题界面进行配置,获得当前主题版本,并将当前主题版本及当前版本号存储于数据库的版本信息;提取当前主题版本的第二字符串,将第二字符串编译封装成新安装包发布到npm私库。用户在网站上直接完成当前主题的配置,并在npm私库中进行当前主题版本的发布,减少了用户界面配置的冗余工作。少了用户界面配置的冗余工作。少了用户界面配置的冗余工作。
技术研发人员:王晓虎 陈俊霖
受保护的技术使用者:浙江吉利控股集团有限公司
技术研发日:2023.08.08
技术公布日:2023/10/20
版权声明
本文仅代表作者观点,不代表航家之家立场。
本文系作者授权航家号发表,未经原创作者书面授权,任何单位或个人不得引用、复制、转载、摘编、链接或以其他任何方式复制发表。任何单位或个人在获得书面授权使用航空之家内容时,须注明作者及来源 “航空之家”。如非法使用航空之家的部分或全部内容的,航空之家将依法追究其法律责任。(航空之家官方QQ:2926969996)
航空之家 https://www.aerohome.com.cn/
航空商城 https://mall.aerohome.com.cn/
航空资讯 https://news.aerohome.com.cn/