Page component layout method and device, computer equipment and storage medium

Abstract

The embodiment of the invention discloses a page component layout method and device, computer equipment and a storage medium. The method comprises the steps that a target layout resource and a target layout rule of a target low-code development platform are obtained, the target layout resource comprises a plurality of components carrying different element features, and the element features comprise size features, hierarchical relation features and element priority features; based on a grid layout algorithm, a target layout rule, the size features corresponding to the components and the hierarchical relation features, the multiple components are placed in a grid system of the current page, and a preliminary layout page of the target layout resources is obtained; based on a simulated annealing algorithm, a target layout rule, the hierarchical relation characteristics of the components and the element priority characteristics, performing position optimization on the components in the preliminary layout page to obtain a first target layout page; and outputting the first target layout page. By implementing the method provided by the embodiment of the invention, the layout of the middle page component of the low-code development platform can be automatically adjusted.

Description

Technical Field

[0001] The present application relates to the field of artificial intelligence technology, and in particular to a layout method, device, computer equipment and storage medium for page components. Background Art

[0002] In the field of front-end page development, low-code development platforms are development platforms that can quickly generate applications without code or with a small amount of code. Through a visual approach to front-end page development, developers with different experience levels can create web pages through a graphical user interface, using drag-and-drop components and model-driven logic.

[0003] However, the web interface visual editors of existing low-code development platforms are usually unable to adapt to the screen sizes of different devices, resulting in poor display of components in the low-code development platform on incompatible devices. Manually adjusting the component layout, especially adjusting complex component layouts, requires users to spend a lot of time and effort. These problems limit the user's development efficiency and lead to a poor user experience of the low-code development platform. Summary of the invention

[0004] The embodiments of the present application provide a layout method, apparatus, computer equipment and storage medium for page components, which can automatically adjust the layout of page components in a low-code development platform so that the layout of page components automatically adapts to the display interface of the current device without manual adjustment, thereby improving the user's development efficiency and experience with the low-code development platform.

[0005] In a first aspect, an embodiment of the present application provides a layout method of a page component, which includes: Obtain target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, wherein the element features include size features, hierarchical relationship features, and element priority features; Placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components, and obtaining a preliminary layout page of the target layout resource; Optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; The first target layout page is output.

[0006] In a second aspect, an embodiment of the present application further provides a layout device for page components, which includes: A first acquisition unit is used to acquire target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, and the element features include size features, hierarchical relationship features, and element priority features; A placement unit, configured to place the plurality of components in a grid system of a current page based on a preset grid layout algorithm, the target layout rule, size characteristics corresponding to each component, and hierarchical relationship characteristics, to obtain a preliminary layout page of the target layout resource; An optimization unit, configured to optimize the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; An output unit, configured to output the first target layout page.

[0007] In a third aspect, an embodiment of the present application further provides a computer device, which includes a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the above method when executing the computer program.

[0008] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, wherein the storage medium stores a computer program, wherein the computer program includes program instructions, and wherein the program instructions can implement the above method when executed by a processor.

[0009] The embodiment of the present application provides a layout method, device, computer equipment and storage medium for page components. The method includes: obtaining the target layout resources and target layout rules of the target low-code development platform, wherein the target layout resources include multiple components with different element features, wherein the element features include size features, hierarchical relationship features and element priority features; placing multiple components in the grid system of the current page based on a preset grid layout algorithm, the target layout rules, and the size features and hierarchical relationship features corresponding to each of the components, to obtain a preliminary layout page of the target layout resources; optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rules, the hierarchical relationship features and the element priority features of each of the components, to obtain a first target layout page; and outputting the first target layout page. On the one hand, the present application can automatically adapt and place the components of the target low-code development platform according to the grid system of the current page in the current device, so that the component layout in the low-code development platform automatically adapts to the display interface of the current device without manual adjustment, thereby improving the user's development efficiency and experience with the low-code development platform; on the other hand, the present application also optimizes the position of the components in the preliminary layout page through the simulated annealing algorithm. The simulated annealing algorithm has the characteristics of improving the aesthetics and logic of the layout, thereby making the component layout more reasonable and beautiful, further improving the user's experience with the low-code development platform. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0011] Figure 1 A schematic diagram of an application scenario of the layout method of page components provided in an embodiment of the present application; Figure 2 A schematic diagram of a flow chart of a layout method of page components provided in an embodiment of the present application; Figure 3 A schematic diagram of a flow chart of a layout method of page components provided in another embodiment of the present application; Figure 4 A schematic block diagram of a layout device for page components provided in an embodiment of the present application; Figure 5 A schematic block diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0012] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0013] It should be understood that when used in this specification and the appended claims, the terms "include" and "comprises" indicate the presence of described features, integers, steps, operations, elements and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or combinations thereof.

