Page layout code generation method and device, electronic equipment and storage medium

Abstract

The application relates to the technical field of computer front-end development, and discloses a page layout code generation method and device, electronic equipment and a storage medium, which comprises the following steps: obtaining target design data, and extracting boundary box data and space level data of each to-be-laid-out component in the target design data; performing coordinate variance analysis according to the boundary box data of each to-be-laid-out component, and determining a main axis layout direction of a target container in the target design data; based on the main axis layout direction and the space level data, reconstructing a layout sequence of the plurality of to-be-laid-out components, and obtaining a page topology structure; and generating corresponding page layout code according to the page topology structure. The application can be applied to page construction scenes containing dense data and layered interaction in finance, medical treatment and the like, can improve the analysis capability of page logic semantic structure and real layered intention, and can further improve the maintainability of generated code and prevent business data mispositioning and shielding.

Description

Technical Field

[0001] This application relates to the field of computer front-end development technology and can be applied to data page construction scenarios such as finance and healthcare. In particular, it relates to a method, device, electronic device and storage medium for generating page layout code. Background Technology

[0002] In the field of web development, the common techniques for converting visual design drafts into front-end page code are code generation based on absolute coordinate positioning or layout transformation based on row and column cutting based on fixed physical boundaries.

[0003] The inventors realized that existing conversion schemes rely excessively on the surface physical boundaries of elements for cutting or positioning, lacking the identification and analysis of the page's inherent logical semantic structure and the true visual layering intent. Especially in application scenarios involving finance, healthcare, etc., which contain dense data or frequent layered interactions, this approach is prone to causing misalignment, obstruction, or functional failure of critical business data when adapting to multiple terminals, resulting in poor maintainability of the final generated code. Summary of the Invention

[0004] This invention provides a page layout code generation method, apparatus, electronic device, and storage medium to solve the technical problem that existing solutions, due to their over-reliance on surface physical boundaries, lack the ability to parse the page's logical semantic structure and true layering intent, resulting in poor maintainability of the generated code and a tendency for misalignment and obstruction of business data.

[0005] To achieve the above objectives, a first aspect of this application proposes a method for generating page layout code, comprising: Obtain the target design data, and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; Based on the bounding box data of each component to be laid out, perform coordinate variance analysis to determine the main axis layout direction of the target container in the target design data; Based on the main axis layout direction and the spatial hierarchy data, the layout sequence of multiple components to be laid out is reconstructed to obtain the page topology structure. Generate corresponding page layout code based on the page topology.

[0006] To achieve the above objectives, a second aspect of this application provides a page layout code generation apparatus, the apparatus comprising: The acquisition module is used to acquire target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out in the target design data; The determination module is used to perform coordinate variance analysis based on the bounding box data of each component to be laid out, and to determine the main axis layout direction of the target container in the target design data; The reconstruction module is used to reconstruct the layout sequence of multiple components to be laid out based on the main axis layout direction and the spatial hierarchy data to obtain the page topology structure. The generation module is used to generate corresponding page layout code based on the page topology.

[0007] To achieve the above objectives, a third aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0008] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0009] The solution implemented by the above-mentioned page layout code generation method, device, electronic device, and storage medium can acquire target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; perform coordinate variance analysis based on the bounding box data of each component to be laid out to determine the main axis layout direction of the target container in the target design data; based on the main axis layout direction and spatial hierarchy data, reconstruct the layout sequence of multiple components to be laid out to obtain the page topology; and generate the corresponding page layout code based on the page topology. In this application, targeting page construction scenarios involving dense data and layered interactions, such as finance and healthcare, this solution first uses coordinate variance analysis to determine the main axis direction by utilizing the statistical distribution dispersion of component coordinates. This eliminates the dependence on the alignment of the physical boundaries of the component surface and can objectively accommodate staggered layouts and alignment deviations in the design data. Second, this solution combines spatial hierarchy data to reconstruct the layout sequence, transforming the originally independent and flat components into a page topology structure with sequential order and depth dimensions, thereby achieving effective separation of the normal document flow and the actual layering intent. The above steps enable the final generated code to have a flexible structure arranged according to the actual logical relationship of the components. This solves the technical problem of existing solutions that, due to over-reliance on the physical boundaries of the surface, lack the ability to parse the logical semantic structure and actual layering intent of the page, resulting in poor maintainability of the generated code and susceptibility to misalignment and occlusion of business data. Attached Figure Description

[0010] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0011] Figure 1 This is a schematic diagram of an application environment for a page layout code generation method according to an embodiment of the present invention; Figure 2 This is a flowchart of the page layout code generation method provided in the embodiments of this application; Figure 3 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 4 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 5 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 6 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 7 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 8 This is another flowchart of the page layout code generation method provided in the embodiments of this application; Figure 9 This is a schematic diagram of the structure of the page layout code generation device provided in the embodiments of this application; Figure 10 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention; Figure 11 This is another structural schematic diagram of a computer device according to one embodiment of the present invention. Detailed Implementation

[0012] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0013] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0014] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0015] In the field of web development, the common techniques for converting visual design drafts into front-end page code are code generation based on absolute coordinate positioning or layout transformation based on row and column cutting based on fixed physical boundaries.

[0016] The inventors realized that existing conversion schemes rely excessively on the surface physical boundaries of elements for cutting or positioning, lacking the identification and analysis of the page's inherent logical semantic structure and the true visual layering intent. Especially in application scenarios involving finance, healthcare, etc., which contain dense data or frequent layered interactions, this approach is prone to causing misalignment, obstruction, or functional failure of critical business data when adapting to multiple terminals, resulting in poor maintainability of the final generated code.

