Front-end page style code generation method, system and equipment and storage medium

Abstract

According to the front-end page style code generation method, system and device and the storage medium provided by the invention, flattening processing and global coordinate calculation are carried out on a tree-nested layer tree structure, so that the real position of each layer can be accurately reflected; and the strategy of redefining the rendering hierarchy is adopted to ensure that father-son and brother relationships among the layers do not have coverage errors during rendering. The finally generated Web layer tree data comprises global coordinates and hierarchical priority information of each layer, and it is ensured that the finally generated front-end page style code can accurately reproduce the real position and the display sequence of each layer in the visual design file, so that the page and the visual design file are highly consistent; therefore, when the front-end style code is generated, the positioning, rendering hierarchy and style rule can be automatically generated according to the data structure of the Web layer tree data, so that the effects of high page reduction degree and accurate layout are realized. Meanwhile, the scheme improves the overall development efficiency.

Description

Background Art

[0002] In front-end development, the style code of front-end pages usually depends on the visual design files provided by designers. Visual design files are usually created by design tools (such as Figma, Sketch, Adobe XD, etc.) and contain a series of layers, each layer having different hierarchical relationships, coordinates, styles and other information.

[0003] In the traditional front-end development process, developers need to manually analyze visual design files and then write corresponding style code based on the layer information therein. The main problems of this method are as follows:

[0004] It requires developers to manually parse design files, analyze layer relationships, coordinates and other information one by one, and convert them into front-end code, which is time-consuming and laborious and has low efficiency. Due to the possible complex nested hierarchies and coordinate calculations in visual design files, manual conversion may lead to deviations and affect the final rendering effect. In addition, when the visual design file is modified, manual conversion needs to be carried out again, lacking automated support and affecting development efficiency.

[0005] Therefore, the process of writing the style code of front-end pages in the existing front-end development is inefficient.

[0006] It should be noted that the information disclosed in the above background art section is only used to enhance the understanding of the background of the present invention, and thus may include information that does not constitute the prior art known to those of ordinary skill in the art. Summary of the Invention

[0007] Aiming at the problems in the prior art, the purpose of the present invention is to provide a method, system, device and storage medium for generating front-end page style code, which overcomes the difficulties of the prior art and can solve the technical problem of low efficiency in the process of writing front-end page style code.

[0008] The first aspect of the present disclosure provides a method for generating front-end page style code, which includes:

[0009] Parsing a visual design file to obtain initial layer tree data, where the initial layer tree data includes a tree-like nested layer tree structure and the relative coordinates of each layer relative to its parent layer;

[0010] Flattening the tree-like nested layer tree structure, and converting the relative coordinates of each layer into global coordinates relative to the root layer;

[0011] According to the hierarchical relationship of the layer tree structure, assigning a new layer priority to each layer, where the layer priority is used to redefine the rendering layer of the corresponding layer;

[0012] Output Web layer tree data based on the global coordinates and the redefined layer hierarchy priorities, where the Web layer tree data is used to generate front-end page style code.

[0013] In an alternative embodiment, the converting the relative coordinates of each layer to global coordinates relative to the root layer includes:

[0014] Traverse the tree-like nested layer tree structure, and accumulate the relative coordinates of each layer with the global coordinates of all its parent layers to obtain the global coordinates relative to the root layer.

[0015] In an alternative embodiment, the traversing the tree-like nested layer tree structure, and accumulating the relative coordinates of each layer with the global coordinates of all its parent layers to obtain the global coordinates relative to the root layer includes:

[0016] Traverse the tree-like nested layer tree structure in pre-order traversal order. For each current layer other than the root layer, calculate the global coordinates of the current layer by reading the global coordinates of its parent layer and adding the relative coordinates of the current layer.

[0017] In an alternative embodiment, the assigning new layer hierarchy priorities to each layer according to the hierarchical relationship of the layer tree structure includes:

[0018] Access each layer in the layer tree structure in pre-order traversal order, and assign a layer hierarchy priority to each layer according to the pre-order traversal order, where the layer hierarchy priorities satisfy:

[0019] The layer hierarchy priority of a parent layer is less than the layer hierarchy priorities of all its child layers;

[0020] For multiple layers at the same level, their layer hierarchy priorities increase in the pre-order traversal order.

[0021] In an alternative embodiment, the assigning new layer hierarchy priorities to each layer according to the hierarchical relationship of the layer tree structure further includes:

[0022] When the global coordinates of multiple layers at the same level overlap, adjust the layer hierarchy priorities of multiple layers at the same level according to the original drawing order in the visual design file, so that the layer hierarchy priority of the layer drawn later is higher than that of the layer drawn earlier.

[0023] In an alternative embodiment, the adjusting the layer hierarchy priorities of multiple layers at the same level according to the original drawing order in the visual design file includes:

[0024] Traverse the layer tree structure in pre-order to access multiple layers at the same level in sequence, and adjust the hierarchical priorities of multiple layers at the same level according to the pre-order traversal order, so that the layer accessed later has a relatively higher hierarchical priority in the final Web layer tree data than the layer accessed earlier.

