Designer component management method, system and storage medium

Abstract

The present invention discloses a designer component management method, system and storage medium, which are applied to the field of software technology and can improve front-end rendering efficiency and reduce manpower and time costs. The method includes: obtaining first component data; adding a first preset component according to the first component data to construct a component configuration list; obtaining second component data of a second preset component according to the component configuration list, and adding a second preset component according to the second component data; the second preset component is a clone component; constructing a component tree according to the structural relationship between the first preset component and the second preset component; adjusting the relationship between each component through the component tree to construct a component directory; traversing the first component data and the second component data, and performing compatibility processing on different types of components in the first preset component and the second preset component; selecting a third preset component through the component directory to obtain third component data; and rendering the component according to the third component data to obtain a target component.

Description

Technical Field

[0001] The present invention relates to the field of software technology, and in particular to a designer component management method, system and storage medium. Background Art

[0002] In the process of changes in the underlying architecture of some system platforms and updates and iterations of functions, the designer's property panel requires more different custom components, and the increasing number of components will put pressure on the performance of the front-end. This also leads to large differences in the property configurations of different components. In addition, due to the requirements and limitations of the user's on-site environment, the requirements for the internal information of custom components are also different, and batch redesign and component development are required, which is a time-consuming and labor-intensive process. In related technologies, when users want to use different components on the designer, the front-end needs to be redesigned or new components need to be added to re-render the property panel, which is very unfriendly to the front-end performance, and the visual performance of a re-rendered property panel is often more complex, and errors are prone to occur, resulting in failure to operate normally. Summary of the Invention

[0003] In order to solve at least one of the above technical problems, the present invention proposes a designer component management method, system and storage medium, which can improve front-end rendering efficiency and reduce manpower and time costs.

[0004] In one aspect, an embodiment of the present invention provides a designer component management method, comprising the following steps:

[0005] Acquire first component data; wherein the first component data includes component attributes and component information;

[0006] Add a first preset component according to the first component data to construct a component configuration list;

[0007] Acquire second component data of a second preset component according to the component configuration list, and add the second preset component according to the second component data; wherein the second preset component is a cloned component;

[0008] Building a component tree according to the structural relationship between the first preset component and the second preset component;

[0009] Adjust the relationship between the components through the component tree to construct a component catalog;

[0010] Traversing the first component data and the second component data, and performing compatibility processing on different types of components in the first preset component and the second preset component;

[0011] Selecting a third preset component from the component catalog to obtain third component data of the third preset component;

[0012] Component rendering is performed according to the third component data to obtain a target component.

[0013] A designer component management method according to an embodiment of the present invention has at least the following beneficial effects: This embodiment first obtains first component data, including component attributes and component information, and adds a first preset component based on the first component data to construct the first preset component. Next, this embodiment obtains second component data for a second preset component from a component configuration list and adds the second preset component based on the second component data. By cloning the second preset component from the component configuration list, this method mitigates the errors easily caused by manual redevelopment, effectively saving manpower and time costs. Furthermore, this embodiment constructs a component tree based on the structural relationship between the first and second preset components, and adjusts the relationships between the components using the component tree to construct a component catalog. Next, this embodiment traverses the first and second component data to make different types of components in the first and second preset components compatible, achieving automated compatibility and alleviating component compatibility issues during manual development. Next, this embodiment selects a third preset component from the component catalog, obtains the corresponding third component data, and then renders the component based on the third component data to obtain the target component. This eliminates the need to reload component modules, reduces time costs, and effectively improves front-end performance and rendering efficiency.

[0014] According to some embodiments of the present invention, the third component data includes a data type and component internal parameters;

[0015] The performing component rendering according to the third component data to obtain a target component includes:

[0016] Modify the internal parameters of the component according to the data type, and render to obtain the target component.

[0017] According to some embodiments of the present invention, the data type includes a header type and a container type;

[0018] The step of modifying the internal parameters of the component according to the data type and rendering to obtain the target component includes:

[0019] When the data type is a title type, a title component is constructed according to a preset title style;