[0017] Based on this, embodiments of this application provide a page layout code generation method, apparatus, device, and storage medium, aiming to solve the technical problem that existing solutions lack the ability to parse the page's logical semantic structure and true layering intent due to excessive reliance on surface physical boundaries, resulting in poor maintainability of the generated code and easy occurrence of misalignment and obstruction of business data.

[0018] The page layout code generation method, apparatus, device, and storage medium provided in this application are specifically described through the following embodiments. First, the page layout code generation method in this application embodiment is described.

[0019] The page layout code generation method provided in this embodiment of the invention can be applied to, for example, Figure 1In this application environment, the client communicates with the server via a network. The server can obtain the target design data from the client and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; it performs coordinate variance analysis based on the bounding box data of each component to be laid out to determine the main axis layout direction of the target container in the target design data; based on the main axis layout direction and spatial hierarchy data, it reconstructs the layout sequence of multiple components to be laid out to obtain the page topology; it generates the corresponding page layout code based on the page topology and feeds the page layout code back to the client. In this invention, targeting page construction scenarios involving dense data and layered interactions, such as finance and healthcare, this solution first uses coordinate variance analysis to determine the main axis direction by utilizing the statistical distribution dispersion of component coordinates. This eliminates the dependence on the alignment of the physical boundaries of the component surface and can objectively accommodate staggered arrangements and alignment deviations in the design data. Second, this solution combines spatial hierarchy data to reconstruct the layout sequence, transforming the originally independent and flat components into a page topology structure with sequential order and depth dimensions, thereby achieving effective separation of the normal document flow and the actual layering intent. The above steps enable the final generated code to have a flexible structure arranged according to the actual logical relationship of the components. This solves the technical problem of existing solutions that, due to excessive reliance on the physical boundaries of the surface, lack the ability to parse the logical semantic structure and actual layering intent of the page, resulting in poor maintainability of the generated code and susceptibility to misalignment and occlusion of business data. The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a separate server or a server cluster composed of multiple servers. The invention will be described in detail below through specific embodiments.

[0020] Figure 2 This is an optional flowchart of the page layout code generation method provided in the embodiments of this application. Figure 2 The method may include, but is not limited to, steps S201 to S204.

[0021] Step S201: Obtain the target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data.

[0022] Step S202: Perform coordinate variance analysis based on the bounding box data of each component to be laid out to determine the main axis layout direction of the target container in the target design data.

[0023] Step S203: Based on the main axis layout direction and spatial hierarchy data, the layout sequence of multiple components to be laid out is reconstructed to obtain the page topology structure.

[0024] Step S204: Generate the corresponding page layout code based on the page topology.

[0025] In some embodiments of step S201, the target design data is the original visual design input during the front-end development process, which can specifically be represented as a structured file exported by design software or parsed interface description data. In application scenarios containing multi-source data, such as medical information management interfaces or financial data display dashboards, the page often contains a large number of dense and partially overlapping design elements. After obtaining the target design data, its internal node tree or layer structure is traversed to extract the bounding box data and spatial hierarchy data of each component to be laid out. The bounding box data is mainly used to characterize the geometric and physical boundaries of the component in the two-dimensional plane, specifically covering the component's width, height, and its coordinate parameters within the target container, such as the horizontal and vertical coordinates of the top-left vertex. The spatial hierarchy data is used to characterize the stacking order attribute of the component in the depth direction perpendicular to the screen, such as the z-index parameter commonly used in front-end development. This data provides a data foundation for subsequently reconstructing the real stacked interaction intent, such as financial transaction confirmation pop-ups or medical medication warnings.

[0026] In some embodiments of step S202, traditional layout conversion methods often rely on the physical boundaries of components for cutting or alignment. When faced with staggered arrangements or minor alignment deviations in design data caused by human factors, logical judgment errors are easily generated. Therefore, this embodiment introduces coordinate variance analysis to determine the main extension direction of the container from a statistical perspective. This application embodiment introduces the statistical method of coordinate variance analysis, rather than simply relying on the alignment state of component edges. Variance is mathematically used to measure the dispersion of a set of data. Specifically, based on the bounding box data corresponding to each component to be laid out, the variance of the coordinate data of these components in different coordinate axis directions is calculated. When the coordinate variance in a certain direction is relatively large, it indicates that the components within the container have higher dispersion and extension in that direction, thus objectively reflecting the main visual direction of the designer when arranging content in that area from a statistical perspective. Through this statistical dimension of dispersion analysis and judgment, it is possible to effectively accommodate and avoid component misalignment or irregular arrangement caused by human operation in the design data, thereby determining the true main axis layout direction of the target container.

[0027] Please see Figure 3 In some embodiments, step S202 may include, but is not limited to, steps S301 to S304.

[0028] Step S301: Extract the center point coordinates of each component to be laid out within the target container.

[0029] Step S302: Calculate the first and second coordinate variances of each center point on the horizontal and vertical axes, respectively.

[0030] Step S303: Compare the first coordinate variance with the second coordinate variance, and determine the main axis layout direction as horizontal when the first coordinate variance is greater than the product of the second coordinate variance and the preset direction sensitivity threshold.

[0031] Step S304: When the variance of the second coordinate is greater than the product of the variance of the first coordinate and the orientation sensitivity threshold, the main axis layout direction is determined to be the vertical direction.

[0032] In some embodiments of step S301, in order to perform discreteness statistics in subsequent steps, it is first necessary to determine a mathematical reference point that can represent the spatial position of each component. After obtaining the bounding box data of the multiple components to be laid out within the target container, coordinates are calculated for each independent component within the target container using the physical size parameters of its bounding box. Specifically, the coordinates of the top-left vertex of the bounding box can be obtained, and combined with the width and height values ​​of the component, the coordinates of its center point on the two-dimensional plane can be obtained through geometric center calculation. Compared with edge-aligned coordinates, these center point coordinates can reduce statistical errors caused by the different sizes of the components, thereby providing a unified quantitative basis for subsequent determination of the principal axis distribution.