[0025] In an alternative embodiment, the parsing of the visual design file to obtain the initial layer tree data includes:

[0026] Identify the parent-child relationships of the layers in the visual design file and construct a tree-like nested layer tree structure;

[0027] Based on the attribute information of each layer in the visual design file, determine the relative coordinates of each sub-layer relative to its parent layer.

[0028] The second aspect of the present disclosure provides a front-end page style code generation system, which includes:

[0029] A parsing module that parses a visual design file to obtain initial layer tree data, where the initial layer tree data includes a tree-like nested layer tree structure and the relative coordinates of each sub-layer relative to its parent layer;

[0030] A coordinate conversion module that flattens the tree-like nested layer tree structure and converts the relative coordinates of each sub-layer into global coordinates relative to the root layer;

[0031] A hierarchical priority assignment module that redefines the rendering level of each sub-layer according to the hierarchical relationship of the layer tree structure and assigns a new hierarchical priority to each layer;

[0032] An output module that outputs Web layer tree data based on the global coordinates and the redefined hierarchical priorities, and the Web layer tree data is used to generate front-end page style code.

[0033] The third aspect of the present disclosure provides an electronic device, which includes:

[0034] A processor;

[0035] A memory that stores executable instructions of the processor;

[0036] Wherein, the processor is configured to execute the steps of the front-end page style code generation method described in any of the above embodiments by executing the executable instructions.

[0037] The fourth aspect of the present disclosure provides a computer-readable storage medium for storing a program, and when the program is executed, it implements the steps of the front-end page style code generation method described in any of the embodiments.

[0038] The front-end page style code generation method, system, device, and storage medium provided by the embodiments of the present disclosure have the following advantages:

[0039] By performing flattening processing and global coordinate calculation on the tree-like nested layer tree structure, the true position of each layer can be accurately reflected. And adopting the strategy of redefining the rendering level ensures that the parent-child and sibling relationships between layers will not have covering errors during rendering, thus greatly improving the rationality of the levels. The finally generated Web layer tree data contains the global coordinates and level priority information of each layer, ensuring that the finally generated front-end page style code can accurately reproduce the true positions and display order of the layers in the visual design file, so as to achieve a high degree of consistency between the page and the visual design file. When generating the front-end style code, it is possible to automatically generate positioning, rendering level, and style rules based on the data structure of this Web layer tree data, thereby achieving the effects of high page restoration and accurate layout.

[0040] At the same time, the automated parsing and generation process reduces the workload of development engineers for page layout, level calculation, and manual style writing, thereby reducing labor costs and subsequent maintenance work and improving the overall development efficiency.

[0041] Therefore, the front-end page style code generation solution provided by the embodiments of the present disclosure has the advantages of high automation, significantly improved development efficiency, high page restoration, and easy maintenance, and can effectively solve the problems of low efficiency, error-proneness, and high maintenance costs caused by manual parsing of visual design files in the prior art.

[0042] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Other features, objects, and advantages of the present invention will become more apparent by reading the detailed description of the non-limiting embodiments with reference to the following drawings.

[0044] Figure 1 Show a flowchart of a front-end page style code generation method provided by an embodiment of the present disclosure.

[0045] Figure 2 Show Figure 1 A schematic diagram of the layer relationship in the initial layer data in the front-end page style code generation method shown;

[0046] Figure 3 Show based on Figure 1 A schematic diagram of the layer relationship after flattening the layer relationship in the initial layer tree data by the front-end page style code generation method shown;

[0047] Figure 4 The flowchart showing the method for generating the front - end page style code provided by another embodiment of the present disclosure;

[0048] Figure 5 Show Figure 1 The code comparison diagram of the initial layer tree data and the Web layer tree data in the front - end page style code generation method shown;

[0049] Figure 6 The schematic diagram of the module structure of the front - end page style code generation system provided by an embodiment of the present disclosure;

[0050] Figure 7 The schematic diagram of the structure of the electronic device provided by an embodiment of the present disclosure;

[0051] Figure 8 It is the schematic diagram of the structure of the computer program product of an embodiment of the present disclosure. Specific embodiments

[0052] Example embodiments will now be described more fully with reference to the accompanying drawings. However, the example embodiments can be implemented in various forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be more complete and comprehensive, and will fully convey the concept of the example embodiments to those skilled in the art. The features, structures, or characteristics described may be combined in any suitable manner in one or more embodiments.

[0053] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus their repeated description will be omitted. Some of the block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0054] As Figure 1 shown, an embodiment of the present disclosure provides a method for generating front - end page style code, which includes but is not limited to the following steps:

[0055] Step 110: Parse the visual design file to obtain initial layer tree data, where the initial layer tree data includes a tree - like nested layer tree structure and the relative coordinates of each layer relative to its parent layer;

[0056] Step 120: Flatten the tree - like nested layer tree structure, and convert the relative coordinates of each layer into global coordinates relative to the root layer;

[0057] Step 130: Assign a new hierarchical priority to each layer according to the hierarchical relationship of the layer tree structure, where the hierarchical priority is used to redefine the rendering hierarchy of the corresponding layer;