[0020] Alternatively, when the data type is a container type, a fourth preset component is constructed, and the fourth component data of the fourth preset component is modified according to the third component data to obtain a container component.

[0021] According to some embodiments of the present invention, performing compatibility processing on different types of components in the first preset component and the second preset component includes:

[0022] Compatibility processing is performed on different types of components in the first preset component and the second preset component according to the type field data; wherein both the first component data and the second component data include the type field data.

[0023] According to some embodiments of the present invention, after executing the step of constructing a component tree according to the structural relationship between the first preset component and the second preset component, the method further includes:

[0024] The component tree is modified through a preset modification operation; wherein the preset modification operation includes dragging a target element, adjusting a component hierarchical relationship, and adjusting a component position.

[0025] According to some embodiments of the present invention, after performing the step of obtaining the first component data, the method further includes:

[0026] Get associated parameters;

[0027] Add linkage components according to the association parameters.

[0028] According to some embodiments of the present invention, acquiring second component data of a second preset component according to the component configuration list includes:

[0029] Obtaining component cloning information; wherein the component cloning information includes the fifth preset component that needs to be cloned;

[0030] Acquire fifth component data of the fifth preset component through the component configuration list according to the component clone information;

[0031] The second component data is obtained by cloning the fifth component data.

[0032] On the other hand, an embodiment of the present invention further provides a designer component management system, including:

[0033] An acquisition module, configured to acquire first component data; wherein the first component data includes component attributes and component information;

[0034] A first building module is configured to add a first preset component according to the first component data to construct a component configuration list;

[0035] a cloning module, configured to obtain second component data of a second preset component according to the component configuration list, and add the second preset component according to the second component data; wherein the second preset component is a cloned component;

[0036] A second construction module, configured to construct a component tree according to the structural relationship between the first preset component and the second preset component;

[0037] A third construction module is used to adjust the relationship between the components through the component tree to construct a component catalog;

[0038] a compatibility processing module, configured to traverse the first component data and the second component data, and perform compatibility processing on different types of components in the first preset component and the second preset component;

[0039] a selection module, configured to select a third preset component from the component catalog and obtain third component data of the third preset component;

[0040] A rendering module is used to perform component rendering according to the third component data to obtain a target component.

[0041] On the other hand, an embodiment of the present invention further provides a designer component management system, including:

[0042] at least one processor;

[0043] at least one memory for storing at least one program;

[0044] When the at least one program is executed by the at least one processor, the at least one processor implements the designer component management method as described in the above embodiment.

[0045] On the other hand, an embodiment of the present invention further provides a computer storage medium storing a program executable by a processor, wherein the program executable by the processor is used to implement the designer component management method as described in the above embodiment when executed by the processor. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 is a flow chart of a designer component management method provided by an embodiment of the present invention;

[0047] Figure 2 This is a principle block diagram of a designer component management system provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0048] The embodiments described in the embodiments of this application should not be regarded as limitations of this application. All other embodiments obtained by ordinary technicians in this field without making any creative work are within the scope of protection of this application.

[0049] In the following description, reference is made to “some embodiments”, which describes a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0050] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application pertains. The terms used herein are for the purpose of describing the embodiments of this application only and are not intended to limit this application.

[0051] In the process of changes in the underlying architecture of some system platforms and updates and iterations of functions, the designer's property panel requires more different custom components, and the increasing number of components will put pressure on the performance of the front-end. This also leads to large differences in the property configurations of different components. In addition, due to the requirements and limitations of the user's on-site environment, the requirements for the internal information of custom components are also different, and batch redesign and component development are required, which is a time-consuming and labor-intensive process. In related technologies, when users want to use different components on the designer, the front-end needs to be redesigned or new components need to be added to re-render the property panel, which is very unfriendly to the front-end performance, and the visual performance of a re-rendered property panel is often more complex, and errors are prone to occur, resulting in failure to operate normally.

[0052] An embodiment of the present invention provides a designer component management method, system and storage medium, which can improve the front-end rendering efficiency and reduce manpower and time costs. Figure 1 The method of the embodiment of the present invention includes but is not limited to step S110, step S120, step S130, step S140, step S150, step S160, step S170 and step S180.