[0033] In some embodiments of step S302, after extracting the center point coordinates of all components to be laid out, a variance algorithm from statistics is introduced to quantify the aggregation and dispersion of these components along the two-dimensional spatial axes. Specifically, based on the coordinate values ​​of the center points of all components within the target container along the horizontal axis, the average of the sum of squares of their deviations relative to the average horizontal coordinate is calculated to obtain the first coordinate variance; similarly, based on the coordinate values ​​of the center points of each component along the vertical axis, the average of the sum of squares of their deviations relative to the average vertical coordinate is calculated to obtain the second coordinate variance. The value of the first coordinate variance reflects the distribution span of the component group in the horizontal direction, while the second coordinate variance reflects its arrangement span in the vertical direction. This dual-axis variance calculation transforms the visual layout into mathematical statistical features.

[0034] In some embodiments of step S303, after obtaining the coordinate variances of the two axes, to avoid the inability to determine the components when they are arranged in a nearly square pattern due to similar variances, this embodiment introduces a direction-sensitive threshold for weighted comparison. This direction-sensitive threshold acts as an adjustment coefficient to balance or amplify the determination sensitivity in both the horizontal and vertical directions. By comparing the results of multiplying the first coordinate variance by the second coordinate variance and then by the direction-sensitive threshold, when the first coordinate variance is numerically greater than the product, it statistically indicates that the dispersion of the components within the target container along the horizontal axis is dominant. Based on this mathematical relationship, the true main axis layout direction within the target container can be adaptively determined to be horizontal, thus allowing for slight overlap or alignment deviations in the vertical direction of the components.

[0035] In some embodiments of step S304, corresponding to the above-described horizontal direction determination logic, for the variance comparison results of the same group of components, when it is found that the value of the second coordinate variance is greater than the result of the first coordinate variance multiplied by the direction sensitivity threshold, it indicates that the data distribution dispersion of the components to be laid out in the target container on the vertical axis is much greater than that on the horizontal axis. This indicates that the corresponding local area adopts a top-down or bottom-up layout flow. Therefore, based on the fulfillment of this condition, the main axis layout direction of the target container is determined to be the vertical direction.

[0036] Through steps S301 to S304 above, this embodiment of the application reduces the interference caused by component size differences by introducing center point coordinates, and uses statistical variance to objectively quantify the discrete extension trend of the component group in the two-dimensional axis. Combined with the weighted comparison by the direction-sensitive threshold, it can effectively avoid the misjudgment of the cutting direction caused by the protrusion or misalignment of a few components in the traditional algorithm, and realize the efficient identification of the main layout direction inside the target container. It can solve the technical problem that the existing solution is prone to errors in the main axis direction analysis due to local irregular arrangement when dealing with complex interlaced layouts.

[0037] Please see Figure 4 In some embodiments, before step S203, the method provided in this application embodiment may include, but is not limited to, steps S401 to S402.

[0038] Step S401: Quantify the arrangement characteristics of multiple components to be laid out using a preset disorder evaluation model to obtain the corresponding visual disorder index.

[0039] Step S402: Compare the visual clutter index with a preset safety threshold. If the visual clutter index exceeds the safety threshold, reconstruct the layout sequence of multiple components to be laid out.

[0040] In some embodiments of step S401, before entering the topology reconstruction process, it is necessary to pre-judge the structural health and layout rationality of the original target design data. Specifically, by analyzing each component to be laid out within the target container, layout status features reflecting the differences between visual presentation and underlying code structure are extracted. These features often characterize potential structural anomalies or non-standard layout behaviors in the design file. Subsequently, the extracted layout status features are input into a preset disorder assessment model for mathematical calculation. This disorder assessment model performs a comprehensive quantitative evaluation based on multiple feature data, ultimately outputting a specific numerical value, namely the visual disorder index. This index can objectively quantify the degree of clutter in the component layout within the current design area and the severity of deviation from standard front-end document flow specifications, thus providing data basis for determining whether deep structural reorganization is necessary.

[0041] Please see Figure 5 In some embodiments, the arrangement state features include negative margin ratio features, absolute negative value sum features, and reverse order features. Step S401 may include, but is not limited to, steps S501 to S504.

[0042] Step S501: Calculate the percentage of components using negative margin attributes within the target container to obtain the negative margin ratio feature.

[0043] Step S502: Extract the margin values ​​of each component to be laid out that are less than the preset negative value threshold, and calculate the sum of the absolute values ​​of each margin value to obtain the absolute negative value sum feature.

[0044] Step S503: By comparing the visual spatial arrangement order determined based on the bounding box data of multiple components to be laid out with the original node tree traversal order of multiple components to be laid out in the target design data, the sequence inversion difference is calculated, and the inversion degree feature is obtained.

[0045] Step S504: Using preset weighting coefficients, the negative margin ratio feature, the total absolute negative value feature, and the inversion degree feature are weighted and summed to obtain the visual confusion index.

[0046] In some embodiments of step S501, the extensive use of negative margins (such as negative margin properties in CSS styles) during the visual restoration of the front-end page indicates forced overlap or abnormal physical offsets in the original design data. To quantify the structural risks caused by these unconventional offsets, it is necessary to scan the distribution of component attributes within the target container. Specifically, all components to be laid out within the container are traversed, and the number of components configured with negative margin properties is selected and counted. Then, the proportion of this number to the total number of components to be laid out within the target container is calculated. This calculation result is the negative margin ratio feature, which intuitively reflects the distribution ratio of unconventional alignment and forced position fine-tuning methods within the local layout area.

