CN117762519A - 组件管理方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种组件管理方法、装置、计算机设备和存储介质。所述方法包括：基于组件的配置文件，展示所述组件和所述组件的配置信息；根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；根据所述调整后配置信息创建的对象，生成调整后组件。采用本方法能够使得所述组件针对调整后配置信息进行较小范围的调整，无需重新加载页面，通过可视化组件管理过程中的交互过程，实现了组件管理中的高效调整。

Description

组件管理方法、装置、计算机设备和存储介质

技术领域

本申请涉及组件库技术领域，特别是涉及一种组件管理方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着计算机技术不断发展，可采用组件库的方式，复用不同应用的组件。

在管理组件时，多数组件库是通过手动编写代码来创建的，如果需要在不同的项目或页面上使用相同的组件，需要开发人员通过代码来创建和管理组件库，并对代码直接进行调整，然后打包发布预览静态展示组件效果。该过程中的组件管理效率有待提高。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高组件管理效率的组件管理方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种组件管理方法，所述方法包括：

基于组件的配置文件，展示所述组件和所述组件的配置信息；

根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；

根据所述调整后配置信息创建的对象，生成调整后组件。

在其中一个实施例中，所述根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息，包括：

根据配置字段触发的调整指令，对所述配置字段展示的组件属性进行调整，得到展示中的调整后组件属性；

所述根据所述调整后配置信息创建的对象，生成调整后组件，包括：

响应于所述调整后组件属性触发的对象生成指令，按照所述调整后组件属性生成调整后组件。

在其中一个实施例中，所述根据配置字段触发的调整指令，对所述配置字段展示的组件属性进行调整，得到展示中的调整后组件属性，包括：

响应于所述配置字段触发的页面展示指令，按照所述页面展示指令指示的配置字段，展示调整界面；

根据所述调整界面触发的分栏选择指令，展示所述分栏选择指令所指示的字段属性分栏展示于所述调整界面；

根据所述字段属性分栏触发的参数调整指令，对所述字段属性分栏下的配置条目进行属性调整，得到调整后组件属性。

在其中一个实施例中，所述方法还包括：

基于所述组件的说明信息获取布局信息与组件用途信息；

根据所述布局信息，将界面划分为组件展示区域与组件说明区域；

所述组件展示区域用于展示所述组件；所述组件说明区域，用于展示所述组件用途信息。

在其中一个实施例中，所述根据所述布局信息，将界面划分为组件展示区域与组件说明区域，包括：

根据布局标签，将界面划分为画布区域和文本区域；

根据所述画布区域确定组件展示区域；

根据所述文本区域确定组件说明区域。

在其中一个实施例中，所述方法还包括；

根据所述调整后组件所适用的媒体类型，确定所述调整后组件适配的屏幕尺寸；

展示所述屏幕尺寸下的所述调整后组件。

在其中一个实施例中，所述基于组件的配置文件，展示所述组件和所述组件的配置信息，包括：

基于组件的配置文件获取配置信息；

按照所述组件的文件路径确定所述组件的运行环境；

在所述运行环境中，根据所述配置信息展示所述组件；

展示所述配置信息。

第二方面，本申请还提供了一种组件管理装置，包括：

组件展示模块，用于基于组件的配置文件，展示所述组件和所述组件的配置信息；

所述组件展示模块，用于根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；

文档生成模块，用于根据所述调整后配置信息创建对象，得到调整后组件。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任意实施例中组件管理的步骤。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意实施例中组件管理的步骤。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述任意实施例中组件管理的步骤。

上述组件管理方法、装置、计算机设备、存储介质和计算机程序产品，通过配置文件同时展示组件和配置信息，可使得组件和组件的配置信息通过界面进行展示与交互，实现了组件管理的可视化；而通过所述配置信息直接地接收调整指令，并根据调整指令直接对所述配置信息进行调整；在配置信息进行调整的过程中，根据所述调整后配置信息创建的对象，生成调整后组件，使得所述组件针对调整后配置信息进行较小范围的调整，无需重新加载页面，通过可视化组件管理过程中的交互过程，实现了组件管理中的高效调整。

附图说明

为了更清楚地说明本申请实施例或相关技术中的技术方案，下面将对实施例或相关技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为一个实施例中组件管理方法的应用环境图；

图2为一个实施例中组件管理方法的流程示意图；

图3为一个实施例中组件管理方法的系统框架图；

图4为另一个实施例中组件管理方法的系统交互示意图；

图5为一个实施例中调整界面示意图；

图6为另一个实施例中调整界面示意图；

图7为一个实施例中说明文档的示意图；

图8为一个实施例中组件管理装置的结构框图；

图9为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

通常一个项目的开始，需要根据用户需求及使用场景，由设计师设计页面展示效果，再开发人员根据设计图进行页面组件的抽离及开发。为了提高开发效率，往往会复用已有组件库，旧的组件库系统通常需要在编写代码之后重新加载页面来查看组件的外观和行为的变化，这会花费前端开发人员很多的时间和精力。

普通的组件库管理系统通常缺乏可交互可视化界面，需要开发人员通过代码来创建和管理组件库，然后打包发布预览静态展示组件效果。这对于不熟悉编程的设计师来说可能不太友好，需要额外的学习成本。

