CN112733506A - 页面编辑方法、系统、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种页面编辑方法、系统、电子设备及存储介质。该页面编辑方法包括：获取组件的第一样式属性的第一修改指令；根据所述第一修改指令对页面状态进行切换；获取所述第一样式属性的选择指令；根据所述选择指令，将与所述选择指令对应的第二样式属性与所述第一样式属性进行关联并配置；其中，第二样式属性表示预先设置的全局样式中的子样式属性。本发明实施例能够对页面组件进行灵活配置，即组件的样式属性既能够跟随全局样式进行全局修改，又能够跟随第二样式属性进行独立修改，从而提供了页面组件样式属性的修改效率。

Description

页面编辑方法、系统、电子设备及存储介质

技术领域

本发明涉及页面编辑领域，尤其涉及一种页面编辑方法、系统、电子设备及存储介质。

背景技术

页面编辑器是一种基于定制化模板和标准组件，通过可视化的拖拽设计，能够快速构建生成页面的工具。

在相关技术中，用户常会采用大量同类型的组件以呈现丰富的页面效果。当需要对样式属性进行修改时，需要用户对所有页面的每个组件的样式属性进行逐一编辑，增加了修改的工作量，从而影响了修改效率。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。为此，本发明提出一种页面编辑方法、系统、电子设备及存储介质，能够对组件的各样式属性进行灵活配置，从而提高页面的修改效率。

根据本发明的第一方面实施例的页面编辑方法，包括：获取组件的第一样式属性的第一修改指令；根据所述第一修改指令对页面状态进行切换；获取所述第一样式属性的选择指令；根据所述选择指令，将与所述选择指令对应的第二样式属性与所述第一样式属性进行关联并配置；其中，第二样式属性表示预先设置的全局样式中的子样式属性。

根据本发明实施例的页面编辑方法，至少具有如下有益效果：通过将组件的第一样式属性与全局样式的第二样式属性进行关联，以控制组件的第一样式属性既能够跟随全局样式进行全局修改，又能够跟随第二样式属性进行独立修改，实现了对组件第一样式属性的灵活配置，从而提高了组件第一样式属性的修改效率。

根据本发明的一些实施例，预先设置所述全局样式，包括：获取添加指令；获取设置参数；根据所述添加指令对所述设置参数进行处理，以生成所述全局样式。

根据本发明的一些实施例，还包括：获取页面的第二修改指令；根据所述第二修改指令和所述第二修改指令对应的所述全局样式对所述页面进行处理。

根据本发明的第二方面实施例的页面编辑系统，包括：获取模块，用于获取组件的第一样式属性的第一修改指令和选择指令；切换模块，与所述获取模块连接，用于根据所述第一修改指令对页面状态进行切换；关联模块，与所述获取模块连接，用于根据所述选择指令，将与所述选择指令对应的第二样式属性与所述第一样式属性进行关联并配置；其中，第二样式属性表示预先设置的全局样式中的子样式属性。

根据本发明的一些实施例，所述获取模块还用于获取添加指令和设置参数，所述页面编辑系统还包括：全局设定模块，分别与所述关联模块、所述切换模块和所述获取模块连接，用于根据所述添加指令对所述设置参数进行处理，以生成全局样式。

根据本发明的一些实施例，所述获取模块还用于获取页面的第二修改指令；所述关联模块还用于根据所述第二修改指令和所述第二修改指令对应的所述全局样式对所述页面进行处理。

根据本发明的第三方面实施例的电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现：如上述任一项实施所描述的页面编辑方法。

根据本发明的第四方面实施例的计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令用于：执行如上述任一项实施所描述的页面编辑方法。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

下面结合附图和实施例对本发明做进一步的说明，其中：

图1为本发明实施例页面编辑方法的一流程示意图；

图2为本发明实施例页面组件编辑状态的一结构示意图；

图3为本发明实施例全局配置开关关闭时页面状态的一结构示意图；

图4为本发明实施例全局配置开关打开时页面状态的一结构示意图；

图5为本发明实施例页面编辑方法的另一流程示意图；

图6为本发明实施例全局样式管理页面的一结构示意图；

图7为本发明实施例页面编辑方法的另一流程示意图；

图8为本发明实施例页面初始编辑状态的一结构示意图；

图9为本发明实施例页面编辑系统的一模块框图；

图10为本发明实施例页面编辑系统的另一模块框图。

附图标记：

全局配置开关100、显示窗口101、柱状组件200、获取模块300、切换模块400、关联模块500、全局设定模块600。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。

在本发明的描述中，需要理解的是，涉及到方位描述，例如上、下、前、后、左、右等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。