[0047] In some embodiments of step S502, in addition to considering the distribution ratio of negative margin attributes in the components, it is also necessary to assess the severity of their deviation from the normal document flow. During actual calculation, specific margin values ​​are extracted from each component to be laid out and compared with a preset negative threshold. This preset negative threshold is typically used to filter out minor offsets within the normal tolerance range (such as minor adjustments of a few pixels). For margin values ​​that are numerically smaller than the preset negative threshold, their absolute values ​​are taken and summed. The resulting sum of absolute negative values ​​quantifies, from a numerical perspective, the degree of spatial compromise made by the components within the entire container to achieve a specific visual splicing effect.

[0048] In some embodiments of step S503, the hierarchical order of layers or nodes in the design file does not always align with the visual flow presented to the user. To measure this difference between the underlying logical structure and the surface visual presentation, a visual spatial arrangement order that conforms to intuitive reading habits is first derived based on the component bounding box data, such as the common top-to-bottom or left-to-right arrangement. Simultaneously, the original node tree traversal order inherent in the target design data during input is extracted. Using edit distance or inversion pair statistical algorithms, these two sequence relationships are compared to calculate the sequence inversion difference in the arrangement flow. This difference is defined as the inversion degree feature, which characterizes the degree of disorder in the original layer structure when converted to a standard flexible layout document flow.

[0049] In some embodiments of step S504, the negative margin ratio feature, the sum of absolute negative values ​​feature, and the inversion degree feature are weighted and summed using preset weighting coefficients to obtain a visual confusion index. After obtaining the three independent features reflecting the breadth of design redundancy, the depth of offset, and the degree of spatial logic disorder, preset weighting coefficients for each feature are retrieved. These coefficients can be adaptively adjusted according to different business development specifications. Subsequently, the extracted negative margin ratio feature, sum of absolute negative values ​​feature, and inversion degree feature are multiplied by their corresponding weighting coefficients, and the product results are accumulated to complete the weighted summation calculation of multiple factors. The resulting comprehensive value is the visual confusion index, which provides a quantitative parameter for determining the health of the current code structure.

[0050] In some embodiments of step S402, a preset safety threshold represents the maximum tolerance for non-standard component layout during automatic code generation. By comparing the calculated visual clutter index with this safety threshold, dynamic control flow can be implemented: when the visual clutter index exceeds the preset safety threshold, it indicates that the current design data area contains numerous unconventional designs, severe overlapping or redundant non-standard positioning. Generating code directly without intervention would result in extremely poor code maintainability and responsiveness. Therefore, triggered by this condition, a layout sequence reconstruction mechanism for multiple components to be laid out will be forcibly initiated to correct these deep-seated structural defects.

[0051] In some embodiments of step S203, after clarifying the macroscopic layout of the target container, the scattered visual components need to be reorganized into a structure conforming to computer document flow specifications. The reconstruction process utilizes the aforementioned determined main axis layout direction and the spatial hierarchy data inherent in the components. First, the main axis layout direction provides a benchmark for the linear arrangement of components, enabling multiple components at the same level to be laid out in an orderly sequence according to visual logic. Second, the spatial hierarchy data serves as a reference for the depth dimension, used to sort out the complex spatial relationships between components caused by visual overlay, separating the true layered interaction intent from ordinary tiling content. After comprehensive reconstruction, the originally scattered set of components maintained only by coordinates is transformed into a page topology structure with clear hierarchical wrapping relationships and sequential order. This page topology structure is essentially a tree-like or network-like logical model that reflects the true semantic relationships between components.

[0052] Please see Figure 6 In some embodiments, step S203 may include, but is not limited to, steps S601 to S603.

[0053] Step S601: Based on the main axis layout direction, group the multiple components to be laid out using a preset visual reading tolerance threshold to divide at least one visual layout group.

[0054] Step S602: Within any visual layout group, rearrange multiple components to be laid out in ascending order according to the coordinate sequence of the secondary axis direction perpendicular to the main axis layout direction.

[0055] Step S603: Construct the page topology structure based on the two-dimensional arrangement sequence of multiple components to be laid out after rearrangement and the elastic margin attribute determined based on the coordinate difference between adjacent components to be laid out.

[0056] In step S601 of some embodiments, after determining the flow direction of the target container, in order to merge the components to be laid out, which were originally discretely distributed in two-dimensional space, into a clearly structured row and column flow, a spatial aggregation degree analysis along the main axis projection is performed on the multiple components to be laid out in the container based on the previously determined main axis layout direction. In this process, the visual reading tolerance threshold is used as a boundary control parameter to define the maximum coordinate deviation limit that visually belongs to the same row. It can filter out irregular misalignments caused by fine-tuning or manual dragging by the designer. For example, when the main axis layout direction is determined to be horizontal, if the difference between the upper boundary or center point coordinates of two adjacent components to be laid out on the vertical coordinate axis perpendicular to the main axis is less than the visual reading tolerance threshold, then the two components are determined to belong to the same horizontal flow in visual reading logic, and are thus classified into the same visual layout group. In financial transaction scenarios, this step can accurately group multiple real-time indicator cards that are misaligned due to different heights and sizes into the same row; in medical management system scenarios, it can also logically bind vital sign input boxes and corresponding unit labels to the same horizontal row group, thereby achieving structured initial screening of flat layer data.

[0057] In step S602 of some embodiments, at least one independent visual layout group has been established through the aforementioned grouping operation. However, since the layer storage order in the input design data is usually random, the inherent logical topological relationship of each component within the group still needs further sorting. Therefore, a sequence correction of the secondary axis dimension is carried out for the component set within each visual layout group. The secondary axis direction refers to the axis direction that is orthogonal and perpendicular to the already determined main axis layout direction in a two-dimensional coordinate system. The physical position coordinates of each component to be laid out in the group in the secondary axis direction are extracted, and a one-dimensional ascending coordinate sequence is established according to the numerical arrangement rule from smallest to largest. Taking the horizontal main axis as an example, the corresponding secondary axis is the horizontal X-axis. Multiple components in the same row of visual layout groups are rearranged in ascending order according to the X-axis coordinate sequence from left to right, thereby ensuring that the logical chain of components within the group conforms to the natural visual reading habit of humans from left to right.