基于此，本方案的终端基于组件的配置文件，展示所述组件和所述组件的配置信息；通过配置文件收集每个组件对外暴露的参数及行为事件，并通过组件和所述组件的配置信息形成一套图形用户界面；因而用户可手动输入组件相关参数，形成了配置信息的调整指令，使得终端根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息，并根据所述调整后配置信息创建的对象，生成调整后组件，通过这一过程实时预览组件的展示效果及监听行为事件输出，无需重新加载页面，实现了组件管理中的高效调整；高效调整的优势，在组件设计过程的体现在于，组件调试效率高，能够更高效地得到最终的组件。

此外，针对一般通过代码复制实现组件复用的情况，终端根据组件的说明书信息，重构组件的说明文档。由此，便于在不同的项目或页面上使用相同的组件，开发时间短和维护成本低，有助于组件管理中的高效复用。其中，说明信息是支持MD格式的组件文档说明；而说明文档可表征调整后组件的使用方式。

而且，由于组件库是开发人员通过手动编写代码来创建的，因此在组件设计上容易出现不一致的情况。如果开发人员没有严格的设计规范和标准，那么可能会导致组件在不同页面上的表现不一致。而通过调整后组件的说明文档进行管理，可避免这一问题，有助于组件管理中的高效复用。

此外，在组件的说明文档包括用例和文档的情况下，可以通过编写测试用例来测试调整后组件，可以更好地保证组件的质量和稳定性。在每个样例都是独立组件示例，都可以包含不同的props、状态和交互，开发者可以手动修改输入参数，形成配置信息的调整指令，通过调整指令改变组件的展示方式，有助于组件管理中的高效复用。

基于此，本申请实施例提供了一个可视化的前端界面，该前端界面提供有展示中的组件和配置信息，可直接基于展示的配置信息调整指令调整配置信息与组件，以更高效地展示、使用和调整组件，使得开发者可以快速、轻松地查看，使用和交互UI组件，从而提高开发效率。而且，组件的说明文档及其支持添加组件样例的功能，也可以极大降低组件的复杂度，且提高组件的复用性与质量。可以降低编程门槛，且确保组件的一致性和符合设计规范，使得设计师能够更好地遵循品牌和产品的设计风格。

本申请实施例提供的组件管理方法，可以应用于如图1所示的应用环境中。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。

在一个实施例中，如图2所示，提供了一种组件管理方法，以该方法应用于图1中的终端102为例进行说明，包括以下步骤202至步骤206。其中：

步骤202，基于组件的配置文件，展示组件和组件的配置信息。

组件是基于配置文件生成的局部页面，其由至少一个界面元素组成。该组件是组件库中的任意待调整组件。在步骤202至步骤206的一轮执行过程中，待调整组件与调整后组件是相对设置的概念，待调整组件是调整前的组件，调整后组件是进行调整之后的组件。

配置文件是含有组件信息的文件。配置文件包括组件属性、组件事件等信息。可选地，配置文件是用于生成组件的模板，该模板用于生成组件，且用于生成配置信息。可选地，配置文件可以是一种类（class），这种类中的配置信息可派生出配置对象，以绘制出相应的组件。

配置信息用于表征组件的信息，且与组件均处于展示的状态。配置信息是可通过界面展示的信息，且可通过界面接收到的调整指令，对展示中的配置信息进行调整，以在响应界面上的操作指令时，实现组件的实时调整。可选地，配置信息包括但不限于，用于展示该组件名称及导航栏名称的标题信息（title）；通过用于对展示中的组件进行标识的组件标识（component）；组件的事件属性（argTypes），以及组件的非事件属性（args）。可选地，展示中的组件可通过代码导入函数（import）导入，并通过相应的组件标识，对展示中的组件进行展示。

在组件引入终端的组件管理系统后，通过特定的语法规范来定义组件的属性与事件；这些属性包括但不限于名称、标识、预设值；这些事件包括但不限于，用于接收调整指令的触发事件，以及用于对用户的调整指令进行响应的响应事件；触发事件可以是按钮点击事件、文本输入事件、选项选择事件等事件；而响应事件可以是触发事件所引起的变化；示例性地，当检测到某一按钮点击事件时，可以执行响应的按钮点击事件处理函数，以此响应相应的事件，例如，在某个属性变更时，页面上的数据同时进行变更，以此同时对配置信息与组件进行调整。

通过配置文件，可使得终端能够实现自动解析获取组件的配置信息，以这种配置方式，控制组件的展示状态，展示状态包括但不限于，组件禁用情况等事件，以及宽高，颜色、背景色，字体大小等属性，组件会根据这样动态的属性值，显示对应的展示效果。

在一个实施方式中，基于组件的配置文件，展示组件和组件的配置信息，包括：获取可视化系统的组件库；在组件库中，基于组件选择指令所指示组件的配置文件展示组件与该配置文件中的配置信息。

在一个实施方式中，基于组件的配置文件，展示组件和组件的配置信息，包括：基于组件的配置文件绘制组件与具有配置信息的配置字段；将绘制出的组件，以及绘制出的配置字段，在界面的不同位置展示。

步骤204，根据配置信息的调整指令，对配置信息进行调整，得到展示中的调整后配置信息。

调整指令是作用于配置信息，且用于对配置信息和组件进行调整的指令。可选地，调整指令是基于终端的界面检测到的操作指令。可选地，当配置信息以列表的形式展示时，可通过直接对列表中的信息进行修改，得到调整后配置信息。可选地，配置信息可以是通过不同分栏展示的，可通过对各分栏下的信息进行修改，得到调整后配置信息。