在本发明的描述中，若干的含义是一个以上，多个的含义是两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。如果有描述到第一、第二只是用于区分技术特征为目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

本发明的描述中，除非另有明确的限定，设置、安装、连接等词语应做广义理解，所属技术领域技术人员可以结合技术方案的具体内容合理确定上述词语在本发明中的具体含义。

本发明的描述中，参考术语“一个实施例”、“一些实施例”、“示意性实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

在相关技术中，为了提高用户页面编辑的效率，通常采用以下方法：第一，将部分组件的样式属性，例如颜色提取出来，用户可在页面属性中进行统一修改配置；第二，用户可自定义页面皮肤，页面皮肤包括一组颜色属性，通过将皮肤应用于所选的页面，以对页面中组件的样式属性进行统一修改；第三，在颜色编辑器中设置全局颜色，同一页面的所有组件均可引用该全局颜色。然而，针对第一种方法，在跨页面调用样式配置时，需要逐个页面导入样式属性配置文件，造成操作繁琐。针对第二种方法，用户无法定义哪些组件的样式需要作为公共属性进行统一配置，配置操作不够灵活。针对第三种方法，首先全局颜色受到可设置数量的限制，并且一般不可跨页面使用，从而限制了全局颜色的使用范围；其次，全局颜色应用到组件后，与组件关系是脱离的，即无法通过修改全局颜色批量修改已使用该全局颜色的组件样式属性。

基于此，本申请实施例提供了一种页面编辑方法、系统、电子设备及存储介质，能够通过用户的操作控制页面组件中哪些样式属性进行独立编辑，哪些样式属性进行统一编辑，从而提高了页面编辑的灵活性和编辑效率。

参照图1，本申请实施例提供了一种页面编辑方法。该页面编辑方法包括步骤：S100、获取组件的第一样式属性的第一修改指令；S200、根据第一修改指令对页面状态进行切换；S300、获取第一样式属性的选择指令；S400、根据选择指令，将与选择指令对应的第二样式属性与第一样式属性进行关联并配置。其中，第二样式属性表示预先设置的全局样式中的子样式属性。

其中，步骤S100、获取组件的第一样式属性的第一修改指令的一具体实施方式为：参照图2，组件包括图表组件、交互组件和装饰性组件等，组件的样式属性包括字体、字号、颜色、背景色、图标等。获取用户点击全局配置开关100的指令(第一指令)，例如：在页面组件编辑状态，用户选择柱状组件200，并点击背景色(第一样式属性)中的全局配置开关100，以对柱状组件的背景色进行修改。可以理解的是，组件和样式属性的种类可以根据实际需要进行适应性修改。

步骤S200至步骤S300的一具体实施方式为：参照图3和图4，全局配置开关100被选中后，全局配置开关100的图标切换为选中状态(例如：切换图标颜色或切换图标形状等，以表示选中状态)，并对第一样式属性的页面状态进行切换，例如：从图3状态切换为图4状态。其中，图3状态表示第一样式属性全局配置开关100关闭状态，即背景色的初始设置状态。在页面的输入框中输入需要设置的第一样式属性的参数，例如输入rgba(40，8，237，0.07)对背景色进行修改。图4状态表示第一样式属性全局配置开关100打开状态，通过下拉框对第一样式属性进行选择(选择指令)，其中显示窗口101用于对选择指令进行展示，例如：通过下拉窗口选择颜色1，则显示窗口101展示与颜色1对应的颜色，从而简化了编辑操作。

步骤S400、根据选择指令，将与选择指令对应的第二样式属性与第一样式属性进行关联并配置的一具体实施方式为：全局样式用于对页面进行全局配置修改，全局样式的样式属性包括全局色值、全局字号、全局字体、全局组件背景色和全局图片等，第二样式属性为全局样式中与第一样式属性对应的子样式属性。例如：与第一样式属性对应的样式属性为全局组件背景色，全局组件背景色包括颜色1、颜色2和颜色3等，第二样式属性表示颜色1(子样式属性)。根据选择指令，将柱状组件的背景色与全局样式中的颜色1(第二样式属性)进行关联，并将颜色1应用于柱状组件的背景色。当对第二样式属性进行修改时，第一样式属性也跟随修改。可以理解的是，根据上述方式，还可以对组件其他样式属性进行修改。

本申请实施例提供的页面编辑方法通过将组件的第一样式属性与全局样式的第二样式属性进行关联，以控制组件的第一样式属性既能够跟随全局样式进行全局修改，又能够跟随第二样式属性进行独立修改，实现了对组件第一样式属性的灵活配置，从而提高了组件第一样式属性的修改效率。