[0058] Step 140: Output Web layer tree data based on the global coordinates and the redefined hierarchical priority, where the Web layer tree data is used to generate front-end page style code.

[0059] When the layer nesting structure in the existing visual design file is complex and the number of layers is large, the traditional method cannot accurately calculate the rendering hierarchy of the layers, resulting in problems such as incorrect page rendering or insufficient reduction. By using the front-end page style code generation method provided in the embodiments of the present disclosure, the visual design file can be automatically parsed, the layer tree structure can be extracted, and the relative coordinates of each layer can be converted into global coordinates relative to the root layer. Then, the rendering hierarchy of the layers can be redefined according to the layer hierarchical relationship and a new hierarchical priority can be assigned. Finally, accurate Web layer tree data is output. Its technical effects are reflected in:

[0060] By performing flattening processing and global coordinate calculation on the tree-like nested layer tree structure, the true position of each layer can be accurately reflected. The strategy of redefining the rendering hierarchy ensures that the parent-child and sibling relationships between layers will not have coverage errors during rendering, thus greatly improving the rationality of the hierarchy. The finally generated Web layer tree data contains the global coordinates and hierarchical priority information of each layer, ensuring that the finally generated front-end page style code can accurately reproduce the true position and display order of each layer in the visual design file, so as to achieve a high degree of consistency between the page and the visual design file. When generating the front-end style code, the positioning, rendering hierarchy, and style rules can be automatically generated based on the data structure of the Web layer tree data, thus achieving the effects of high page reduction and accurate layout.

[0061] At the same time, the automated parsing and generation process reduces the workload of development engineers for page layout, hierarchical calculation, and manual style writing, thereby reducing labor costs and subsequent maintenance work and improving the overall development efficiency.

[0062] Therefore, the front-end page style code generation solution provided in the embodiments of the present disclosure has the advantages of high automation, significantly improved development efficiency, high page reduction, and easy maintenance. It is applicable to Web front-end, mobile user interface (UI) generation, cloud service interfaces, and continuous integration environments, and can effectively solve the problems of low efficiency, error-proneness, and high maintenance costs caused by manual parsing of visual design files in the prior art.

[0063] The embodiments of the present disclosure are applicable to a variety of visual design file formats, including but not limited to Figma, Sketch, Adobe XD, etc. Taking Sketch files as an example, their internal structure is usually stored in JSON format, which includes the name, type, position, size, and hierarchical relationship of layers.

[0064] When performing step 110, first preprocess the visual design file to convert it into a unified internal data structure, which contains the following information: layer unique identifier (ID), layer name, parent layer identifier, list of child layers, relative coordinates of each child layer, layer size (width, height), style attributes (background color, border, transparency, etc.).

[0065] Among them, the root layer represents the entire canvas or page, the parent layer represents a certain container or group, and the child layer represents specific elements (text, image, button, etc.) therein.

[0066] Using the internal data structure in the preprocessed visual design file, which contains the complete layer tree structure information and the relative coordinates of each layer, further construct the initial layer tree data, in which the parent-child relationship and hierarchical nesting are clearly visible. The layer tree data constructed using this embodiment is the basis for subsequent coordinate conversion and hierarchical calculation, ensuring that all layer information can be utilized.

[0067] Exemplarily, as Figure 2 shown in the initial layer relationship described in the initial layer tree data, layer c is the root layer, and the coordinates are (x, y). Layers c1 and c2 are sibling layers, and their parent layer is layer c. The distances between the upper left corner of layer c1 and the upper left corner of layer c on the x-axis and y-axis are w1 and h1 respectively. According to the rules of sketch, the initial coordinates of layer c1 are (w1, h1), corresponding to the relative coordinates mentioned above. Similarly, layer c1 is the parent layer of layer c2, and the distances between the upper left corner of layer c2 and the upper left corner of layer c1 on the x-axis and y-axis are w2 and h2 respectively. Therefore, the initial coordinates of layer c2 are (w2, h2).

[0068] During the parsing process of the visual design file, the parent-child relationship of each layer is obtained, and the attribute information of each layer is saved in the data structure of the initial layer tree data, providing basic data for subsequent steps.

[0069] It should be noted that in the layer tree structure, only the root layer has no parent layer. Therefore, for the relative coordinates of each layer relative to its parent layer mentioned above, it should be understood as the relative coordinates of each layer except the root layer relative to its parent layer.

[0070] In a visual design file, the self - coordinates of the root layer are its global coordinates, and each layer outside the root layer is described using relative coordinates, which are all offsets relative to the parent layer. To achieve absolute positioning in a Web page, this embodiment proposes to convert the relative coordinates into global coordinates relative to the root layer. Specifically, converting the relative coordinates of each layer into global coordinates relative to the root layer includes:

[0071] Traverse the tree - like nested layer tree structure, and accumulate the relative coordinates of each layer with the global coordinates of all its parent layers to obtain the global coordinates relative to the root layer.

[0072] Its corresponding conversion formula is:

[0073] Global coordinates = relative coordinates of the sub - layer+global coordinates of all parent layers.