[0053] Specifically, the application process of the method of the embodiment of the present invention includes but is not limited to the following steps:

[0054] S110: Acquire first component data, wherein the first component data includes component attributes and component information.

[0055] S120: Add the first preset component according to the first component data, and construct a component configuration list.

[0056] S130: Acquire second component data of a second preset component according to the component configuration list, and add the second preset component according to the second component data, wherein the second preset component is a cloned component.

[0057] S140: Construct a component tree according to the structural relationship between the first preset component and the second preset component.

[0058] S150: Adjust the relationship between the components through the component tree to construct a component catalog.

[0059] S160: Traverse the first component data and the second component data, and perform compatibility processing on different types of components in the first preset component and the second preset component.

[0060] S170: Select a third preset component from the component catalog to obtain third component data of the third preset component.

[0061] S180: Component rendering is performed according to the third component data to obtain a target component.

[0062] During the operation of this specific embodiment, it first acquires first component data. Specifically, the first component data includes component properties and component information. This embodiment configures component properties and information by adding or editing a component on the component configuration page of the console. For example, the component name, description, module name, package name, main function, and whether the component is displayed are entered. The first component data acquired by this embodiment also includes component properties, such as setting input and output properties in the component's property panel and adding multiple rows of properties to a table. Each row of properties can include the Chinese name, English name, default input value, default display value, description, component type, parameter type, whether the property is required, and associated operations. Next, after the submission is confirmed, this embodiment converts the first component data from an array type to a JSON data type interface and transmits it to the backend for processing. Next, this embodiment adds a first preset component based on the first component data and constructs a component configuration list. Specifically, after the first component data is submitted, this embodiment generates the corresponding first preset component from the first component data. Simultaneously, a component configuration list is constructed based on the component data of each component, allowing users to view each component and its corresponding component data. Furthermore, this embodiment obtains the second component information of the second preset component based on the component configuration list and adds the second preset component based on the second component data. Specifically, in this embodiment, the second preset component is a cloned component. This embodiment uses the component configuration list to view all components and obtain the corresponding component data for each component. By cloning the required second component data from the component configuration list and adding the second preset component based on the second component data, this embodiment effectively reduces the workload of redeveloping or editing similar components and effectively improves component management efficiency. Next, this embodiment constructs a component tree based on the structural relationship between the first preset component and the second preset component. Specifically, this embodiment constructs a component tree to better display the structural relationship between the added components, such as the first preset component and the second preset component. The constructed component tree fully displays the hierarchical relationship between different components. Accordingly, this embodiment also allows the component tree to be adjusted by adding or removing levels. This embodiment then adjusts the relationships between components using the component tree to construct a component catalog. After constructing the component tree, this embodiment submits the component tree configuration to the designer front-end for rendering, resulting in a component catalog. Furthermore, this embodiment traverses the first component data and the second component data to perform compatibility processing on different types of components in the first and second preset components. Specifically, the types of components in the first and second preset components added in this embodiment may differ, which can easily lead to incompatibility issues between the components. This embodiment traverses each component to perform compatibility processing on different types of components, thereby achieving automated compatibility of components.Next, this embodiment selects the third preset component through the component directory, obtains the third component data of the third preset component, and performs component rendering according to the third component data to obtain the target component. Specifically, this embodiment drags different components in the component directory to select one of them to use as a process card. When the interface query is triggered, the component data of the corresponding component, that is, the third component data, such as the content and properties of the component, will be obtained, so that customized component rendering is performed according to the third component data to obtain the target component. This embodiment achieves customized rendering by obtaining the corresponding component from the component directory and automatically filling in the corresponding component data, content, style and attribute rules, thereby eliminating the need to reload the component module, reducing time costs, and effectively improving front-end performance and rendering efficiency.

[0063] In some embodiments of the present invention, the third component data includes data types and component internal parameters. Accordingly, in this embodiment, component rendering is performed based on the third component data to obtain a target component, including but not limited to:

[0064] Modify the internal parameters of the component according to the data type and render the target component.