调整后配置信息是根据调整指令调整所得的配置信息，调整后配置信息可用于生成相应的调整后配置文件，以通过调整后配置文件再次执行步骤202-步骤206。

在一个可选地实施方式中，根据配置信息的调整指令，对配置信息进行调整，得到展示中的调整后配置信息，包括：响应于配置信息的调整指令，根据调整指令所指示的调整内容，对配置信息进行调整，得到展示中的调整后配置信息。由此，对配置信息的内容进行内容调整，从而在对配置信息中的事件描述进行调整的同时，以便于同步调整组件所展示的内容，实现组件的高效管理，且便于复用。

步骤206，根据调整后配置信息创建的对象，生成调整后组件。

调整后组件是根据调整指令调整所得的组件，调整后组件可存在对应的调整后配置文件。当存在调整后配置文件时，调整后组件可充当相应的用例，也可在再次执行步骤202时，将其作为步骤202中的组件，以实现多次调整。调整后配置信息与调整后组件均是直接显示的。可选地，可通过对配置信息进行调整，以切换组件的状态，得到调整后组件。

在一个可选地实施方式中，根据配置信息的调整指令，对配置信息进行调整，得到展示中的调整后配置信息，包括：根据样式调整指令内的样式信息，对配置信息进行调整，得到展示中的调整后配置信息。

相对应的，根据调整后配置信息创建对象，得到调整后组件，包括：根据调整指令所指示的样式，对组件进行调整，得到展示中的调整后组件。由此，对配置信息进行内容调整，并对组件的展示效果进行调整，从而在对配置信息中的事件描述进行调整的同时，对组件的展示效果进行同步调整，实现组件的高效管理，且便于复用。

在一个可选地实施方式中，根据调整后配置信息创建的对象，生成调整后组件，包括：响应于配置信息的调整指令，根据调整指令所指示的调整内容，对组件的内容进行调整，得到展示中的调整后组件。可选地，对配置信息和组件的内容同时进行内容调整，从而在对配置信息中的事件描述进行调整的同时，对组件所展示的内容进行同步调整，实现组件的高效管理，且便于复用。

可选地，该方法还包括：根据组件的说明信息，生成调整后组件的说明文档。

说明文档是用于对组件进行使用说明的文件。可选地，说明文档可以是调整后组件的配置文件，也可是调整后组件的配置文件，还可用于生成调整后组件的配置文件。可选地，说明文档是md类型文件，且可基于marked库转换为html格式。

可选地，说明文档包括调整后配置信息，也可包括未调整的配置信息，未调整的配置信息是步骤202中的配置信息。当说明文档包括调整后配置信息时，可直接通过调整后配置信息展示出步骤206中的调整后组件，以复用这种调整后组件；当说明文档包括配置信息时，可直接通过配置信息展示出步骤202中的组件，以复用组件。

在一个实施方式中，根据组件的说明信息，生成调整后组件的说明文档，包括：将组件的说明信息对应的代码进行格式转换，得到调整后组件的说明文档。

在另一个实施方式中，根据组件的说明信息，生成调整后组件的说明文档，包括：根据组件的说明信息生成组件的代码示例；将该代码示例作为调整后组件的说明文档。

上述组件管理方法中，通过配置文件同时展示组件和配置信息，可使得组件和组件的配置信息通过界面进行展示与交互，实现了组件管理的可视化；而通过配置信息直接地接收调整指令，并根据调整指令直接对配置信息进行调整；在配置信息进行调整的过程中，根据调整后配置信息创建的对象，生成调整后组件，使得组件针对调整后配置信息进行较小范围的调整，无需重新加载页面，通过可视化组件管理过程中的交互过程，实现了组件管理中的高效调整。

在此基础上，还会获取组件的说明信息，根据组件的说明信息，生成调整后组件的说明文档，便于明晰组件的使用过程，可通过说明信息与配置文件形成不同类别的组件管理维度，有助于组件管理中的高效复用。

在一个实施例中，基于组件的配置文件，展示组件和组件的配置信息，包括：基于组件的配置文件获取配置信息；按照组件的文件路径确定组件的运行环境；在运行环境中，根据配置信息展示组件；展示配置信息。

文件路径用于表征组件的配置文件在终端存储的位置。可选地，文件路径它可以是绝对路径或相对路径；绝对路径是从根目录开始的完整路径，而相对路径是从当前工作目录开始的路径。

运行环境是针对文件路径设定，且用于对组件进行展示的环境。运行环境是基于文件路径配置的程序信息。可选地，可针文件路径的某一文件夹设定运行环境，以使得这一文件夹内的程序或子文件夹具有相同的运行环境。可选地，运行环境可以是Node环境，且可在Node环境下，同时采用Vue框架和React框架。通过针对文件路径设定，且用于对组件进行展示的运行环境，可在独立的运行环境开发组件，与现有应用程序逻辑完全分离，只需要在特定的文件夹下进行组件的开发即可。

可选地，可针对组件的文件路径设置Docker容器，将应用程序在各应用环境的依赖项打包到文件路径所指示的容器。这个容器包含了应用程序的代码、运行时、系统工具、系统库等。

在一个实施方式中，基于组件的配置文件获取配置信息，包括：从组件的存储位置所在文件夹中，按照用于标识配置文件的文件前缀获取配置文件；从该配置文件提取相应的配置信息。由此，将组件和其配置文件同时进行存储，以保障数据可靠性。