参照图5，在一些实施例中，预先设置全局样式包括步骤：S500、获取添加指令；S600、获取设置参数；S700、根据设置指令对设置参数进行处理，以生成全局样式。

其中，步骤S500、获取添加指令的一具体实施方式为：参照图6，在全局样式管理页面，获取用户点击“+添加”的指令。

步骤S600、获取设置参数的一具体实施方式为：参照图6，在全局样式管理页面，获取用户点击添加指令后输入的全局样式设置参数，包括全局样式的名称，以及全局样式中各样式属性的子样式属性的设置参数。其中，全局样式的样式属性包括全局色值、全局字号、全局字体、全局组件背景色和全局图片等。例如：设置全局样式的名称为全局样式1，设置全局组件背景色的子样式属性包括：颜色1、颜色2和颜色3。可以理解的是，全局样式所包括的样式属性以及各样式属性所包括的子样式属性的设置参数可根据实际需要进行适应性调整。

S700、根据添加指令对设置参数进行处理，以生成全局样式的一具体实施方式为：根据添加指令，将步骤S600设置的全局样式名称、各样式属性以及各样式属性的子样式属性的设置参数进行关联，以生成全局样式1。

参照图7，在一些实施例中，页面编辑方法还包括步骤：S800、获取页面的第二修改指令；S900、根据第二修改指令和第二修改指令对应的全局样式对页面进行处理。

其中，步骤S800至步骤S900的一具体实施方式为：参照图8，在页面初始编辑状态下，获取用户所选择的全局样式指令(第二修改指令)，以根据该指令对应的全局样式对页面进行全局修改。例如：用户选择了全局样式1，则根据全局样式1对应的全局色值、全局字号、全局字体、全局组件背景色和全局图片等对所有页面进行修改，以实现对页面的统一配置。

参照图9，本申请实施例提供了一种页面编辑系统。该页面编辑系统包括：获取模块300、切换模块400和关联模块500。获取模块300用于获取组件的第一样式属性的第一修改指令和选择指令；切换模块400与获取模块300连接，用于根据第一修改指令对页面状态进行切换；关联模块500与获取模块300连接，用于根据选择指令，将与选择指令对应的第二样式属性与第一样式属性进行关联并配置。

具体地，参照图2，组件包括图表组件、交互组件和装饰性组件等，组件的样式属性包括字体、字号、颜色、背景色、图标等。获取模块300获取用户点击全局配置开关100的指令(第一指令)，例如：在页面组件编辑状态，用户选中柱状组件200，并点击背景色(第一样式属性)中的全局配置开关100，以对柱状组件的背景色进行修改。参照图3和图4，切换模块400从获取模块300中获取第一修改指令，以根据第一修改指令将全局配置开关100的图标切换为选中状态(例如：切换图标颜色或切换图标形状等，以表示选中状态)，以及对第一样式属性的页面状态进行切换，例如：从图3状态切换为图4状态。其中，图3状态表示第一样式属性全局配置开关100关闭状态，即背景色的初始设置状态。在页面的输入框中输入需要设置的第一样式属性的参数，例如输入rgba(40，8，237，0.07)对背景色进行修改。图4状态表示第一样式属性全局配置开关100打开状态，获取模块300通过获取用户在下拉框中对第一样式属性的选择以得到选择指令，其中显示窗口101用于对选择指令进行展示，例如：通过下拉窗口选择颜色1，则显示窗口101展示与颜色1对应的颜色，从而简化了编辑操作。其中，全局样式用于对页面进行全局配置修改，全局样式的样式属性包括全局色值、全局字号、全局字体、全局组件背景色和全局图片等，第二样式属性为全局样式中与第一样式属性对应的子样式属性。例如：与第一样式属性对应的样式属性为全局组件背景色，全局组件背景色包括颜色1、颜色2和颜色3等，第二样式属性表示颜色1(子样式属性)。关联模块500根据选择指令，将柱状组件的背景色与全局样式中的颜色1(第二样式属性)进行关联，并将颜色1应用于柱状组件的背景色。当对第二样式属性进行修改时，第一样式属性也跟随修改。可以理解的是，根据上述方式，还可以对组件其他样式属性进行修改。