[0014] It should also be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0015] It should be further understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0016] Embodiments of the present application provide a layout method, apparatus, computer equipment, and storage medium for page components.

[0017] The executor of the layout method of the page component may be the layout device of the page component provided in the embodiment of the present application, or a computer device integrating the layout device of the page component, wherein the layout device of the page component may be implemented in hardware or software, and the computer device may be a terminal, which may be a smart phone, a tablet computer, a PDA, or a laptop computer, etc.

[0018] See also Figure 1 , Figure 1 Schematic diagram of an application scenario of the layout method of page components provided in the embodiment of the present application. The layout method of the page components is applied to Figure 1In the computer device 10, the computer device 10 obtains the target layout resources issued by the target server 20 corresponding to the target low-code development platform, and obtains the target layout rules, the target layout resources include multiple components with different element features, the element features include size features, hierarchical relationship features and element priority features; based on the preset grid layout algorithm, the target layout rules, the size features and hierarchical relationship features corresponding to each of the components, the multiple components are placed in the grid system of the current page to obtain a preliminary layout page of the target layout resources; based on the preset simulated annealing algorithm, the target layout rules, the hierarchical relationship features and element priority features of each of the components, the components in the preliminary layout page are optimized in position to obtain a first target layout page; the first target layout page is output so that the user can use the target low-code development platform based on the first target layout page. On the one hand, the present application can automatically adapt and place the components of the target low-code development platform according to the grid system of the current page in the current device, so that the component layout in the low-code development platform automatically adapts to the display interface of the current device without manual adjustment, thereby improving the user's development efficiency and experience with the low-code development platform; on the other hand, the present application also optimizes the position of the components in the preliminary layout page through the simulated annealing algorithm. The simulated annealing algorithm has the characteristics of improving the aesthetics and logic of the layout, thereby making the component layout more reasonable and beautiful, further improving the user's experience with the low-code development platform.

[0019] Figure 2 is a flow chart of the layout method of the page components provided by the embodiment of the present application. The following is a detailed description of the layout method of the page components provided by the present application, taking the execution subject as the target user terminal as an example. Figure 2 As shown, the method includes the following steps S110-S140.

[0020] S110. Obtain target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, and the element features include size features, hierarchical relationship features, and element priority features.

[0021] In this embodiment, when a user opens the target low-code development platform through a web browser in a target user terminal, the server corresponding to the target low-code development platform will send the target layout resources of the target low-code development platform to the target user terminal.

[0022] Among them, the element features include size features, hierarchical relationship features and element priority features. The size feature is used to indicate the number of grid units occupied by the corresponding component in the horizontal and vertical directions of the screen respectively; the hierarchical relationship feature is used to indicate the association relationship between different components. For components with a hierarchical structure, a hierarchical layout algorithm is required to arrange the components in sequence according to logical relationships or information hierarchies; the element priority feature is used to indicate the importance of the component. The element priority can be specified by the user or determined by the server according to the operation frequency of each component. The higher the operation frequency, the higher the priority. High-priority components will be given priority in layout, and low-priority elements will be adjusted according to the position of high-priority elements.

[0023] In some embodiments, a set of general layout rules are also pre-defined, including alignment rules (such as left alignment, right alignment, center alignment, etc.), spacing rules (such as minimum spacing, equidistant arrangement), responsive rules (adjusting component position according to screen size), etc. After the user opens the target low-code development platform, he can first select the required target layout plan according to his own needs, such as selecting left alignment, equidistant arrangement, and adjusting component position according to screen size. When performing component layout later, it is necessary to arrange components according to the target layout plan.

[0024] S120, placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, size features corresponding to each component, and hierarchical relationship features, to obtain a preliminary layout page of the target layout resource.