在另一个实施方式中，基于组件的配置文件获取配置信息，包括：基于配置文件的存储位置，获取组件的配置信息。由此，单独通过配置文件存储组件，以缩小数据总量，提高配置信息获取的效率。

在一个实施方式中，按照组件的文件路径确定组件的运行环境，包括：按照组件的存储位置，确定组件所在的组件文件路径；根据组件文件路径对应的环境信息，确定组件的运行环境。

在另一个实施方式中，按照组件的文件路径确定组件的运行环境，包括：按照配置文件的存储位置，确定用于运行组件的组件文件路径；根据组件文件路径对应的环境信息，确定组件的运行环境；其中，组件文件路径是用于展示组件的路径。

在一个实施方式中，根据配置信息展示组件，包括：根据配置信息绘制组件，得到展示绘制出的组件。

在另一个实施方式中，根据配置信息展示组件，包括：根据配置信息绘制组件的预览图；展示组件的预览图。由此，通过预览图预估组件的展示效果，其处理效率相对较高。

本实施例中，通过文件路径设定运行环境，这一运行环境可使得组件从应用程序解耦出来，使得组件与应用程序处于分离的状态；在此情况下，可单独就每一组件进行调整，且可使得不同运行环境下的组件也可进行展示。

在一个实施例中，基于组件的配置文件，展示组件和组件的配置信息，包括：根据配置文件中的配置信息，对组件与具有组件属性的配置字段进行展示。

在一个实施方式中，根据配置文件中的配置信息，对组件与具有组件属性的配置字段进行展示，包括：根据配置文件中的配置信息绘制组件；展示绘制出的组件；将具有组件属性集合标识的配置字段进行展示。

在另一个实施方式中，根据配置文件中的配置信息，对组件与具有组件属性的配置字段进行展示，包括：在配置文件中的配置信息中，根据字段选择指令所选择的配置信息，生成并展示组件；将字段选择指令所选择的配置字段进行信息展示。

在一个实施例中，根据配置信息的调整指令，对配置信息进行调整，得到展示中的调整后配置信息，包括：根据配置字段触发的调整指令，对配置字段展示的组件属性进行调整，得到展示中的调整后组件属性。

相对应的，根据调整后配置信息创建的对象，生成调整后组件，包括：响应于调整后组件属性触发的对象生成指令，按照调整后组件属性生成调整后组件。

对象生成指令用于指示终端基于调整后组件属性生成配置对象。可选地，对象生成指令可以在通过返回键触发，也可通过查看键触发，还可通过用于创建对象的按键触发。

配置字段是用于接收调整指令的字段；可选地，配置信息是通过多个配置字段表征的，可通过各个配置字段分别生成组件，且可通过配置字段下的分别用于从不同角度配置组件，形成不同角度的组件属性。可选地，用于生成组件的配置字段可以是属性字段或插槽字段。以表单的属性字段为例，其可以包括但不限于表单名称（formName）、表单界面元素（formItem）、表单引用参数（ykFormRef）。

在一个实施方式中，按照调整后组件属性生成调整后组件，包括：按照调整后组件属性绘制组件；展示绘制出的组件。

在一个实施方式中，按照调整后组件属性生成调整后组件，包括：在调整后组件属性返回到对象创建页面后，按照调整后组件属性，对展示中的组件进行调整，得到展示中的调整后组件。

在另一个实施方式中，按照调整后组件属性生成调整后组件，包括：根据调整后组件属性的变化幅度进行映射，得到调整速率；按照调整速率，对展示中的组件进行调整，得到展示中的调整后组件。由此，组件随着变化值逐步变化，以控制调整地尺度。

由此，可使得组件的不同状态和交互效果是可视化的。系统可以实时获取用户界面上的操作，自动切换组件的状态。可以确定组件在用户交互时的触发事件及响应结果，从而实时地确定组件在不同状态下的展示效果。通过这种方式，可以确保组件在各种交互情况下都能正常工作，保障稳定性。

在一个实施方式中，根据配置字段触发的调整指令，对配置字段展示的组件属性进行调整，得到展示中的调整后组件属性，包括：响应于配置字段触发的页面展示指令，按照页面展示指令指示的配置字段，展示调整界面；根据调整界面触发的分栏选择指令，展示分栏选择指令所指示的字段属性分栏展示于调整界面；根据字段属性分栏触发的条目调整指令，对字段属性分栏下的配置条目进行属性调整，得到调整后组件属性。页面展示指令。

调整界面是针对配置字段设置的界面；每个调整界面可存在多个字段属性分栏，这些字段属性分栏分别用于表征调整界面的不同维度，以将配置信息中的调整后信息更细致地确定出来。

配置字段的多个字段属性分栏包括但不限于，控制分栏（Control）、响应事件分栏（Action）或组件样例分栏（Story）；其中，控制器分栏是针对输入框、视图或模型设置的；响应事件分栏用于表征组件属性或状态；组件样例分栏可涉及一个组件或一组的组件在不同状态下的代码示例，其与说明文档是相重合的。组件属性是配置字段中，用于表征组件的属性或状态。

以表单的属性字段为例，其可以包括但不限于表单名称（formName）、表单界面元素（formItem）、表单引用参数（ykFormRef）；表单的属性配置字段均分别用于生成相应的组件进行展示，也可通过将多个配置字段进行组合。可选地，表单属性配置字段可分布于同一分栏或不同分栏。