[0058] In step S603 of some embodiments, after grouping and rearranging within groups, a two-dimensional layout sequence reflecting the visual framework of the interface is obtained. This sequence clarifies the logical flow of components, specifying which is built first and which is built later. At this point, to transform these relative positional relationships into a box model structure that can adapt and dynamically scale in front-end development, it is necessary to calculate the bounding box coordinate difference between two components to be laid out in adjacent physical positions in the rearrangement sequence. This coordinate difference is mapped and derived into the compliant space occupancy parameter that the corresponding component should be configured in the flex flow layout, i.e., the flex margin attribute. This flex margin attribute is usually expressed as a relative measure such as margin or padding in the front-end stylesheet. Finally, the data flow containing the wrapping relationships of each layout group, the two-dimensional rearrangement sequence of components within the group, and the dynamically configured flex margin attribute is formatted and assembled into a tree-like linked list, thereby constructing a page topology model that represents the final code structure.

[0059] Through steps S601 to S603, a highly fault-tolerant grouping mechanism is established in the main axis direction by introducing a visual reading tolerance threshold. Combined with the coordinate ascending reordering in the secondary axis direction, the sequential logic flow of components is reshaped. With the dynamic derivation of the boundary coordinate difference into the adaptive elastic margin attribute, the transformation from absolute positioning coordinates to relative box model topology is completed at the underlying data level. This enables the generated page topology structure to stably restore the real row and column layout structure contained in the design layer. It effectively eliminates hard-coded redundancy and hierarchical chaos caused by code splitting. It can solve the technical problem that existing solutions, when facing dense data or non-standard alignment layout scenarios, lack the analysis of spatial alignment tolerance and reading flow, resulting in low code reconstruction success rate and easy multi-terminal adaptation errors.

[0060] Please see Figure 7 In some embodiments, step S203 may include, but is not limited to, steps S701 to S704.

[0061] Step S701: Detect overlapping component pairs among multiple components to be laid out, and calculate the percentage of overlapping area between the two components to be laid out in the overlapping component pair.

[0062] Step S702: If the overlap area ratio is greater than the preset area threshold, then calculate the difference in the layer values ​​of the two components to be laid out based on the spatial layer data.

[0063] Step S703: If the difference in layer values ​​is greater than the preset layer safety threshold, then the component with the larger spatial layer data among the two components to be laid out is determined as the absolute positioning node.

[0064] Step S704: If the difference in layer values ​​is not greater than the layer safety threshold, then the spacing of the two components to be laid out in the overlapping component pair is split and reconstructed.

[0065] In step S701 of some embodiments, during the process of converting discrete components into a standard flexible document flow, spatial conflicts on the two-dimensional plane are the main factor causing misalignment and occlusion of the code page. To accurately locate these potential visual interference points, a global traversal is performed within the target container using a geometric intersection algorithm based on the previously extracted bounding box data of each component to be laid out. When two components to be laid out are found to overlap in the spatial coordinate domain, they are marked as an overlapping component pair. Subsequently, the area of ​​the overlapping region between these two components is further calculated, and this overlapping area is divided by the total area of ​​the smaller component to obtain the overlap area ratio. This ratio provides a quantitative basis for subsequent judgment of whether component overlap is due to minor edge contact or structural overlap.

[0066] In step S702 of some embodiments, not all geometric overlaps of components need to be treated as layout errors and forcibly separated. For example, slight overlaps at the edges of design layers often do not affect actual readability and are within normal design tolerance. Therefore, a preset area threshold is introduced for preliminary conditional filtering. When the overlap area ratio of an overlapping component pair exceeds the preset area threshold, it indicates that there is a substantial visual overlap relationship between the two. At this time, the previously extracted spatial hierarchy data is called to obtain the hierarchy attribute values ​​of the two components in the overlapping component pair, calculate the difference in hierarchy values ​​between them, and use the third-dimensional depth parameter to analyze the cause of the large-area overlap of components, so as to distinguish whether the overlap is a deliberate interaction design by the designer or a layout conflict caused by non-standard alignment.

[0067] In step S703 of some embodiments, a preset hierarchical security threshold is used to perform business logic diversion verification based on the obtained hierarchical numerical difference. When the difference is greater than the hierarchical security threshold, it logically confirms that the two overlapping components originally belonged to different visual interaction layers with a large span. For example, in a medical information management scenario, there is a "high-risk medication blocking warning" overlaid on the underlying electronic medical record text, or in a financial data display scenario, there is a "secondary transaction confirmation" floating pop-up overlaid on high-frequency real-time transactions. The true intention of such functional components is to break away from the underlying tiled document flow and form visual occlusion. Therefore, in response to this condition, during the code generation and topology construction stage, the overlapping component is forcibly marked and determined as an absolutely positioned node to center the component to be laid out in a higher layer. This ensures that such components break away from the conventional elastic flow arrangement, retain their true spatial floating and layered interaction intentions, and prevent the failure of critical business functions.

[0068] In step S704 of some embodiments, contrary to the above, when the system comparison finds that the difference in the layer values ​​is not greater than the layer safety threshold, it indicates that the two overlapping components should logically belong to the same tiled reading layer, such as medical vital sign index values ​​and unit labels in the same horizontal row. The overlap is caused by misoperation in the design tool or layer size compression, which is a layout position conflict defect. If such unintentional interference is not handled, it is very easy to cause text clipping or unreadable business data after the code is generated. Therefore, according to the aforementioned determined main axis and secondary axis direction flow, the two components to be laid out are spatially split and reconstructed. By dynamically inserting reasonable elastic margins or resetting the arrangement coordinates between them, the two are returned to a two-dimensional document flow that does not infringe on each other, thereby ensuring the structural rigor and data clarity of the final displayed page.