参照图10，在一些实施例中，获取模块300还用于获取添加指令和设置参数。页面编辑系统还包括：全局设定模块600。全局设定模块600分别与关联模块500、切换模块400和获取模块300连接，全局设定模块600用于根据添加指令对设置参数进行处理，以生成全局样式。具体地，参照图6，在全局样式管理页面，获取模块300获取用户点击“+添加”的指令，并获取用户点击添加指令后输入的全局样式设置参数，设置参数包括全局样式的名称，以及全局样式中各样式属性的子样式属性的设置参数。其中，全局样式的样式属性包括全局色值、全局字号、全局字体、全局组件背景色和全局图片等。例如：设置该全局样式的名称为全局样式1，设置全局组件背景色的子样式属性包括：颜色1、颜色2和颜色3。可以理解的是，全局样式所包括的样式属性以及各样式属性所包括的子样式属性的设置参数可根据实际需要进行适应性调整。全局设定模块600根据添加指令，将获取模块300获取的全局样式名称、各样式属性以及各样式属性的子样式属性的设置参数进行关联，以生成全局样式1。

在一些实施例中，获取模块300还用于获取页面的第二修改指令；关联模块500还用于根据第二修改指令和第二修改指令对应的全局样式对页面进行处理。具体地，参照图8，在页面初始编辑状态下，获取模块300获取用户所选择的全局样式指令(第二修改指令)，以使关联模块500根据该指令对应的全局样式对页面进行全局修改。例如：用户选择了全局样式1，获取模块300获取全局样式1的第二修改指令，关联模块500根据第二修改指令对应的全局色值、全局字号、全局字体、全局组件背景色和全局图片等对所有页面进行修改，以实现对页面的统一配置。

本申请实施还提供了一种电子设备。该电子设备包括：至少一个处理器，以及与至少一个处理器通信连接的存储器。其中，存储器存储有指令，指令被至少一个处理器执行，以使至少一个处理器执行该指令时实现如上述任一实施所描述的页面编辑方法。

本申请实施例提供了一种计算机可读存储介质，存储有计算机可执行指令，计算机可执行指令用于：执行如上述任一实施所描述的页面编辑方法。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统可以被实施为软件、固件、硬件及其适当的组合。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

本申请实施提供的页面状态编辑方法、系统、电子设备及存储介质通过将组件的样式属性与全局样式组件中对应样式属性的子样式属性进行相关联，使得既能够通过全局样式中的各样式属性进行跨页面的全局配置，又能够通过子样式属性对已关联的组件进行快速修改，满足批量修改多页面中多组件样式属性的要求，从而提高了页面编辑的灵活性和编辑效率。

上面结合附图对本发明实施例作了详细说明，但是本发明不限于上述实施例，在所属技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。此外，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。

Claims (8)

1.页面编辑方法，其特征在于，包括：

获取组件的第一样式属性的第一修改指令；

根据所述第一修改指令对页面状态进行切换；

获取所述第一样式属性的选择指令；

根据所述选择指令，将与所述选择指令对应的第二样式属性与所述第一样式属性进行关联并配置；

其中，第二样式属性表示预先设置的全局样式中的子样式属性。

2.根据权利要求1所述的页面编辑方法，其特征在于，预先设置所述全局样式，包括：

获取添加指令；

获取设置参数；

根据所述添加指令对所述设置参数进行处理，以生成所述全局样式。

3.根据权利要求1或2任一项所述的页面编辑方法，其特征在于，还包括：

获取页面的第二修改指令；

根据所述第二修改指令和所述第二修改指令对应的所述全局样式对所述页面进行处理。

4.页面编辑系统，其特征在于，包括：

获取模块，用于获取组件的第一样式属性的第一修改指令和选择指令；

切换模块，与所述获取模块连接，用于根据所述第一修改指令对页面状态进行切换；

关联模块，与所述获取模块连接，用于根据所述选择指令，将与所述选择指令对应的第二样式属性与所述第一样式属性进行关联并配置；

其中，第二样式属性表示预先设置的全局样式中的子样式属性。

5.根据权利要求4所述的页面编辑系统，其特征在于，所述获取模块还用于获取添加指令和设置参数，所述页面编辑系统还包括：

全局设定模块，分别与所述关联模块、所述切换模块和所述获取模块连接，用于根据所述添加指令对所述设置参数进行处理，以生成全局样式。

6.根据权利要求4或5所述的页面编辑系统，其特征在于，所述获取模块还用于获取页面的第二修改指令；

所述关联模块还用于根据所述第二修改指令和所述第二修改指令对应的所述全局样式对所述页面进行处理。

7.电子设备，包括：存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现：

如权利要求1至3中任一项所述的页面编辑方法。

8.计算机可读存储介质，存储有计算机可执行指令，所述计算机可执行指令用于：执行权利要求1至3中任一项所述的页面编辑方法。

Images