配置条目是对字段属性分栏下的属性条目细化所得的配置信息，且配置条目是可通过页面直接进行修改的，以提高修改效率。配置条目可使得各个字段属性分栏所在维度内的配置信息能够进一步细化。可选地，配置条目与字段属性分栏具有信息互补的功效。可选地，属性字段中的配置条目是可配置的；配置条目包括名称、描述信息（Description）、默认值（Defalut）、控制器（Control）等条目，同一属性字段的组件属性是用于生成同一个组件。

可选地，配置字段可存在多个配置条目，可通过配置字段生成组件，该组件是通过配置字段下的多个配置条目从不同角度配置的，能够形成不同角度的组件属性；同一配置字段的各配置条目用于同时生成一个组件。

本实施方式中，针对配置字段设定调整界面，且调整界面存在可被指令所指示的字段属性分栏及字段属性分栏下的条目调整指令；在此情况下，基于配置字段生成配置对象时，配置对象能够从更为细化的角度进行组件调整，以此提高组件调整的效率。

在一个实施例中，根据组件的说明信息，生成调整后组件的说明文档，包括：基于组件的说明信息获取布局信息与组件用途信息；根据布局信息，将界面划分为组件展示区域与组件说明区域；组件展示区域用于展示组件；组件说明区域，用于展示组件用途信息。

布局信息用于将界面分割为不同区域，以使得组件、调整后信息与组件用途信息之间的干扰性相对较弱，从而能够更准确地展示出相应的信息。可选地，布局信息是通过分界线、分隔栏或布局标签进行设置的。组件展示区域与组件说明区域是具有不同功能的区域。

在一个实施方式中，基于组件的说明信息获取布局信息与组件用途信息，包括：将组件的说明信息解析为超文本标记语言的布局信息与组件用途信息。

相对应的，根据布局信息，将界面划分为组件展示区域与组件说明区域，包括：按照布局信息，将超文本标记语言划分为组件展示区域与组件说明区域。

在另一个实施方式中，根据布局信息，将界面划分为组件展示区域与组件说明区域，包括：按照布局分隔符与区域分割位置，将界面划分为组件展示区域与组件说明区域。

在一个实施方式中，组件展示区域用于展示组件是指：本方法还包括：将组件展示于组件展示区域。可选地，可按照配置信息绘制组件，并将绘制出的组件，展示于组件展示区域。可选地，可根据配置信息绘制组件的预览图，并将该预览图展示于组件展示区域。

在一个实施方式中，组件说明区域，用于展示组件用途信息是指：在组件说明区域，展示组件用途信息。可选地，在组件说明区域，展示组件的代码示例或者配置信息；可选地，在组件说明区域，展示组件的属性或组件。

本实施例中，基于组件的说明信息获取布局信息与组件用途信息；先根据布局信息，将界面划分为组件展示区域与组件说明区域；再按照组件用途信息，将组件展示于组件展示区域；并且，在组件说明区域，展示组件用途信息，以使得说明文档、配置信息、调整后配置信息和调整后组件互不干扰，避免因为信息干扰而影响到组件管理效率，且能够通过说明文档、配置信息及调整后配置信息进行信息互补，以高效地管理组件。

在一个实施方式中，根据布局信息，将界面划分为组件展示区域与组件说明区域，包括：根据布局标签，将界面划分为画布区域和文本区域；根据画布区域确定组件展示区域；根据文本区域确定组件说明区域。

布局标签所划分的区域是相互解耦的，可使得各区域专注于各自的功能，避免不同区域之间的数据逻辑存在某种异常情况。可选地，布局标签可用于在界面的不同位置嵌入画布区域和文本区域；可选地，可通过布局标签对界面进行分栏，以得到界面的不同区域。

画布区域是用于绘图的功能区域；文本区域是用于添加文字信息的功能区域。画布区域与文本区域对应于不同的功能模块。可选地，画布区域用于将组件可视化，以实现组件的展示，且能够接收画布区域所触发指令；而文本区域专注于说明信息的记录。

可选地，可通过某些面向对象的语言设定布局标签、画布区域及文本区域。以JavaScript语言为例，布局标签可以是tab；画布区域可以是canvas，文本区域可以是notes。引入插件后会自动在页面特定的位置以tab分栏的形式canvas及notes；canvas用来展示原有的组件展示效果，notes栏用于展示该组件的说明文档。

在一个可行地实施例中，根据画布区域确定组件展示区域，包括：将画布区域确定为组件展示区域；或者，将画布区域的中心区域确定为组件展示区域。

在另一个可行地实施例中，根据画布区域确定组件展示区域，包括：在画布区域中，按照配置信息所指示的区域，确定组件展示区域。由此，通过配置信息，对组件展示区域进行精确地把控，以在不同区域解耦的情况下，进行单向控制。

在一个可行地实施例中，根据文本区域确定组件说明区域，包括：将文本区域确定为组件说明区域；或者，在文本区域中，根据说明信息匹配的位置信息，确定各部分说明信息各自所属的组件说明区域。

在另一个可行地实施例中，根据文本区域确定组件说明区域，包括：在文本区域中，按照配置信息所指示的区域，确定组件说明区域。