[0074] For example, for other layers except the root layer, each layer can be both a parent layer and a sub - layer at the same time. When traversing the layer tree structure, calculate the global coordinates of the current layer based on its corresponding parent layer. If the current layer further has sub - layers, calculate the global coordinates of the sub - layer based on the current layer and its parent layer.

[0075] Exemplarily, if the relative coordinates of a sub - layer "button" are (50, 30), and the global coordinates of its parent layer "Container A" are (100, 200), then the global coordinates of the "button" are (150, 230).

[0076] If a sub - layer has multiple layers of parent layers, accumulate the relative coordinates of the layer with the relative coordinates of all its parent layers until the root layer to obtain the global coordinates relative to the root layer.

[0077] This embodiment of the present disclosure traverses the layer tree structure in a recursive traversal or iterative traversal manner. The specific steps are as follows:

[0078] Initialize the root layer: For the root layer, its global coordinates are its self - coordinates (usually (0, 0) or the origin coordinates specified in the visual design file);

[0079] Recursively traverse the sub - layers: For each current layer outside the root layer, calculate the global coordinates of the current layer by reading the global coordinates of its parent layer and adding the relative coordinates of the current layer;

[0080] Update the data structure: Store the calculated global coordinates in the data record of the current sub - layer for use in subsequent hierarchical adjustment and style generation.

[0081] Therefore, in this embodiment, the tree-like nested layer tree structure is traversed in preorder. For each current layer other than the root layer, the global coordinates of the current layer are calculated by reading the global coordinates of its parent layer and adding the relative coordinates of the current layer.

[0082] The preorder traversal order is: first visit the current node (root layer node) in the layer tree structure, then visit the left subtree, and finally visit the right subtree (or in a multi-way tree, visit all child nodes in sequence). Among them, the preorder traversal can be implemented in a recursive traversal or an iterative traversal manner.

[0083] In the embodiment of the present disclosure, after obtaining the global coordinates of each layer, step 130 is executed to redefine the rendering level of the corresponding layer by assigning a new layer priority to each layer.

[0084] The rendering level refers to the order in which each layer or element is visually displayed during the page rendering process, that is, which element covers which element when finally presented in the user interface. For example, if a certain layer is displayed above or below another layer, it reflects its rendering level. The layer priority, on the other hand, refers to the numerical value or sorting basis used to determine the rendering level, such as the commonly used z-index in CSS. The layer priority is a calculated or assigned numerical value that determines the relative order of each layer in the rendering level.

[0085] Therefore, the rendering level is the final visual effect, that is, which element on the page is in the front and which is in the back. The layer priority is the technical means to achieve this visual effect. By assigning a priority value (such as z-index) to each layer, the rendering order is controlled. In other words, the layer priority value directly affects the determination of the rendering level.

[0086] Therefore, as a numerical index, the layer priority will be calculated and adjusted according to the relationships between layers (such as parent-child relationships, drawing order, global coordinate overlap, etc.), and the rendering level is the result of this calculation, and is displayed in sequence according to the layer priority level during page rendering, so as to achieve the correct layer covering effect.

[0087] In the embodiment of the present disclosure, the rendering level of each layer follows the following principles:

[0088] Parent-child level relationship: The rendering level value of the child layer is greater than that of its parent layer. This principle ensures that during the Web page rendering process, the child layer is always above the parent layer, thus avoiding occlusion problems.

[0089] If they are not in a parent-child hierarchical relationship, when any two layers are under the same parent node, if the root node of the subtree where a certain layer is located is on the right side of the root node of the subtree where another layer is located (that is, it is further back according to the hierarchical relationship), then the rendering level of this layer is higher than that of the other layer.

[0090] In this case, according to the hierarchical relationship of the layer tree structure, new layer priority levels are assigned to each layer, including:

[0091] Assign layer priority levels according to the hierarchical relationship of the layer tree structure, such that the priority level of a child layer is greater than that of its parent layer;

[0092] If any two layers are sibling nodes and have a common parent node, and the global coordinates of one layer are further back relative to the second layer, then the priority level of the one layer is higher than that of the other layer.

[0093] Specifically, in this embodiment, a preorder traversal method is used to process the layer tree structure, and increasing priority levels are assigned to each layer. The specific steps are as follows:

[0094] Use the preorder traversal method to visit each layer in the layer tree structure in sequence. First, visit the root layer, and then visit its child layers in sequence;

[0095] According to the preorder traversal order, assign a priority level to each layer, and the priority level satisfies:

[0096] The priority level of the parent layer is less than the priority levels of all its child layers;

[0097] For layers at the same level, their priority levels increase in the preorder traversal order.

[0098] In the layer tree structure, preorder traversal is a specific traversal order, and its access order is: root node → left subtree → right subtree. This traversal method is closely related to the hierarchical relationship of the tree. Specifically, in preorder traversal, the root node is visited first, and then its left subtree and right subtree are visited in sequence. This means that the root node is visited before its subtrees, reflecting the hierarchical structure of the tree; for each subtree, preorder traversal first visits its root node, and then recursively visits its left subtree and right subtree. This recursive access order is consistent with the hierarchical relationship of the tree, ensuring that each node is visited before its parent node.