[0025] Specifically, first, the canvas of the current page is constructed through a preset canvas module, and then an implicit grid system is generated based on element features and target layout rules, and the canvas is divided into a number of grid units. Then, the preset grid layout algorithm places the components on the basic grid of the canvas according to the sizes of each component. The grid layout algorithm indicates that the components are not overlapped, which can be a heuristic method.

[0026] Among them, by analyzing the hierarchical relationship characteristics, for components with hierarchical structure, a hierarchical layout algorithm is used to arrange the components according to logical relationships or information hierarchies.

[0027] In this embodiment, the grid layout algorithm can quickly generate a basic layout, reduce the amount of calculation and provide a reasonable initial solution.

[0028] S130, optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of the components, and the element priority characteristics, to obtain a first target layout page.

[0029] Based on the initial layout, this embodiment uses the simulated annealing algorithm to optimize the position of the components. The simulated annealing algorithm gradually adjusts the position of the components to reduce overlaps, gaps and intersections in the layout, thereby improving the aesthetics and logic of the layout. During the optimization process, factors such as the target layout rules (component alignment and spacing), priority (element priority characteristics) and relevance (hierarchical relationship characteristics) are considered to make the final layout more reasonable and beautiful.

[0030] In some embodiments, the specific implementation steps of the simulated annealing algorithm are as follows: 1. Initialization: set the initial temperature, preliminary layout page (based on heuristic method), number of iterations and other parameters; 2. Neighborhood search: Under the premise of complying with the target layout rules, the hierarchical relationship characteristics of each component, and the element priority characteristics, the current layout is disturbed to generate a new layout. The disturbance may include exchanging the position of the component, changing the size of the component, etc.; 3. Energy calculation: Calculate the objective function value of the new layout, that is, the quality of the layout; 4. Acceptance criteria: According to the Metropolis criterion (accepting new states with probability), determine whether to accept the new layout. If the quality of the new layout is better than the current layout, the new layout is accepted; otherwise, the new layout is accepted with a certain probability, which is related to the difference between the current temperature and the objective function value; 5. Temperature adjustment: lower the temperature after each iteration to make the algorithm gradually stabilize; 6. Termination condition: When the preset number of iterations is reached or the temperature drops low enough, the algorithm terminates and returns to the current optimal layout.

[0031] In this embodiment, a page layout that is better than the traditional method can be found through the simulated annealing algorithm, and local optimization of page components can be completed. It performs well in local optimization, can effectively reduce conflicts between components and improve the aesthetics of the layout.

[0032] S140: Output the first target layout page.

[0033] In this embodiment, after the first target layout page is obtained, the first target layout page is displayed in the display interface of the target terminal.

[0034] Furthermore, in some embodiments, in order to improve the quality of the global layout, after obtaining the first target layout page based on the simulated annealing algorithm, it is also necessary to globally adjust the components in the first target layout page based on a preset genetic algorithm to obtain a second target layout page; and use the second target layout page as the first target layout page.

[0035] Specifically, it is an optimization algorithm that simulates natural selection and genetic mechanisms. It is widely used in various optimization problems and can find the optimal solution among multiple optimization schemes, thereby further improving the layout effect and improving the aesthetics and user experience of the page.

[0036] For further information, see Figure 3 In some embodiments, after step S140, the method further includes: S150. Obtain a drag adjustment operation of a user on a target component in the first target layout page, where the drag adjustment operation indicates adjusting a size and / or position of the target component.

[0037] In this embodiment, the canvas module preset by the terminal system provides a visual editing interface based on HTML5, which supports users to drag, scale and arrange components in a Web browser. When the user needs to fine-tune the generated first target layout page, the user can directly drag and adjust the target component that needs to be adjusted.

[0038] S160, performing collision detection on the adjusted target component based on a preset grid arrangement algorithm; if there is a collision component, executing step S170; if there is no collision component, executing step S190.

[0039] In this embodiment, the terminal system is also preset with a layout system, which is a grid-based layout system. Based on this layout system, each component is assigned to one or more specific grid units, and the system tracks the occupancy of these grid units by maintaining a two-dimensional array. The movement and size adjustment of components are calculated on this two-dimensional array to ensure the legality and consistency of the layout.