[0069] In some embodiments of step S204, since the page topology has already internalized the component arrangement order and hierarchical nesting relationship, the code generation process only needs to traverse the node hierarchy of this topology to generate the corresponding structured markup language. Simultaneously, the relative positions and hierarchical relationships between components are converted into compliant stylesheet attribute code, rather than static absolute coordinate values. Through this conversion step, the final output page layout code can follow the browser's standard document flow rendering rules, possessing good structural clarity and code readability.

[0070] Please see Figure 8 In some embodiments, the method provided in this application may further include, but is not limited to, steps S801 to S804.

[0071] Step S801: The target design data is divided into multiple independent regional blocks using a spatial hashing algorithm, and a corresponding regional feature fingerprint is configured for each regional block.

[0072] Step S802: When the target design data undergoes local changes, the changed block with attribute changes is determined by comparing the regional feature fingerprints before and after the change.

[0073] Step S803 involves re-extracting the bounding box data and spatial hierarchy data of the changed block, performing coordinate variance analysis to determine the main axis layout direction, and reconstructing the layout sequence to obtain the updated changed block topology.

[0074] Step S804 involves concatenating the variable block code fragment generated based on the variable block topology with the unchanged area block code to generate the modified page layout code.

[0075] In step S801 of some embodiments, in practical application scenarios such as ultra-large electronic medical record systems in the medical field or multi-screen distribution terminals in the financial field, the target design data often contains massive layers and complex nested components. If the entire page is fully parsed every time code is generated, it will consume a lot of the system's algorithm computing power and memory resources. To this end, this embodiment introduces a spatial hashing algorithm to reduce the dimensionality and segment the ultra-large design view. In specific implementation, based on the two-dimensional spatial coordinate system, the design canvas is cut into multiple independent grids or regional blocks with clear boundaries. For each segmented regional block, a hash calculation is performed based on the attribute set of the components to be laid out inside it (such as the number of components, coordinate distribution, layer style parameters, etc.) to generate a hash string that can uniquely identify the current internal state of the block, i.e., the regional feature fingerprint.

[0076] In step S802 of some embodiments, during the dynamic editing of the front-end page or the incremental iteration of the design draft, designers typically only make minor adjustments to specific local areas, such as modifying the width of a financial data card or adjusting the position of a medical vital signs input box. When such a local change is detected, it is not necessary to retrace the entire document node tree; instead, it is only necessary to recalculate the current feature fingerprint of each area block and quickly compare it with the historical feature fingerprint cached before the change. If the feature fingerprint of a certain area block is completely consistent before and after the change, it indicates that the components inside that area are not affected; if the comparison finds that the feature fingerprint has changed, it is logically determined that the node attributes or physical locations inside that area have changed, and these fingerprint mismatched blocks are accurately locked and marked as changed blocks to be processed.

[0077] In step S803 of some embodiments, after locking the changed block, the original structural parsing process for the entire page is limited to the physical boundary of the changed block. Specifically, only for the component set within the changed block, the core low-level parsing logic is re-executed: the bounding boxes and spatial hierarchy data of local components are extracted, the main axis layout direction within the local area is re-evaluated using coordinate variance calculation, and multi-dimensional sequence rearrangement and cascading conflict verification combined with spatial hierarchy are performed within the local scope. Through this local reconstruction operation with regional isolation, a logical model reflecting the latest layout relationship of the area can be quickly generated, i.e., the updated changed block topology. This step effectively avoids repeated calculations in unchanged areas, significantly reducing the algorithm's execution time overhead.

[0078] In step S804 of some embodiments, after completing the topology reconstruction of the local area, the corresponding variable block code fragments are first generated independently according to the updated variable block topology structure. Simultaneously, the historical stored code corresponding to blocks whose feature fingerprints have not changed is directly retrieved from the code cache pool. Finally, using a preset code syntax tree structure, the newly generated variable block code fragments are embedded into the corresponding node positions of the original code tree, completing the code-level assembly. After this hot update integration process, complete page layout code synchronized with the latest design state can be output externally.

[0079] Through steps S801 to S804, by introducing spatial hashing technology to segment and configure fingerprints for large-scale views, millisecond-level precise tracking of local design changes is achieved. Simultaneously, by combining isolation reconstruction and existing code caching and splicing mechanisms, complex layout derivation calculations are strictly limited to the smallest unit where changes occur. This mechanism avoids the burden of full parsing and solves the technical problem of existing technologies lacking incremental hot update mechanisms when processing dynamic iterations of large medical electronic medical records or dense financial data pages, resulting in high system algorithm resource consumption and extremely low code generation performance. This improves engineering conversion efficiency and system responsiveness.

[0080] Through steps S201 to S204 above, for page construction scenarios involving dense data and layered interactions, such as finance and healthcare, this solution first uses coordinate variance analysis to determine the main axis direction by utilizing the statistical distribution dispersion of component coordinates. This mechanism eliminates the dependence on the alignment of the physical boundaries of the component surface and can objectively accommodate the staggered arrangement and alignment deviations in the design data. Second, this solution combines spatial hierarchy data to reconstruct the layout sequence, transforming the originally independent and flat components into a page topology structure with sequential order and depth dimensions, thereby achieving effective separation of normal document flow and true layering intent at the underlying logic level. The above steps enable the final generated code to have a flexible structure arranged according to the true logical relationship of the components, which can solve the technical problem of existing solutions lacking the ability to parse the page's logical semantic structure and true layering intent due to over-reliance on the physical boundaries of the surface, resulting in poor maintainability of the generated code and easy occurrence of misalignment and occlusion of business data.