[0099] Therefore, the order of preorder traversal reflects the hierarchical structure of the tree. The root node is at the front, followed by its child nodes, and so on, reflecting the nested levels of the tree.

[0100] In the embodiments of the present disclosure, there is no order restriction between step 120 and step 130, and they may also be in the same order. Exemplarily, taking the sketch design draft as an example, for the layer tree structure in the initial layer tree data (JSON data), there are the following rules:

[0101] (1) If there is a layer a that is a descendant node of layer b, then the level of layer a is greater than that of layer b;

[0102] (2) If the condition (1) is not satisfied and layers a and b have a nearest common parent node, and the root node of the subtree where layer a is located is the right sibling node of the root node of the subtree where layer b is located, then the level of layer a is greater than that of layer b.

[0103] Referring to the above rules, the levels in the layer tree structure in the sketch design draft conform to the pre-order traversal order of the tree. Therefore, referring to Figure 2 , accessing the layer tree structure in the pre-order traversal order, that is, the access order is: c>c1>c2, and the access order is the layer level size. The steps for flattening the layers are as follows:

[0104] (1) Access layer c: Since layer c is the root layer, its level priority is 1, and its coordinates do not need to be changed. Directly pass its own coordinates to sub-layers c1 and c2;

[0105] (2) Access layer c1: Define the level priority as 2. The parent layer of layer c1 is layer c. Therefore, the relative coordinates of layer c1 need to be accumulated. After calculation, the global coordinates of layer c1 are (x+w1, y+h1), and the calculated global coordinates are passed to sub-layer c2;

[0106] (3) Access layer c2: Define the level priority as 3. The parent layer of layer c2 is layer c2. Similarly, after calculation, the coordinates of layer c2 are (x+w1+w2, y+h1+h2).

[0107] Referring to Figure 3 , after processing, the layer relationship is flattened and a new layer attribute is also assigned.

[0108] In a further embodiment of the present disclosure, when the global coordinates of multiple layers at the same level overlap, the level priorities of multiple layers at the same level are adjusted according to the original drawing order in the visual design file, so that the level priority of the later-drawn layer is higher than that of the earlier-drawn layer.

[0109] Therefore, when it is detected that the global coordinates of multiple sub-layers at the same level (i.e., under the same parent layer) in the layer tree structure overlap, the system will call the original drawing order in the visual design file as a supplementary basis.

[0110] Specifically, obtain the original drawing order of these overlapping layers in the visual design file, and adjust their layer priority levels according to this original drawing order, so that the layers with a later original drawing order obtain a higher layer priority level. In this way, the layers drawn later in the visual design file will cover the layers drawn earlier when displayed.

[0111] As an implementation method, it can also be:

[0112] Traverse the layer tree structure in a pre-order traversal manner to sequentially access multiple layers at the same level, and adjust the layer priority levels of multiple layers at the same level according to the pre-order traversal order, so that the layers accessed later have a relatively higher layer priority level in the final Web layer tree data compared to the layers accessed earlier.

[0113] Exemplarily, assume that there are two child layers A and B under the same parent layer, and their global coordinates are both (150, 230). If in the visual design file, the original drawing order of layer A is less than that of layer B, then after adjustment, the layer priority level of layer B will be higher than that of layer A, that is, in the finally output Web layer tree data, the layer priority level of layer B will be greater than that of layer A, so as to ensure that layer B covers layer A in page rendering.

[0114] In the embodiments of the present disclosure, by adopting a pre-order traversal and overlapping adjustment algorithm, it is ensured that the child layers are always higher than the parent layers, and adjustments are made according to the original drawing order of the visual design file in case of overlap, so that in the finally generated Web layer tree data, the layer hierarchy relationship of each layer is completely consistent with the visual design file, thereby ensuring that the front-end page rendering effect accurately restores the design draft.

[0115] After the above steps, the system will generate a data table containing the final layer priority levels of all layers. This data table, as a component of the Web layer tree data, provides a basis for generating subsequent page style codes.

[0116] In the embodiments of the present disclosure, the Web layer tree data includes the following fields: layer identifier (ID), global coordinates (x, y), layer priority level (such as z-index value), and other style attributes (such as width, height, background color, border, transparency, etc.).

[0117] In the embodiments of the present disclosure, as Figure 4 shown, after obtaining the Web layer tree data, the front-end page style code can be generated immediately. Specifically, the method for generating the front-end page style code includes the following steps:

[0118] Step 410: Parse the visual design file to obtain initial layer tree data, where the initial layer tree data includes a layer tree structure nested in a tree shape and the relative coordinates of each layer relative to its parent layer;

[0119] Step 420: Flatten the tree - nested layer tree structure, and convert the relative coordinates of each layer into global coordinates relative to the root layer;

[0120] Step 430: According to the hierarchical relationship of the layer tree structure, assign a new layer priority to each layer, and the layer priority is used to re - define the rendering layer of the corresponding layer;

[0121] Step 440: Output Web layer tree data based on the global coordinates and the re - defined layer priority;

[0122] Step 450: Generate front - end page style code based on the Web layer tree data.