[0040] After obtaining the first target layout page, the layout system needs to extract position features of all elements on the canvas, determine the grid units occupied by each component, and then perform collision detection and other processing on the components based on the grid units occupied by each component.

[0041] For the situation where components are dragged and resized, the layout system can use "react-draggable (a plug-in for front-end component dragging)" and "react-resizable (a plug-in for component resizing)" as the basic library to implement the dragging and resizing functions of components. When dragging, the layout system calculates the position of the target grid unit in real time and updates the position information of the component. When resizing, the library dynamically adjusts the grid unit occupied by the component according to the direction and distance of dragging.

[0042] Specifically, the present application performs collision detection between components based on the grid cells occupied by each component.

[0043] In some embodiments, the layout system in the target terminal of the present application also supports responsive design, allowing developers to define multiple breakpoints, each breakpoint corresponding to a layout configuration. For example, when the window size changes, the system automatically selects the most appropriate layout and applies it.

[0044] The layout system in this embodiment also includes a grid arrangement algorithm, and step S160 is implemented based on the grid arrangement algorithm. The grid arrangement algorithm is responsible for processing the arrangement and rearrangement of grid items. When the user drags a component (grid item), the algorithm calculates whether other components need to be moved to avoid overlap and conflict. The algorithm also takes into account constraints such as component fixity, minimum size, and maximum size.

[0045] That is, when performing collision detection on the target component, it is first necessary to verify the legality of the drag and adjustment operation of the target component, that is, to verify whether the adjusted target component is a non-fixed component and whether the adjusted target component meets the constraints of the maximum size and the minimum size. If it is a non-fixed component and meets the constraints of the maximum size and the minimum size, collision detection is performed.

[0046] S170: If the target component is a non-fixed component, move the first component that collides with the target component based on the grid system.

[0047] Specifically, moving the first component based on the grid system includes: moving the collided component downward by one row in the grid system.

[0048] If the target component is fixed, the adjustment is skipped.

[0049] S180. Use the moved first component as the adjusted target component, return to step S160, and continue until all components have no collision, and output a third target layout page.

[0050] S190: If the target component is a non-fixed component, the adjustment of the target component is completed.

[0051] Specifically, possible subsequent collisions are processed recursively until all components have no collisions, and a third target layout page is output.

[0052] In some embodiments, in order to save the user's personalized layout, after the user manually adjusts the page layout, it is also necessary to save the adjustment result so that when subsequent users open the platform, they can continue to use the personalized layout to improve the user experience. At this time, after outputting the third target layout page, the method further includes: Obtain the target user identifier and the first component grid layout data corresponding to the third target layout page; associate and store the target user identifier and the first component grid layout data in a first database; when it is detected that the user corresponding to the target user identifier logs in to the target low-code development platform, extract the first component grid layout data associated with the target user identifier from the first database; generate the third target layout page based on the first component grid layout data.

[0053] Among them, the target user identifier is the user identifier corresponding to the user currently logged in to the target low-code development platform, such as the currently logged in user account.

[0054] The first database may be a local database or a cloud database, which is not specifically limited here. The first component grid layout data is the layout data of each component in the third target layout page.

[0055] In this embodiment, when the window size of the target low-code development platform changes, the system automatically selects the most appropriate layout and applies it. Since users may frequently adjust the window size during use, if the grid layout algorithm and the simulated annealing algorithm are executed once each time the window size is adjusted, and the display response speed is affected, in order to improve the display response speed, after outputting the first target layout page, the method in this embodiment also includes: Obtain a target window size corresponding to the current page, and obtain second component grid layout data corresponding to the first target layout page; associate the target window size with the second component grid layout data and store them in a second database, wherein the second database stores component grid layout data corresponding to a plurality of window sizes.

[0056] When it is detected that the user adjusts the window size of the target low-code development platform, it will be detected whether the second database stores component grid layout data corresponding to the target window size; at this time, if the second database does not store component grid layout data corresponding to the target window size, multiple components will be placed in the grid system of the current page based on the preset grid layout algorithm, the target layout rules, the size characteristics corresponding to each component, and the hierarchical relationship characteristics, so as to obtain the preliminary layout page of the target layout resources.

[0057] If the second database stores second component grid layout data corresponding to the target window size, the first target layout page is generated according to the second component grid layout data.