在一个示例性地实施例中，该方法通过组件文档模块实现；组件文档模块提供了一种通过md文件自动生成文档的功能，包括组件的名称、属性、事件、用途、API、使用方法、示例代码等信息，从而方便团队成员查阅和使用，以便开发人员了解每个组件的作用和预期行为。可基于marked库，将md类型的配置文档解析为html，且由于内置了一些样式的布局信息，通过这些布局信息的逻辑，可按照布局标签分栏的形式，在界面的相应位置划分出组件的画布区域及文本区域；画布区域用来展示原有的组件展示效果，文本区域用于展示该组件的说明文档。

本实施方式中，根据布局标签，将界面划分为画布区域和文本区域，使得不同区域之间的干扰性相对较弱；而根据画布区域确定组件展示区域，根据文本区域确定组件说明区域，可使得这组件展示区域具有画面区域的功能，且组件说明区域具有文本区域的功能，从而使得组件展示区域与组件说明区域之间的干扰性更弱，以提高组件管理效率。

在一个实施例中，该方法还包括；根据调整后组件所适用的媒体类型，确定调整后组件适配的屏幕尺寸；展示屏幕尺寸下的调整后组件。

媒体类型包括但不限于不同平台上的使用或管理系统。可选地，在各操作系统、浏览器或设备上，存在不同媒体类型，每种媒体类型分别对应于不同设备的屏幕尺寸。

在一个实施方式中，根据调整后组件所适用的媒体类型，确定调整后组件适配的屏幕尺寸，包括：在调整后组件的说明文档中，查询调整后组件所适用的媒体类型；将媒体类型下的屏幕尺寸，确定为调整后组件适配的屏幕尺寸。

在另一个实施方式中，根据调整后组件所适用的媒体类型，确定调整后组件适配的屏幕尺寸，包括：根据调整后组件所适用的多种媒体类型，确定调整后组件适配的各个屏幕尺寸；当检查到屏幕尺寸的选择指令时，从各个屏幕尺寸中，将选择指令所指示的屏幕尺寸确定为调整后组件适配的屏幕尺寸。

在一个实施方式中，展示屏幕尺寸下的调整后组件，包括：按照各屏幕尺寸的窗口标签中，对调整后组件进行绘制与展示。

在另一个实施方式中，展示屏幕尺寸下的调整后组件，包括：将调整后组件，通过嵌入到不同屏幕尺寸的界面标签进行展示。

本实施例中，提供了一种多平台支持的功能，允许用户在不同的平台上使用和管理系统。系统可以在不同的操作系统、浏览器和设备上运行，针对pc和移动端不同尺寸下的系统展示，通过媒体查询方式适配当前的屏幕宽度，从而能正确展示系统界面。由此，可将组件在不同设备宽度下的响应式的界面展示效果，通过嵌入iframe标签的方式，动态改变展示窗口大小，模拟多种常用设备尺寸和自定义设备尺寸设置，方便用户在不同的设备上预览和调试组件。

如图3所示，本方案所在体系包括系统层、框架层、架构层和工具层，其中系统层主要由组件管理模块、组件展示模块、组件文档生成模块、响应式管理模块等四大模块组成；其中框架层主要依赖vue（vue2和vue3）、react。

如图4所示，检测到终端上的组件库导入指令，通过系统接入文档，将组件库导入到可视化系统，该可视化系统是本申请中的组件管理系统。接着，组件管理模块获取组件的配置信息，并由组件展示模根据组件信息渲染可视化面板块，可通过终端展示不同状态下的组件，不同状态下的组件可涵盖有上述组件与调整后组件的展示效果；在渲染可视化面板块的过程中，若检测到操作指令修改面板中的组件状态，以得到调整后配置信息，则根据调整后配置信息创建的对象生成组件。

除了交互之外，本申请还具有将组件的说明信息可视化展示的过程。当从组件库获取到MD说明信息后，文档生成模块进行md说明信息的解析，得到说明文档；再将组件的说明信息通过终端呈现。

此外，本方案可通过不同平台开发的组件库获取组件，由响应式管理模块安卓不同平台窗口大小的展示组件，并根据不同平台组件库展示相应的展示效果。

相对于Node环境下的Vue和React直接使用相比也做了一些改良，本申请允许独立的环境中开发组件，与现有应用程序逻辑完全分离，只需要在特定的文件夹下进行组件的开发即可。

本申请的方案还内置有交互性展示，允许以交互的方式展示组件，包括不同状态、不同数据和不同用例，从而更好地理解组件的功能和用法，而直接使用Vue和React框架时，往往需要编写额外的代码来模拟组件的各种状态和用例，这可能会增加开发工作量。这些内容详见步骤202-206。

首先，架构层开发环境运行需要基于Node环境，通过node.js提供的npm包管理系统，方便组件库的接入和管理。根据不同技术栈开发的组件，架构层可支持主流的Webpack或者Vite作为代码打包工具。打包部署之后，可实现开发及UI等相关人员的协同工作。

其次，框架层支持两种主流前端框架：Vue和React。通过封装和抽象用于对接不同技术栈组件库的通用逻辑，提供一套稳定可扩展的平台逻辑，方便对接展示开发完成的自定义组件；系统的根目录下会有入口文件main.js，用以系统的入口及环境配置，通过设置framework字段，值一般分为vuevue3react等，根据这个标识对组件进行不同框架语法的编译打包。