[0081] Please see Figure 9 This application also provides a page layout code generation apparatus that can implement the above-described page layout code generation method. The apparatus includes: The acquisition module is used to acquire the target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; The determination module is used to perform coordinate variance analysis based on the bounding box data of each component to be laid out, and to determine the main axis layout direction of the target container in the target design data; The reconstruction module is used to reconstruct the layout sequence of multiple components to be laid out based on the main axis layout direction and spatial hierarchy data, so as to obtain the page topology structure. The generation module is used to generate the corresponding page layout code based on the page topology.

[0082] In some embodiments, the determining module is specifically used for: Extract the center point coordinates of each component to be laid out within the target container; Calculate the first and second coordinate variances of each center point on the horizontal and vertical axes, respectively. The first coordinate variance is compared with the second coordinate variance, and when the first coordinate variance is greater than the product of the second coordinate variance and the preset direction sensitivity threshold, the main axis layout direction is determined to be horizontal. When the variance of the second coordinate is greater than the product of the variance of the first coordinate and the orientation sensitivity threshold, the orientation of the main axis layout is determined to be vertical.

[0083] In some embodiments, the refactoring module is further configured to: The arrangement characteristics of multiple components to be laid out are quantitatively calculated using a pre-defined disorder assessment model to obtain the corresponding visual disorder index. The visual clutter index is compared with a preset safety threshold. If the visual clutter index exceeds the safety threshold, the layout sequence of multiple components to be laid out is reconstructed.

[0084] In some embodiments, the refactoring module is further configured to: The percentage of components using negative margins within the target container is counted to obtain the negative margin ratio characteristic. Extract the margin values ​​of each component to be laid out that are less than a preset negative threshold, and calculate the sum of the absolute values ​​of each margin value to obtain the feature of the sum of absolute negative values; By comparing the visual spatial arrangement order determined based on the bounding box data of multiple components to be laid out with the original node tree traversal order of multiple components to be laid out in the target design data, the sequence inversion difference is calculated, and the inversion degree feature is obtained. The visual confusion index is obtained by weighting and summing the negative margin ratio feature, the total absolute negative value feature, and the inversion degree feature using preset weighting coefficients.

[0085] In some embodiments, the refactoring module is specifically used for: Based on the main axis layout direction, multiple components to be laid out are grouped using a preset visual reading tolerance threshold, and at least one visual layout group is defined. Within any visual layout group, multiple components to be laid out are rearranged in ascending order according to the coordinate sequence of the secondary axis direction perpendicular to the main axis layout direction. The page topology is constructed based on the two-dimensional arrangement sequence of multiple components to be laid out after rearrangement and the elastic margin attribute determined by the coordinate difference between adjacent components to be laid out.

[0086] In some embodiments, the refactoring module is further configured to: Detect overlapping component pairs among multiple components to be laid out, and calculate the percentage of overlapping area between the two components to be laid out in the overlapping component pair. If the overlap area ratio is greater than the preset area threshold, the difference in the layer values ​​of the two components to be laid out is calculated based on the spatial layer data. If the difference in the hierarchical values ​​is greater than the preset hierarchical safety threshold, then the component with the larger spatial hierarchical data among the two components to be laid out will be determined as an absolutely positioned node. If the difference in layer values ​​is not greater than the layer safety threshold, then the two components to be laid out in the overlapping component pair will be split and reconstructed with spacing.

[0087] In some embodiments, the refactoring module is further configured to: The target design data is divided into multiple independent regional blocks using a spatial hashing algorithm, and a corresponding regional feature fingerprint is configured for each regional block. When local changes occur in the target design data, the changed blocks whose attributes have changed are identified by comparing the regional feature fingerprints before and after the change. The bounding box data and spatial hierarchy data of the changed blocks are extracted again, coordinate variance analysis is performed to determine the main axis layout direction, and the layout sequence is reconstructed to obtain the updated topology of the changed blocks. The variable block code fragments generated based on the variable block topology are concatenated and assembled with the unchanged area block code to generate the modified page layout code.

[0088] This invention provides a page layout code generation device. First, it uses coordinate variance analysis to determine the main axis direction by utilizing the statistical distribution dispersion of component coordinates, thus eliminating the dependence on the alignment of the physical boundaries of the component surface and objectively compatible with the staggered arrangement and alignment deviations in the design data. Second, this solution combines spatial hierarchy data to reconstruct the layout sequence, transforming the originally independent and flat components into a page topology structure with sequential order and depth, thereby achieving effective separation of the normal document flow and the actual layering intent. The above steps enable the final generated code to have a flexible structure arranged according to the actual logical relationship of the components, which can solve the technical problem of existing solutions that lack the ability to parse the page's logical semantic structure and the actual layering intent due to excessive reliance on the physical boundaries of the surface, resulting in poor maintainability of the generated code and easy occurrence of misalignment and occlusion of business data.

[0089] Specific limitations regarding page layout code generation can be found in the above section on limitations of the page layout code generation method, and will not be repeated here. Each module in the aforementioned page layout code generation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0090] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 10 As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile and / or volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with external clients via a network connection. When executed by the processor, the computer program implements the functions or steps of a page layout code generation method on the server side.

[0091] In one embodiment, a computer device is provided, which may be a client, and its internal structure diagram may be as follows: Figure 11 As shown, the computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with an external server via a network connection. When executed by the processor, the computer program implements client-side functions or steps of a page layout code generation method.

[0092] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: Obtain the target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; Perform coordinate variance analysis based on the bounding box data of each component to be laid out to determine the main axis layout direction of the target container in the target design data; Based on the main axis layout direction and spatial hierarchy data, the layout sequence of multiple components to be laid out is reconstructed to obtain the page topology. Generate the corresponding page layout code based on the page topology.