[0058] The second database is a local database or a cloud database, which is not specifically limited here.

[0059] The above embodiments can perform responsive adaptation when the window size is adjusted, thereby improving adaptation efficiency.

[0060] Furthermore, this embodiment also provides customizable template matching. Specifically, by combining with the big model, the system can automatically recommend or match the most suitable interface template according to the canvas component designed by the user. This function helps users quickly create interface layouts that meet best practices, shortens the development cycle, and improves design consistency.

[0061] Furthermore, this embodiment also provides seamless integration and scalability functions. Specifically, the system design is highly scalable and supports seamless integration with other tools and platforms. Users can flexibly expand the functions of the system according to their own needs, and can easily import and export design data to ensure the sustainable development of the project.

[0062] To summarize, this embodiment obtains the target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, and the element features include size features, hierarchical relationship features, and element priority features; based on a preset grid layout algorithm, the target layout rules, and the size features and hierarchical relationship features corresponding to each of the components, multiple components are placed in the grid system of the current page to obtain a preliminary layout page of the target layout resources; based on a preset simulated annealing algorithm, the target layout rules, the hierarchical relationship features of each of the components, and the element priority features, the components in the preliminary layout page are optimized in position to obtain a first target layout page; and the first target layout page is output. On the one hand, the present application can automatically adapt and place the components of the target low-code development platform according to the grid system of the current page in the current device, so that the component layout in the low-code development platform automatically adapts to the display interface of the current device without manual adjustment, thereby improving the user's development efficiency and experience with the low-code development platform; on the other hand, the present application also optimizes the position of the components in the preliminary layout page through the simulated annealing algorithm. The simulated annealing algorithm has the characteristics of improving the aesthetics and logic of the layout, thereby making the component layout more reasonable and beautiful, further improving the user's experience with the low-code development platform.

[0063] Figure 4 4 is a schematic block diagram of a layout device 400 for page components provided in an embodiment of the present application. Figure 4 As shown, corresponding to the above layout method of page components, the present application also provides a layout device 400 of page components. The layout device 400 of page components includes a unit for executing the above layout method of page components, and the layout device 400 of page components can be configured in a desktop computer, a tablet computer, a laptop computer, etc. Specifically, please refer to Figure 4 The layout device 400 of the page component includes a first acquisition unit 401, a placement unit 402, an optimization unit 403 and an output unit 404.

[0064] A first acquisition unit 401 is used to acquire a target layout resource and a target layout rule of a target low-code development platform, wherein the target layout resource includes a plurality of components having different element features, wherein the element features include a size feature, a hierarchical relationship feature, and an element priority feature; A placement unit 402 is used to place the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components, so as to obtain a preliminary layout page of the target layout resource; The optimization unit 403 is used to optimize the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each component, and the element priority characteristics to obtain a first target layout page; The output unit 404 is configured to output the first target layout page.

[0065] In some embodiments, the layout device 400 of the page component further includes: The adjustment unit is used to globally adjust the components in the first target layout page based on a preset genetic algorithm to obtain a second target layout page; and use the second target layout page as the first target layout page.

[0066] In some embodiments, the layout device 400 of the page component further includes: A second acquisition unit, configured to acquire a drag adjustment operation of a user on a target component in the first target layout page, wherein the drag adjustment operation indicates adjusting a size and / or a position of the target component; A first detection unit, configured to perform collision detection on the adjusted target component based on a preset grid arrangement algorithm; a moving unit, configured to move the first component based on the grid system if it is determined based on the collision detection that the target component collides with the first component and the target component is a non-fixed component; The output unit is used to use the moved first component as the adjusted target component, return to execute the detection unit until all components have no collision, and output a third target layout page.

[0067] In some embodiments, the layout device 400 of the page component further includes: A third acquisition unit, used to acquire a target user identifier and first component grid layout data corresponding to the third target layout page; A first storage unit, used for storing the target user identifier and the first component grid layout data in association with each other in a first database; an extraction unit, configured to extract the first component grid layout data associated with the target user identifier from the first database when it is detected that the user corresponding to the target user identifier logs into the target low-code development platform; The first generating unit is used to generate the third target layout page according to the first component grid layout data.