[0065] In this specific embodiment, the third component data obtained through the component directory includes data types and component internal parameters. Specifically, the embodiment modifies the corresponding component internal parameters according to the data type in the third component data, thereby rendering the target component. For example, after obtaining the third component data, the embodiment compares the component data type and modifies the parameter name, parameter type, and parameter value of the component internal parameters, thereby avoiding reloading the component module and react node, effectively reducing the rendering volume and improving front-end performance.

[0066] In some embodiments of the present invention, the data type includes a title type and a container type. Accordingly, in this embodiment, the internal parameters of the component are modified according to the data type, and the target component is rendered, including but not limited to:

[0067] When the data type is a title type, the title component is constructed according to the preset title style.

[0068] Alternatively, when the data type is a container type, a fourth preset component is constructed, and the fourth component data of the fourth preset component is modified according to the third component data to obtain a container component.

[0069] In this specific embodiment, component data types include title and container classes. Specifically, this embodiment handles components differently for different fields. When the data type is a title type, this embodiment constructs a corresponding title component using a preset title style. For example, according to the preset title style, the name field is used as the content, and the description field is used as the text prompt, thereby constructing a title component. Furthermore, when the data type is a container type, this embodiment constructs a container component by constructing a fourth preset component and modifying the fourth component data of the fourth preset component based on the third component data. For example, when migrating an old version of a process to a new version, and the data type is a container class, this embodiment first adds a corresponding container component for the new version and compares the new version's container component data with the old version's container component data, specifically comparing the fourth component data with the third component data. Then, based on the relevant component data of the old version's container component, the parameter names, parameter types, and parameter values ​​of each parameter in the new version are modified, thereby constructing a container component suitable for the new version. This eliminates the need for manual redevelopment, effectively saving manpower and time costs.

[0070] In some embodiments of the present invention, different types of components in the first preset component and the second preset component are processed for compatibility, including but not limited to:

[0071] Compatibility processing is performed on different types of components in the first preset component and the second preset component according to the type field data, wherein both the first component data and the second component data include the type field data.

[0072] In this specific embodiment, this embodiment performs compatibility processing on different types of components in the first preset component and the second preset component based on the type field data. Specifically, in this embodiment, both the first component data and the second component data include type field data. This embodiment performs corresponding compatibility processing on different types through the type field data of each component. Exemplarily, this embodiment performs corresponding compatibility processing on different component types based on the value of the field "type". For example, if the value of the field "type" is 1, this embodiment regards this component as a python type input box and processes object type data. If the value of "type" is 2, this embodiment regards this component as an ordinary input box and processes string type data. At the same time, corresponding processing methods are also provided for components of picture type.

[0073] In some embodiments of the present invention, after executing the step of constructing a component tree according to the structural relationship between the first preset component and the second preset component, the designer component management method provided in this embodiment further includes but is not limited to:

[0074] Modify the component tree using preset modification operations, including dragging target elements, adjusting component hierarchical relationships, and adjusting component positions.

[0075] In this specific embodiment, after the component tree is constructed, the component tree can be modified accordingly through preset modification operations. Specifically, the preset modification operations in this embodiment include dragging the target element, adjusting the component hierarchical relationship, and adjusting the component position. After the component tree is constructed according to the added components, the complete component tree structure can be seen in the component tree to view the corresponding component hierarchical relationship. At the same time, this embodiment changes the hierarchical relationship of the components or changes the position of the components by dragging the corresponding parent elements or child elements. In addition, in this embodiment, a visible or invisible icon is provided next to each element, and the visible component will become an invisible icon after clicking the icon. It should be noted that the data of the invisible components in this embodiment will not be transmitted to the designer front end.

[0076] In some embodiments of the present invention, after performing the step of obtaining the first component data, the designer component management method provided in this embodiment further includes but is not limited to:

[0077] Gets the associated parameters.

[0078] Add linkage components based on associated parameters.