[0123] In this embodiment, through the Web layer tree data, the global coordinates, layer priorities, and style attributes of each layer are integrated into a unified data structure. When generating the front - end page style code, positioning, layer, and style rules can be automatically generated according to this data structure, so as to achieve the effect of high page restoration and accurate layout.

[0124] Exemplarily, taking the generation of CSS style code as an example, the specific steps are as follows:

[0125] First, parse the Web layer tree data, including traversing all layers in the data structure of the Web layer tree data, and reading the global coordinates, layer priorities, and style attributes of each layer.

[0126] Next, generate CSS code snippets. That is, for each layer, generate corresponding positioning code (such as position, left, top) according to its global coordinates, generate the z - index attribute according to the layer priority, and generate other CSS rules according to the style attributes.

[0127] Finally, integrate and generate a complete CSS file, that is, integrate the CSS code snippets of all layers to generate a complete CSS file, and this file can be directly applied to the front - end page.

[0128] As Figure 5 shown, the left column is the HTML code, which corresponds to the layer hierarchy relationship in the visual design file above, and the right column is the CSS code, which corresponds to the positioning, layer priority, and other style attributes described in the Web layer tree data output after parsing and calculation, and is used to control the appearance and layout of each page element.

[0129] Figure 6 is a schematic diagram of a module of an embodiment of the front - end page style code generation system provided by an embodiment of the present disclosure. As Figure 6As shown, the front-end page style code generation system of the present disclosure includes, but is not limited to:

[0130] A parsing module 610 that parses a visual design file to obtain initial layer tree data, where the initial layer tree data includes a tree-like nested layer tree structure and the relative coordinates of each sub-layer relative to its parent layer;

[0131] A coordinate conversion module 620 that flattens the tree-like nested layer tree structure and converts the relative coordinates of each sub-layer into global coordinates relative to the root layer;

[0132] A layer hierarchy priority assignment module 630 that redefines the rendering hierarchy of each sub-layer according to the hierarchical relationship of the layer tree structure and assigns a new layer hierarchy priority to each layer;

[0133] An output module 640 that outputs Web layer tree data based on the global coordinates and the redefined layer hierarchy priority, and the Web layer tree data is used to generate front-end page style code.

[0134] In an alternative embodiment, the coordinate conversion module 620 is specifically configured to:

[0135] Traverse the tree-like nested layer tree structure, accumulate the relative coordinates of each layer with the global coordinates of all its parent layers, and obtain the global coordinates relative to the root layer.

[0136] In an alternative embodiment, the coordinate conversion module 620 is further specifically configured to:

[0137] Traverse the tree-like nested layer tree structure in a pre-order traversal order. For each current layer other than the root layer, calculate the global coordinates of the current layer by reading the global coordinates of its parent layer and adding the relative coordinates of the current layer.

[0138] In an alternative embodiment, the layer hierarchy priority assignment module 630 is specifically configured to:

[0139] Traverse each layer in the layer tree structure in a pre-order traversal order, and assign a layer hierarchy priority to each layer according to the pre-order traversal order, where the layer hierarchy priority satisfies:

[0140] The layer hierarchy priority of the parent layer is less than the layer hierarchy priorities of all its sub-layers;

[0141] For multiple layers at the same level, their layer hierarchy priorities increase in the pre-order traversal order.

[0142] In an alternative embodiment, the layer hierarchy priority assignment module 630 is further specifically configured to:

[0143] When the global coordinates of multiple layers at the same level overlap, adjust the layer hierarchy priorities of the multiple layers at the same level according to the original drawing order in the visual design file, so that the layer hierarchy priority of the later-drawn layer is higher than that of the earlier-drawn layer.

[0144] In an alternative embodiment, the layer hierarchy priority allocation module 630 is specifically further configured to:

[0145] Traverse the layer tree structure in a pre-order traversal manner to sequentially access multiple layers at the same level, and adjust the layer hierarchy priorities of the multiple layers at the same level according to the pre-order traversal order, so that the layer hierarchy priority of the later-accessed layer is relatively higher than that of the earlier-accessed layer in the final Web layer tree data.

[0146] In an alternative embodiment, the parsing module 610 is specifically configured to:

[0147] Identify the parent-child relationship of the layers in the visual design file and construct a tree-like nested layer tree structure;

[0148] Based on the attribute information of each layer in the visual design file, determine the relative coordinates of each sub-layer relative to the parent layer.

[0149] This system is composed of a parsing module 610, a coordinate conversion module 620, a layer hierarchy priority allocation module 630, and an output module 640. Each module can be interconnected through a data interface to jointly implement the automatic generation of the front-end page style code. This system can be embedded into the front-end development tool as an independent software module, or can provide an interface as a cloud service for developers to remotely call.

[0150] Using the front-end page style code generation system of this embodiment, through the flattening process and global coordinate calculation of the tree-like nested layer tree structure, the true position of each layer is accurately reflected. And adopting the strategy of redefining the rendering hierarchy ensures that the parent-child and sibling relationships between layers will not have overlay errors during rendering, thus greatly improving the rationality of the hierarchy. The finally generated Web layer tree data contains the global coordinates and layer hierarchy priority information of each layer, ensuring that the finally generated front-end page style code can accurately reproduce the true positions and display order of the layers in the visual design file, so as to achieve a high degree of consistency between the page and the visual design file. When generating the front-end style code, it can automatically generate positioning, rendering hierarchy, and style rules based on the data structure of this Web layer tree data, thus achieving the effects of high page restoration and accurate layout.