[0068] In some embodiments, the layout device 400 of the page component further includes: A fourth acquisition unit, configured to acquire a target window size corresponding to the current page, and acquire second component grid layout data corresponding to the first target layout page; The second storage unit is used to associate the target window size with the second component grid layout data and store them in a second database, wherein the second database stores component grid layout data corresponding to a plurality of window sizes.

[0069] In some embodiments, the layout device 400 of the page component further includes: A second detection unit, configured to detect whether component grid layout data corresponding to the target window size is stored in the second database; The placement unit is specifically used for: If the second database does not contain component grid layout data corresponding to the target window size, multiple components are placed in the grid system of the current page based on a preset grid layout algorithm, the target layout rules, size characteristics corresponding to each component, and hierarchical relationship characteristics to obtain a preliminary layout page of the target layout resources.

[0070] In some embodiments, the layout device 400 of the page component further includes: The second generating unit is configured to generate the first target layout page according to the second component grid layout data if the second database stores second component grid layout data corresponding to the target window size.

[0071] To sum up, on the one hand, the page component layout device 400 provided in the present application can automatically adapt and place the components of the target low-code development platform according to the grid system of the current page in the current device, so that the component layout in the low-code development platform is automatically adapted to the display interface of the current device without manual adjustment, thereby improving the user's development efficiency and experience with the low-code development platform; on the other hand, the page component layout device 400 provided in the present application also optimizes the position of the components in the preliminary layout page through a simulated annealing algorithm. The simulated annealing algorithm has the characteristics of improving the aesthetics and logic of the layout, thereby making the component layout more reasonable and beautiful, further improving the user's experience with the low-code development platform.

[0072] It should be noted that those skilled in the art can clearly understand that the specific implementation process of the layout device and each unit of the above-mentioned page component can refer to the corresponding description in the aforementioned method embodiment, and for the convenience and brevity of description, it will not be repeated here.

[0073] The layout device of the page components can be implemented in the form of a computer program. The computer program can be used in Figure 5 Runs on the computer device shown.

[0074] See also Figure 5 , Figure 5 500 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device 500 may be a terminal, wherein the terminal may be an electronic device with communication function such as a smart phone, a tablet computer, a laptop computer, and a desktop computer.

[0075] See also Figure 5 The computer device 500 includes a processor 502 , a memory and a network interface 505 connected via a system bus 501 , wherein the memory may include a non-volatile storage medium 503 and an internal memory 504 .

[0076] The non-volatile storage medium 503 can store an operating system 5031 and a computer program 5032. The computer program 5032 includes program instructions, and when the program instructions are executed, the processor 502 can execute a layout method of page components.

[0077] The processor 502 is used to provide computing and control capabilities to support the operation of the entire computer device 500 .

[0078] The internal memory 504 provides an environment for the operation of the computer program 5032 in the non-volatile storage medium 503. When the computer program 5032 is executed by the processor 502, the processor 502 can execute a layout method of page components.

[0079] The network interface 505 is used to communicate with other devices over the network. Figure 5 The structure shown in the figure is merely a block diagram of a portion of the structure related to the solution of the present application, and does not constitute a limitation on the computer device 500 to which the solution of the present application is applied. The specific computer device 500 may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0080] The processor 502 is used to run the computer program 5032 stored in the memory to implement the following steps: Obtain target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, wherein the element features include size features, hierarchical relationship features, and element priority features; Placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components, and obtaining a preliminary layout page of the target layout resource; Optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; The first target layout page is output.

[0081] It should be understood that in the embodiment of the present application, the processor 502 may be a central processing unit (CPU), and the processor 502 may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0082] It can be understood by those skilled in the art that all or part of the processes in the method for implementing the above embodiment can be completed by instructing the relevant hardware through a computer program. The computer program includes program instructions, and the computer program can be stored in a storage medium, which is a computer-readable storage medium. The program instructions are executed by at least one processor in the computer system to implement the process steps of the embodiment of the above method.

[0083] Therefore, the present application also provides a storage medium. The storage medium may be a computer-readable storage medium. The storage medium stores a computer program, wherein the computer program includes program instructions. When the program instructions are executed by a processor, the processor executes the following steps: Obtain target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, wherein the element features include size features, hierarchical relationship features, and element priority features; Placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components, and obtaining a preliminary layout page of the target layout resource; Optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; The first target layout page is output.