[0079] In this specific embodiment, after obtaining the first component data, this embodiment can also add corresponding secondary linkage. Specifically, this embodiment first obtains the linkage data to be added, that is, the association parameters, and then adds the linkage components according to the association parameters. This embodiment can achieve secondary linkage of components by obtaining the corresponding association parameters and adding the corresponding linkage components, that is, adding secondary linkage. It should be noted that the configuration method of the secondary components, that is, the linkage components, in this embodiment is the same as the configuration method of ordinary components.

[0080] In some embodiments of the present invention, obtaining the second component data of the second preset component according to the component configuration list includes but is not limited to:

[0081] Obtain component cloning information, wherein the component cloning information includes a fifth preset component that needs to be cloned.

[0082] The fifth component data of the fifth preset component is obtained through the component configuration list according to the component cloning information.

[0083] The second component data is obtained by cloning the fifth component data.

[0084] In this specific embodiment, this embodiment obtains component cloning information to obtain the fifth component data of the corresponding fifth preset component through the component configuration list according to the component cloning information, thereby cloning the second component data according to the fifth component data. Specifically, after constructing the component configuration list, this embodiment obtains the corresponding component cloning information by obtaining the cloned component clicked by the user. Among them, the component cloning information includes the information of the fifth preset component that needs to be cloned. Then, this embodiment obtains the fifth component data of the fifth preset component from the component configuration list through the component cloning information, and jumps to the add component page from the component configuration list. Correspondingly, the add component page has filled the fifth component data obtained from the component configuration list into the corresponding data position, thereby cloning the second component data according to the fifth component data. Then, in this embodiment, the user can modify the cloned second component data or directly submit the data to add the cloned component, thereby alleviating the workload problem caused by the re-development of similar components and effectively reducing manpower and time costs.

[0085] An embodiment of the present invention further provides a designer component management system, comprising:

[0086] The acquisition module is configured to acquire first component data, wherein the first component data includes component attributes and component information.

[0087] The first construction module is used to add a first preset component according to the first component data to construct a component configuration list.

[0088] The cloning module is used to obtain the second component data of the second preset component according to the component configuration list, and add the second preset component according to the second component data, wherein the second preset component is a cloned component.

[0089] The second building module is used to build a component tree according to the structural relationship between the first preset component and the second preset component.

[0090] The third building module is used to adjust the relationship between each component through the component tree to build a component catalog.

[0091] The compatibility processing module is used to traverse the first component data and the second component data, and perform compatibility processing on different types of components in the first preset component and the second preset component.

[0092] The selection module is used to select a third preset component through the component catalog and obtain third component data of the third preset component.

[0093] The rendering module is used to render the component according to the third component data to obtain the target component.

[0094] Reference Figure 2An embodiment of the present invention further provides a designer component management system, comprising:

[0095] At least one processor 210 .

[0096] At least one memory 220 is configured to store at least one program.

[0097] When the at least one program is executed by the at least one processor 210 , the at least one processor 210 implements the designer component management method described in the above embodiment.

[0098] An embodiment of the present invention further provides a computer-readable storage medium, which stores computer-executable instructions. The computer-executable instructions are executed by one or more control processors, for example, to execute the steps described in the above embodiment.

[0099] Those skilled in the art will appreciate that all or some of the steps and systems in the method disclosed above can be implemented as software, firmware, hardware, and appropriate combinations thereof. Some physical components or all physical components can be implemented as software executed by a processor, such as a central processing unit, a digital signal processor, or a microprocessor, or implemented as hardware, or implemented as an integrated circuit, such as an application-specific integrated circuit. Such software can be distributed on a computer-readable medium, and the computer-readable medium can include computer storage media (or non-transitory media) and communication media (or temporary media). As known to those skilled in the art, the term computer storage media is included in any method or technology for storing information (such as computer-readable instructions, data structures, program modules, or other data) and is volatile and non-volatile, removable, and non-removable. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory, or other memory technology, CD-ROM, digital versatile disks (DVD), or other optical disk storage, magnetic cassettes, magnetic tapes, disk storage, or other magnetic storage devices, or any other medium that can be used to store desired information and can be accessed by a computer. Furthermore, as is well known to those skilled in the art, communication media typically embodies computer-readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media.