此外，工具层包括TypeScript、Eslint、Prettier等工具。通过引入TypeScript，从而提高应用程序的可维护性和可扩展性，其提供静态类型检查和其他强大的特性，使得开发者能够更轻松地开发复杂的应用程序，并减少由于类型错误导致的bug，保证系统平台的稳定性及代码的健壮性。Eslint统一编码规范，通过配置不同的规则集，开发者可以定制适合自己团队和项目的代码规范，提升代码可维护性。Prettier的使用可以实现自动调整代码的风格和布局，以确保代码风格统一、易读且符合编码规范，从而提高开发效率。

综上，多种工具的使用最大的问题之一是确保它们之间的配置能够互相兼容，如配置一致性、工具版本兼容性。静态类型检查、代码错误及调整代码的风格和布局为独立功能，静态类型检查、代码错误为代码书写过程中会有警告提示，代码风格调整为文件保存根据配置自动调整，三者直接的关系可根据具体配置依次或者并行处理。

在此基础上，本方案涉及系统层；其分为组件管理模块、组件展示、组件文档、响应式管理四个模块；

组件管理模块用于管理UI组件的配置和信息，每个组件都会对应一个js类型的配置文件。

组件展示模块用于执行步骤202-206及相应步骤。组件展示模块基于配置文件，导出维护的配置对象，其中信息字段包括title(用于展示该组件名称及导航栏名称)、component(需要展示的组件，会通过import引入)、argTypes(组件的事件属性)、args(组件的非事件属性)。系统在组件引入之后，通过特定的语法规范来定义组件的名称、属性、事件、默认值等，从而系统能够实现自动解析获取组件的属性、事件等信息。这些组件配置信息会传递给组件展示模块用以控制组件的不同状态展示，如是否禁用，宽高，颜色、背景色，字体大小等属性配置，组件会根据这样动态的属性值，显示对应的展示效果。由此，提供了一种可视化的方式来展示组件的不同状态和交互效果。系统可以实时获取用户界面上的操作，自动切换组件的状态。在这种情况下，可以观察组件在用户交互时的行为，从而实时地预览组件在不同状态下的展示效果。通过这种方式，可以确保组件在各种交互情况下都能正常工作。

文档生成模块提供了一种通过md文件自动生成文档的功能，包括组件的名称、属性、事件、用途、API、使用方法、示例代码等信息，从而方便团队成员查阅和使用，以便开发人员了解每个组件的作用和预期行为。系统主要基于marked库，用以解析md类型为html，与现有主流解析md文件的插件主要区别在于该插件内置了一些样式布局逻辑，引入插件后会自动在页面特定的位置以tab分栏的形式canvas及notes，canvas用来展示原有的组件展示效果，notes栏用于展示该组件的使用文档。

响应式管理模块提供了一种多平台支持的功能，允许用户在不同的平台上使用和管理系统。系统可以在不同的操作系统、浏览器和设备上运行，针对pc和移动端不同尺寸下的系统展示，通过媒体查询方式适配当前的屏幕宽度，从而能正确展示系统界面。本系统提供了组件在不同设备宽度下的响应式的界面展示效果，通过嵌入iframe标签的方式，动态改变展示窗口大小，模拟多种常用设备尺寸和自定义设备尺寸设置，方便用户在不同的设备上预览和调试组件。由此，可进行组件信息的自动识别捕获，可保障组件展示的可交互性，组件文档可自动识别解析并完成页面展示，且支持跨平台展示。

如图5所示，其调整界面包括控制分栏、响应事件分栏及组件样例分栏；当前选中的是控制分栏，涉及用于对地区逐级展示或选择过程中的相关控制信息；在控制分栏下，包括名称、描述、默认值等相关字段。

如图6所示，其组件包括“姓名”、“地区”等字段及这些字段对应的界面元素，其调整界面包括控制分栏与动作分栏；当前选中的是控制分栏，控制分栏中的每一行是一个配置条目；其包括表格属性、控制条目及创建对象的按钮及可见性状态（raw）。其中，控制条目是可单独变更的，因而可就控制条目进行细致调整；当可见性状态调整为可见时，创建相应的对象时，会展示相应的调整后组件。示例性地，控制条目包括：formProps：{...}5keys，以及，formName：{...}11keys。

如图7所示，其说明文档包括表单的属性及代码示例，且可包括每一具体属性的代码示例，这些代码示例均是可复制的。

以表单属性的基础用法为例，其如下：

<YkForm v-bind="ykFormProps" ref="ykFormRef">

// 自定义整个form表单项，如果配置此customForm，那么所有的下面自定义表单项将会失效，完全以此模板内容为准

<template #customForm v-if="false">

<el-form-item label="姓名" prop="name" :rules="customRules.rules">

<el-input v-model="ykFormProps.formName.name" />

</el-form-item>

</template>

// 自定义form表单某一项，如：输入框

<template #formItemInput>

<el-input

v-model="ykFormProps.formName.slotInput"

placeholder="这是自定义的输入框"

/>

</template>

// 上传组件

<template #formItemUpload>

<YkUpload />

</template>

// 复合型输入框自定义元素

<template #slotInpPrepend>Http://</template>

<template #slotInpAppend>.comww</template>

// Form表单内操作

<template #operationIn>

<el-button type="primary" @click="onSubmit">Create</el-button>

<el-button @click="resetForm">Reset</el-button>

<el-button>Cancel</el-button>

</template>

// Form表单外操作

<template #operationOut>