[0093] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor: Obtain the target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; Perform coordinate variance analysis based on the bounding box data of each component to be laid out to determine the main axis layout direction of the target container in the target design data; Based on the main axis layout direction and spatial hierarchy data, the layout sequence of multiple components to be laid out is reconstructed to obtain the page topology. Generate the corresponding page layout code based on the page topology.

[0094] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or computer device described above can be referred to the relevant descriptions on the server side and client side in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0095] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0096] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0097] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

[0098] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A method for generating page layout code, characterized in that, include: Obtain the target design data, and extract the bounding box data and spatial hierarchy data of each component to be laid out from the target design data; Based on the bounding box data of each component to be laid out, perform coordinate variance analysis to determine the main axis layout direction of the target container in the target design data; Based on the main axis layout direction and the spatial hierarchy data, the layout sequence of multiple components to be laid out is reconstructed to obtain the page topology structure. Generate corresponding page layout code based on the page topology.

2. The page layout code generation method according to claim 1, characterized in that, The step of performing coordinate variance analysis based on the bounding box data of each component to be laid out, to determine the main axis layout direction of the target container in the target design data, includes: Extract the center point coordinates of each component to be laid out within the target container; Calculate the first and second coordinate variances of each center point on the horizontal and vertical axes, respectively. The first coordinate variance is compared with the second coordinate variance, and when the first coordinate variance is greater than the product of the second coordinate variance and a preset direction sensitivity threshold, the main axis layout direction is determined to be horizontal. When the second coordinate variance is greater than the product of the first coordinate variance and the direction-sensitive threshold, the main axis layout direction is determined to be the vertical direction.

3. The page layout code generation method according to claim 1, characterized in that, Before reconstructing the layout sequence of multiple components to be laid out based on the main axis layout direction and the spatial hierarchy data, the method further includes: The arrangement characteristics of multiple components to be laid out are quantitatively calculated using a preset disorder evaluation model to obtain the corresponding visual disorder index. The visual confusion index is compared with a preset safety threshold. If the visual confusion index exceeds the safety threshold, the layout sequence of the multiple components to be laid out is reconstructed.

4. The page layout code generation method according to claim 3, characterized in that, The arrangement state features include negative margin ratio features, total absolute negative value features, and inversion degree features; The step involves using a preset disorder assessment model to quantify the arrangement characteristics of multiple components to be laid out, thereby obtaining a corresponding visual disorder index, including: The percentage of components using negative margin attributes within the target container is statistically analyzed to obtain the negative margin ratio characteristic. Extract the margin values ​​of each component to be laid out that are less than a preset negative threshold, and calculate the sum of the absolute values ​​of each margin value to obtain the feature of the sum of absolute negative values; By comparing the visual spatial arrangement order determined based on the bounding box data of multiple components to be laid out with the original node tree traversal order of multiple components to be laid out in the target design data, the sequence inversion difference is calculated, and the inversion degree feature is obtained. The visual confusion index is obtained by weighting and summing the negative margin ratio feature, the absolute negative value summation feature, and the inversion degree feature using preset weighting coefficients.

5. The page layout code generation method according to claim 1, characterized in that, The step of reconstructing the layout sequence of multiple components to be laid out based on the main axis layout direction and the spatial hierarchy data to obtain the page topology includes: Based on the main axis layout direction, multiple components to be laid out are grouped using a preset visual reading tolerance threshold to form at least one visual arrangement group. Within any of the visual layout groups, the multiple components to be laid out are rearranged in ascending order according to the coordinate sequence of the secondary axis direction perpendicular to the main axis layout direction. The page topology is constructed based on the rearranged two-dimensional arrangement sequence of the multiple components to be laid out and the elastic margin attribute determined based on the coordinate difference between adjacent components to be laid out.

6. The page layout code generation method according to claim 1, characterized in that, The step of reconstructing the layout sequence of multiple components to be laid out based on the main axis layout direction and the spatial hierarchy data to obtain the page topology structure also includes: Detect overlapping component pairs among multiple components to be laid out, and calculate the percentage of overlapping area between the two components to be laid out in the overlapping component pair; If the overlap area ratio is greater than a preset area threshold, then the difference in the layer values ​​of the two components to be laid out is calculated based on the spatial layer data. If the difference in the hierarchical values ​​is greater than the preset hierarchical safety threshold, then the component with the larger spatial hierarchical data among the two components to be laid out will be identified as an absolute positioning node. If the difference in the layer values ​​is not greater than the layer safety threshold, then the two components to be laid out in the overlapping component pair are split and reconstructed with spacing.

7. The page layout code generation method according to claim 1, characterized in that, The method further includes: The target design data is divided into multiple independent regional blocks using a spatial hashing algorithm, and a corresponding regional feature fingerprint is configured for each regional block. When the target design data undergoes local changes, the changed block with attribute changes is identified by comparing the regional feature fingerprints before and after the change. The bounding box data and spatial hierarchy data of the changed block are re-extracted, coordinate variance analysis is performed to determine the main axis layout direction, and the layout sequence is reconstructed to obtain the updated changed block topology. The variable block code fragments generated based on the variable block topology are concatenated and assembled with the unchanged area block code to generate the modified page layout code.

8. A page layout code generation device, characterized in that, The device includes: The acquisition module is used to acquire target design data and extract the bounding box data and spatial hierarchy data of each component to be laid out in the target design data; The determination module is used to perform coordinate variance analysis based on the bounding box data of each component to be laid out, and to determine the main axis layout direction of the target container in the target design data; The reconstruction module is used to reconstruct the layout sequence of multiple components to be laid out based on the main axis layout direction and the spatial hierarchy data to obtain the page topology structure. The generation module is used to generate corresponding page layout code based on the page topology.

9. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the page layout code generation method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the page layout code generation method according to any one of claims 1 to 7.

Images