[0100] The above is a specific description of the preferred implementation of the present invention, but the present invention is not limited to the above implementation. Those skilled in the art can make various equivalent modifications or substitutions without violating the spirit of the present invention. These equivalent modifications or substitutions are all included in the scope defined by the claims of the present invention.

Claims

1. A designer component management method, characterized in that: The following steps are involved: Acquire first component data; wherein the first component data includes component attributes and component information; Add a first preset component according to the first component data to construct a component configuration list; Acquire second component data of a second preset component according to the component configuration list, and add the second preset component according to the second component data; wherein the second preset component is a cloned component; Building a component tree according to the structural relationship between the first preset component and the second preset component; Adjust the relationship between the components through the component tree to construct a component catalog; Traversing the first component data and the second component data, and performing compatibility processing on different types of components in the first preset component and the second preset component; Selecting a third preset component from the component catalog to obtain third component data of the third preset component; Perform component rendering according to the third component data to obtain a target component; Wherein, the third component data includes data type and component internal parameters; The performing component rendering according to the third component data to obtain a target component includes: Modify the internal parameters of the component according to the data type, and render to obtain the target component; Wherein, the data type includes a title type and a container type; When the data type is a title type, a title component is constructed according to a preset title style; Alternatively, when the data type is a container type, a fourth preset component is constructed, and the fourth component data of the fourth preset component is modified according to the third component data to obtain a container component.

2. The designer component management method according to claim 1, characterized in that: The compatibility processing of different types of components in the first preset component and the second preset component includes: Compatibility processing is performed on different types of components in the first preset component and the second preset component according to the type field data; wherein both the first component data and the second component data include the type field data.

3. The designer component management method according to claim 1, characterized in that: After executing the step of constructing a component tree according to the structural relationship between the first preset component and the second preset component, the method further includes: The component tree is modified through a preset modification operation; wherein the preset modification operation includes dragging a target element, adjusting a component hierarchical relationship, and adjusting a component position.

4. The designer component management method according to claim 1, characterized in that: After executing the step of obtaining the first component data, the method further includes: Get associated parameters; Add linkage components according to the association parameters.

5. The designer component management method according to claim 1, characterized in that: The acquiring the second component data of the second preset component according to the component configuration list includes: Obtaining component cloning information; wherein the component cloning information includes a fifth preset component that needs to be cloned; Acquire fifth component data of the fifth preset component through the component configuration list according to the component clone information; The second component data is obtained by cloning the fifth component data.

6. A designer component management system, characterized in that: include: An acquisition module, configured to acquire first component data; wherein the first component data includes component attributes and component information; A first building module is configured to add a first preset component according to the first component data to construct a component configuration list; a cloning module, configured to obtain second component data of a second preset component according to the component configuration list, and add the second preset component according to the second component data; wherein the second preset component is a cloned component; A second construction module, configured to construct a component tree according to the structural relationship between the first preset component and the second preset component; A third building module is used to adjust the relationship between the components through the component tree to construct a component catalog; a compatibility processing module, configured to traverse the first component data and the second component data, and perform compatibility processing on different types of components in the first preset component and the second preset component; a selection module, configured to select a third preset component from the component catalog and obtain third component data of the third preset component; A rendering module, configured to perform component rendering according to the third component data to obtain a target component; Wherein, the third component data includes data type and component internal parameters; The performing component rendering according to the third component data to obtain a target component includes: Modify the internal parameters of the component according to the data type, and render to obtain the target component; Wherein, the data type includes a title type and a container type; When the data type is a title type, a title component is constructed according to a preset title style; Alternatively, when the data type is a container type, a fourth preset component is constructed, and the fourth component data of the fourth preset component is modified according to the third component data to obtain a container component.

7. A designer component management system, characterized in that: include: at least one processor; at least one memory for storing at least one program; When the at least one program is executed by the at least one processor, the at least one processor implements the designer component management method according to any one of claims 1 to 5.

8. A computer storage medium storing a program executable by a processor, characterized in that: The program executable by the processor is used to implement the designer component management method according to any one of claims 1 to 5 when executed by the processor.

Images