[0084] The storage medium may be a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disk, etc., which are computer-readable storage media that can store program codes.

[0085] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0086] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of each unit is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0087] The steps in the method of the embodiment of the present application can be adjusted in order, combined and deleted according to actual needs. The units in the device of the embodiment of the present application can be combined, divided and deleted according to actual needs. In addition, the functional units in the various embodiments of the present application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0088] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, terminal, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application.

[0089] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A layout method for page components, characterized in that: include: Obtain target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, wherein the element features include size features, hierarchical relationship features, and element priority features; Placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components, and obtaining a preliminary layout page of the target layout resource; Optimizing the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; The first target layout page is output.

2. The method according to claim 1, characterized in that Before outputting the first target layout page, the method further includes: Based on a preset genetic algorithm, globally adjust the components in the first target layout page to obtain a second target layout page; The second target layout page is used as the first target layout page.

3. The method according to claim 1, after outputting the first target layout page, the method further comprises: Acquire a user's drag and drop adjustment operation on a target component in the first target layout page, where the drag and drop adjustment operation indicates adjusting a size and / or a position of the target component; Performing collision detection on the adjusted target component based on a preset grid arrangement algorithm; If it is determined based on the collision detection that the target component collides with the first component, and the target component is a non-fixed component, moving the first component based on the grid system; The first component after being moved is used as the adjusted target component, and the step of performing collision detection on the adjusted target component based on the preset grid arrangement algorithm is returned to be executed until all components have no collision, and a third target layout page is output.

4. The method according to claim 3, characterized in that: After taking the moved first component as the adjusted target component and returning to the step of performing collision detection on the adjusted target component based on the preset grid arrangement algorithm until all components have no collision and outputting the third target layout page, the method further includes: Obtaining a target user identifier and first component grid layout data corresponding to the third target layout page; storing the target user identifier and the first component grid layout data in association with each other in a first database; When it is detected that the user corresponding to the target user identifier logs into the target low-code development platform, extracting the first component grid layout data associated with the target user identifier from the first database; The third target layout page is generated according to the first component grid layout data.

5. The method according to claim 1, characterized in that: After outputting the first target layout page, the method further includes: Obtaining a target window size corresponding to the current page, and obtaining second component grid layout data corresponding to the first target layout page; The target window size and the second component grid layout data are associated and stored in a second database, wherein the second database stores component grid layout data corresponding to a plurality of window sizes.

6. The method according to claim 5, characterized in that After obtaining the target layout resources and target layout rules of the target low-code development platform, the method further includes: Detecting whether the second database stores component grid layout data corresponding to the target window size; Placing the plurality of components in a grid system of the current page based on a preset grid layout algorithm, the target layout rule, the size characteristics and the hierarchical relationship characteristics corresponding to each of the components to obtain a preliminary layout page of the target layout resource includes: If the second database does not contain component grid layout data corresponding to the target window size, multiple components are placed in the grid system of the current page based on a preset grid layout algorithm, the target layout rules, size characteristics corresponding to each component, and hierarchical relationship characteristics to obtain a preliminary layout page of the target layout resources.

7. The method according to claim 6, characterized in that After detecting whether the second database stores component grid layout data corresponding to the target window size, the method further includes: If the second database stores second component grid layout data corresponding to the target window size, the first target layout page is generated according to the second component grid layout data.

8. A layout device for page components, characterized in that: include: A first acquisition unit is used to acquire target layout resources and target layout rules of a target low-code development platform, wherein the target layout resources include multiple components carrying different element features, and the element features include size features, hierarchical relationship features, and element priority features; A placement unit, configured to place the plurality of components in a grid system of a current page based on a preset grid layout algorithm, the target layout rule, size characteristics corresponding to each component, and hierarchical relationship characteristics, to obtain a preliminary layout page of the target layout resource; An optimization unit, configured to optimize the positions of the components in the preliminary layout page based on a preset simulated annealing algorithm, the target layout rule, the hierarchical relationship characteristics of each of the components, and the element priority characteristics, to obtain a first target layout page; An output unit, configured to output the first target layout page.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method for laying out the page components according to any one of claims 1 to 7 is implemented.

10. A storage medium, characterized in that: The storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor executes the layout method of the page component according to any one of claims 1 to 7.

Images