[0151] At the same time, the automated parsing and generation process reduces the workload of development engineers for page layout, hierarchy calculation, and manual style writing, thus reducing labor costs and subsequent maintenance work, and improving the overall development efficiency.

[0152] Therefore, the front-end page style code generation solution provided by the embodiments of the present disclosure has the advantages of high automation, significantly improved development efficiency, high page restoration degree, and easy maintenance, and can effectively solve the problems of low efficiency, error-proneness, and high maintenance costs caused by manual parsing of visual design files in the prior art.

[0153] An embodiment of the present invention further provides a front-end page style code generation device, including a processor and a memory in which executable instructions of the processor are stored. Among them, the processor is configured to execute the steps of the front-end page style code generation method by executing the executable instructions.

[0154] As shown above, the front-end page style code generation device of the embodiment of the present invention can accurately reflect the real position of each layer by performing flattening processing and global coordinate calculation on the tree-like nested layer tree structure, and adopting the strategy of redefining the rendering level ensures that the parent-child and sibling relationships between layers will not cause overlay errors during rendering, thus greatly improving the rationality of the levels. The automated parsing and generation process reduces the workload of development engineers for page layout, level calculation, and manual style writing, thereby reducing labor costs and subsequent maintenance work, and improving the overall development efficiency.

[0155] Those skilled in the art of the present technology can understand that various aspects of the present invention can be implemented as a system, a method, or a program product. Therefore, various aspects of the present invention can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software aspects, which can be collectively referred to as "circuitry", "module", or "platform" here.

[0156] Figure 7 is a schematic structural diagram of the front-end page style code generation device of the present invention. The following refers to Figure 7 to describe the electronic device 700 according to this embodiment of the present invention. Figure 7 The electronic device 700 shown is only an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0157] As Figure 7 shown, the electronic device 700 is presented in the form of a general-purpose computing device. The components of the electronic device 700 may include, but are not limited to: at least one processing unit 710, at least one storage unit 720, a bus 730 connecting different platform components (including the storage unit 720 and the processing unit 710), a display unit 740, etc.

[0158] Among them, the storage unit stores program code that can be executed by the processing unit 710, enabling the processing unit 710 to execute the steps according to various exemplary embodiments of the present invention described in the above front-end page style code generation method section of this specification. For example, the processing unit 710 can execute steps such as Figure 1 or those shown in 4.

[0159] The storage unit 720 can include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 7201 and / or a cache storage unit 7202, and can further include a read-only storage unit (ROM) 7203.

[0160] The storage unit 720 can also include a program / utility 7204 having a set (at least one) of program modules 7205. Such program modules 7205 include but are not limited to: a processing system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include the implementation of a network environment.

[0161] The bus 730 can represent one or more of several types of bus structures, including a storage unit bus or a storage unit controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any bus structure in a variety of bus structures.

[0162] The electronic device 700 can also communicate with one or more external devices 800 (such as a keyboard, a pointing device, a Bluetooth device, etc.), and can also communicate with one or more devices that enable a user to interact with the electronic device 700, and / or communicate with any device that enables the electronic device 700 to communicate with one or more other computing devices (such as a router, a modem, etc.). Such communication can be carried out through the input / output (I / O) interface 750. And the electronic device 700 can also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through the network adapter 760. The network adapter 760 can communicate with other modules of the electronic device 700 through the bus 730. It should be understood that although not shown in the figure, other hardware and / or software modules can be used in combination with the electronic device 700, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, etc.

[0163] An embodiment of the present invention further provides a computer-readable storage medium for storing a program, and the steps of the method for generating the front-end page style code are implemented when the program is executed. In some possible implementation manners, various aspects of the present invention can also be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present invention described in the above front-end page style code generation method section of this specification.

[0164] As Figure 8 shown, the computer program product 900 for implementing the above method according to an embodiment of the present invention may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the computer program product of the present invention is not limited thereto. In this document, the readable storage medium may be any tangible medium that contains or stores a program, and the program may be used by or in combination with an instruction execution system, apparatus, or device.

[0165] The computer program product may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may, for example, but not be limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0166] The computer-readable storage medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries the readable program code. Such a propagated data signal may take various forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The readable storage medium may also be any readable medium other than the readable storage medium, and the readable medium may send, propagate, or transmit a program for use by or in combination with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination of the above.

[0167] The program code for performing the processing of the present invention can be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also including conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computing device, partially on the user's device, executed as an independent software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (e.g., by connecting through the Internet using an Internet service provider).