<el-button type="primary" @click="onSubmit">Create</el-button>

<el-button @click="resetForm">Reset</el-button>

<el-button>Cancel</el-button>

</template>

</YkForm>

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的组件管理方法的组件管理装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个组件管理装置实施例中的具体限定可以参见上文中对于组件管理方法的限定，在此不再赘述。

在一个示例性的实施例中，如图8所示，提供了一种组件管理装置，包括：

组件展示模块802，用于基于组件的配置文件，展示所述组件和所述组件的配置信息；

所述组件展示模块802，用于根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；

文档生成模块806，用于根据所述调整后配置信息创建对象，得到调整后组件。

在其中一个实施例中，所述组件展示模块802，用于：

根据配置字段触发的调整指令，对所述配置字段展示的组件属性进行调整，得到展示中的调整后组件属性；

响应于所述调整后组件属性触发的对象生成指令，按照所述调整后组件属性生成调整后组件。

在其中一个实施例中，所述组件展示模块802，用于：

响应于所述配置字段触发的页面展示指令，按照所述页面展示指令指示的配置字段，展示调整界面；

根据所述调整界面触发的分栏选择指令，展示所述分栏选择指令所指示的字段属性分栏展示于所述调整界面；

根据所述字段属性分栏触发的参数调整指令，对所述字段属性分栏下的配置条目进行属性调整，得到调整后组件属性。

在其中一个实施例中，所述装置还包括文档生成模块806，所述文档生成模块806用于：

基于所述组件的说明信息获取布局信息与组件用途信息；

根据所述布局信息，将界面划分为组件展示区域与组件说明区域；

所述组件展示区域用于展示所述组件；所述组件说明区域，用于展示所述组件用途信息。

在其中一个实施例中，所述文档生成模块806用于：

根据布局标签，将界面划分为画布区域和文本区域；

根据所述画布区域确定组件展示区域；

根据所述文本区域确定组件说明区域。

在其中一个实施例中，所述装置还包括响应式管理模块808，所述响应式管理模块808，用于；

根据所述调整后组件所适用的媒体类型，确定所述调整后组件适配的屏幕尺寸；

展示所述屏幕尺寸下的所述调整后组件。

在其中一个实施例中，所述组件展示模块802，用于：

基于组件的配置文件获取配置信息；

按照所述组件的文件路径确定所述组件的运行环境；

在所述运行环境中，根据所述配置信息展示所述组件；

展示所述配置信息。

上述组件管理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个示例性的实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图9所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC（近场通信）或其他技术实现。该计算机程序被处理器执行时以实现一种组件管理方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置。显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要符合相关规定。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-OnlyMemory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（ReRAM）、磁变存储器（Magnetoresistive Random Access Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（Dynamic RandomAccess Memory，DRAM）等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种组件管理方法，其特征在于，所述方法包括：

基于组件的配置文件，展示所述组件和所述组件的配置信息；

根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；

根据所述调整后配置信息创建的对象，生成调整后组件。

2.根据权利要求1所述的方法，其特征在于，所述根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息，包括：

根据配置字段触发的调整指令，对所述配置字段展示的组件属性进行调整，得到展示中的调整后组件属性；

所述根据所述调整后配置信息创建的对象，生成调整后组件，包括：

响应于所述调整后组件属性触发的对象生成指令，按照所述调整后组件属性生成调整后组件。

3.根据权利要求2所述的方法，其特征在于，所述根据配置字段触发的调整指令，对所述配置字段展示的组件属性进行调整，得到展示中的调整后组件属性，包括：

响应于所述配置字段触发的页面展示指令，按照所述页面展示指令指示的配置字段，展示调整界面；

根据所述调整界面触发的分栏选择指令，展示所述分栏选择指令所指示的字段属性分栏展示于所述调整界面；

根据所述字段属性分栏触发的参数调整指令，对所述字段属性分栏下的配置条目进行属性调整，得到调整后组件属性。

4.根据权利要求1所述的方法，其特征在于，所述方法还包括：

基于所述组件的说明信息获取布局信息与组件用途信息；

根据所述布局信息，将界面划分为组件展示区域与组件说明区域；

所述组件展示区域用于展示所述组件；所述组件说明区域，用于展示所述组件用途信息。

5.根据权利要求4所述的方法，其特征在于，所述根据所述布局信息，将界面划分为组件展示区域与组件说明区域，包括：

根据布局标签，将界面划分为画布区域和文本区域；

根据所述画布区域确定组件展示区域；

根据所述文本区域确定组件说明区域。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括；

根据所述调整后组件所适用的媒体类型，确定所述调整后组件适配的屏幕尺寸；

展示所述屏幕尺寸下的所述调整后组件。

7.根据权利要求1所述的方法，其特征在于，所述基于组件的配置文件，展示所述组件和所述组件的配置信息，包括：

基于组件的配置文件获取配置信息；

按照所述组件的文件路径确定所述组件的运行环境；

在所述运行环境中，根据所述配置信息展示所述组件；

展示所述配置信息。

8.一种组件管理装置，其特征在于，所述装置包括：

组件展示模块，用于基于组件的配置文件，展示所述组件和所述组件的配置信息；

所述组件展示模块，用于根据所述配置信息的调整指令，对所述配置信息进行调整，得到展示中的调整后配置信息；

文档生成模块，用于根据所述调整后配置信息创建对象，得到调整后组件。

9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。