[0168] In summary, the object of the present invention is to provide a method, system, device and storage medium for generating front-end page style code. By flattening the tree-like nested layer tree structure and calculating the global coordinates, the true position of each layer can be accurately reflected. The strategy of redefining the rendering hierarchy ensures that the parent-child and sibling relationships between layers will not be covered incorrectly during rendering, thus greatly improving the rationality of the hierarchy. The finally generated Web layer tree data contains the global coordinates and layer priority information of each layer, ensuring that the finally generated front-end page style code can accurately reproduce the true position and display order of each layer in the visual design file, so as to achieve a high degree of consistency between the page and the visual design file. When generating the front-end style code, the positioning, rendering hierarchy and style rules can be automatically generated according to the data structure of the Web layer tree data, thus achieving the effects of high page restoration and accurate layout. At the same time, the automated parsing and generation process reduces the workload of development engineers for page layout, layer calculation and manual style writing, thus reducing the labor cost and subsequent maintenance work and improving the overall development efficiency.

[0169] The above content is a further detailed description of the present invention in combination with specific preferred embodiments. It cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention belongs, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, which should all be regarded as belonging to the protection scope of the present invention.

Claims

1. A method for generating a front-end page style code, characterized in that: include: Parsing the visual design file to obtain initial layer tree data, wherein the initial layer tree data includes a tree-nested layer tree structure and relative coordinates of each layer relative to its parent layer; Flattening the tree-like nested layer tree structure, and converting the relative coordinates of each layer into global coordinates relative to the root layer; According to the hierarchical relationship of the layer tree structure, a new hierarchical priority is assigned to each layer, and the hierarchical priority is used to redefine the rendering level of the corresponding layer; Web layer tree data is output based on the global coordinates and the redefined hierarchical priority, and the Web layer tree data is used to generate a front-end page style code.

2. The method for generating front-end page style code according to claim 1, characterized in that: The step of converting the relative coordinates of each layer into global coordinates relative to the root layer includes: The tree-like nested layer tree structure is traversed, and the relative coordinates of each layer are accumulated with the global coordinates of all its parent layers to obtain the global coordinates relative to the root layer.

3. The method for generating front-end page style code according to claim 2, characterized in that: The traversing of the tree-like nested layer tree structure, accumulating the relative coordinates of each layer with the global coordinates of all its parent layers, and obtaining the global coordinates relative to the root layer, includes: The tree-like nested layer tree structure is traversed sequentially by using pre-order traversal, and for each current layer other than the root layer, the global coordinates of the current layer are calculated by reading the global coordinates of its parent layer and adding the relative coordinates of the current layer.

4. The method for generating front-end page style code according to claim 1, characterized in that: The step of allocating a new hierarchical priority to each layer according to the hierarchical relationship of the layer tree structure includes: Each layer in the layer tree structure is visited in sequence using a pre-order traversal order, and a level priority is assigned to each layer according to the pre-order traversal order. The level priority satisfies: The hierarchy priority of the parent layer is lower than the hierarchy priority of all its child layers; For multiple layers at the same level, their layer priorities increase in pre-order traversal order.

5. The method for generating front-end page style code according to claim 4, characterized in that: The step of allocating a new hierarchical priority to each layer according to the hierarchical relationship of the layer tree structure further includes: When the global coordinates of multiple layers at the same level overlap, the hierarchical priorities of the multiple layers at the same level are adjusted according to the original drawing order in the visual design file, so that the hierarchical priority of the layer drawn later is higher than the layer drawn earlier.

6. The method for generating front-end page style code according to claim 5, characterized in that: The step of adjusting the hierarchical priorities of the plurality of layers at the same level according to the original drawing order in the visual design file includes: The layer tree structure is traversed in a pre-order traversal manner to access multiple layers at the same level in sequence, and the hierarchical priorities of the multiple layers at the same level are adjusted according to the pre-order traversal order, so that the hierarchical priority of the later visited layers in the final Web layer tree data is higher than that of the later visited layers.

7. The method for generating front-end page style code according to claim 1, characterized in that: The parsing of the visual design file to obtain initial layer tree data includes: Identify the parent-child relationship of the layers in the visual design file and construct a tree-like nested layer tree structure; The relative coordinates of each sublayer relative to the parent layer are determined based on the attribute information of each layer in the visual design file.

8. A front-end page style code generation system, characterized in that: include: A parsing module, parsing the visual design file to obtain initial layer tree data, wherein the initial layer tree data includes a tree-nested layer tree structure and relative coordinates of each sublayer relative to the parent layer; A coordinate conversion module is used to flatten the tree structure of the tree-like nested layers, and convert the relative coordinates of each sub-layer into global coordinates relative to the root layer; A hierarchical priority allocation module, which redefines the rendering level of each sublayer according to the hierarchical relationship of the layer tree structure, and allocates a new hierarchical priority to each layer; An output module outputs Web layer tree data based on the global coordinates and the redefined hierarchical priority, wherein the Web layer tree data is used to generate a front-end page style code.

9. An electronic device, characterized in that: include: processor; a memory storing executable instructions of the processor; Wherein, the processor is configured to execute the steps of the front-end page style code generation method described in any one of claims 1 to 7 by executing the executable instructions.

10. A computer-readable storage medium for storing a program, characterized in that: When the program is executed, the steps of the front-end page style code generation method described in any one of claims 1 to 7 are implemented.

Images