Page layout method and device based on display material drive, equipment and medium

Abstract

The invention relates to the technical field of UI design, can be applied to business scenes such as financial science and technology and medical health, and discloses a page layout method based on display material driving, which comprises the following steps: obtaining page display materials and storing the materials in a material resource library, selecting target display materials and generating a page frame, inserting display blocks of preset elements in the page frame, and displaying the preset elements in the display blocks. Generating visual preview data based on layout parameters of the page frame, outputting the visual preview data to an interface rendering processing module, performing association coding on coordinate mapping data of the page frame and a content identifier of the display block to generate a structured storage file, analyzing terminal feature parameters in the access request, generating an access identifier, and displaying the access identifier to the interface rendering processing module. And generating a target display interface according to the access identifier. According to the method and the device, the association relationship between the display material and the coordinate mapping data and the content identifier is established, and the layout metadata and the rendering parameters are extracted in combination with the terminal features to complete interface generation, so that the adaptation accuracy of structured expression of page configuration and interface output is realized.

Description

Technical Field

[0001] The present invention relates to the technical field of UI design, and particularly to a page layout method, device, equipment and storage medium driven by display materials. Background Art

[0002] In the current fintech business field, the H5 page, as the core display channel for various insurance products, financial services, and promotional activities, its configuration efficiency and display effect directly affect user conversion rate and compliance management. Especially in strongly regulated fields such as health insurance, page content needs to cover information elements such as product descriptions, risk warnings, and rate disclosures, and must meet the specific requirements of regulatory agencies for page structure, font size, salience, etc. However, existing technologies generally use a fixed templated page framework for configuration. The configuration process usually defines page elements based on a configuration form or data structure, and then confirms through a preview link. This technical mode has great limitations and is difficult to flexibly adjust according to the characteristics of different financial products and regulatory requirements. The page content and layout highly depend on the preset framework, resulting in a single display form and a lack of space for differential expression.

[0003] In the medical and health business field, insurance products often need to customize display content in combination with specific population portraits, service scenarios, and risk factors. Regulatory documents are updated frequently in different regions and at different times, posing dynamic adjustment requirements for the display of content such as health warnings, disease exclusions, and underwriting rules. Most of the page configuration processes in existing technologies rely on the superposition of manual configuration and static templates and do not have the ability to quickly respond to changes. When the business department or compliance department proposes a change requirement for page elements, it often requires front-end engineers to intervene and modify and redeploy, resulting in a long adjustment cycle and high communication costs.

[0004] The existing page configuration methods generally have the problem of low operation efficiency. Users need to modify configuration data multiple times, switch views to preview the page, and repeat the attempt after the modification fails, lacking operation feedback and real-time visibility. This configuration logic cannot support high-frequency version iterations and is not suitable for business scenarios that require quick release, testing, and going live. In addition, most current systems lack the "what you see is what you get" interaction ability. Page designers often need to configure the page structure and content based on experience, and then repeatedly compare the effects through previews. The configuration experience is fragmented, which easily causes a deviation between the page presentation effect and the expected design, increasing the trial-and-error cost.

[0005] Meanwhile, at the level of material management and display element allocation, existing technologies mostly organize display resources such as pictures, documents, and modules based on static directories or coding rules, lacking an extensible resource calling mechanism. During the process of generating complex pages, the dependency relationships and interaction logics between page elements often require additional coding for processing, which is not conducive to business personnel directly participating in configuration and further affects the business go-live efficiency and page compliance stability. Generally speaking, the current mainstream H5 page configuration technologies have significant deficiencies in aspects such as page flexibility, operation efficiency, real-time preview, and compliance guarantee, and it is difficult to meet the growing personalized, high-frequency, and compliance page configuration requirements in the financial and medical fields. Summary of the Invention

[0006] The main objective of the present invention is to provide a page layout method, device, equipment, and storage medium driven by display materials, aiming to solve the technical problem that existing technologies rely on fixed frameworks for page configuration, lack flexible adaptation and visual interaction mechanisms, and are difficult to support high-frequency and personalized page generation requirements.

[0007] To achieve the above objective, the present invention provides a page layout method driven by display materials, including:

[0008] Obtain page display materials and store the page display materials in a material resource library;

[0009] Select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0010] Insert a display block of a preset element into the page framework;

[0011] Generate visual preview data based on the layout parameters of the page framework, and output the visual preview data to an interface rendering processing module;

[0012] Associate and encode the coordinate mapping data of the page framework with the content identifiers of the display blocks to generate a structured storage file;

[0013] Analyze the terminal feature parameters in the access request, and generate an access identifier based on the terminal feature parameters;

[0014] Extract target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the rendering parameters of the target layout metadata and the visual preview data to generate a target display interface.

[0015] Furthermore, to achieve the above objective, the present invention provides a page layout device driven by display materials, including:

[0016] A material access module, which is used to obtain page display materials and store the page display materials in a material resource library;

[0017] A material screening module, which is used to select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0018] An element insertion module, which is used to insert a display block of a preset element into the page framework;

[0019] A preview generation module, which is used to generate visual preview data based on the layout parameters of the page framework, and output the visual preview data to an interface rendering processing module;

[0020] A data encoding module, which is used to associate and encode the coordinate mapping data of the page framework with the content identifier of the display block to generate a structured storage file;

[0021] An access identifier module, which is used to analyze the terminal feature parameters in an access request, and generate an access identifier based on the terminal feature parameters;

[0022] An interface generation module, which is used to extract target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the rendering parameters of the target layout metadata and the visual preview data to generate a target display interface.

[0023] Furthermore, to achieve the above object, the present invention also provides a computer device, which includes a memory, a processor, and a page layout program driven by display materials stored in the memory and executable on the processor. When the page layout program driven by display materials is executed by the processor, the steps of the page layout method driven by display materials as described above are implemented.

[0024] Furthermore, to achieve the above object, the present invention also provides a computer-readable storage medium, on which a page layout program driven by display materials is stored. When the page layout program driven by display materials is executed by a processor, the steps of the page layout method driven by display materials as described above are implemented.

[0025] Beneficial effects: The present invention relates to the technical field of UI design and can be applied to business scenarios such as fintech and healthcare. It discloses a page layout method driven by display materials, including: obtaining page display materials and storing them in a material resource library, selecting target display materials and performing an operation to change the positioning coordinates to generate a page framework, inserting display blocks of preset elements in the page framework, generating visual preview data based on the layout parameters of the page framework and outputting it to an interface rendering processing module, associating and encoding the coordinate mapping data of the page framework with the content identifiers of the display blocks to generate a structured storage file, parsing the terminal feature parameters in the access request and generating an access identifier, and extracting target layout metadata from the structured storage file according to the access identifier and fusing the rendering parameters of the visual preview data to generate a target display interface. By establishing a structured association relationship between page display materials, coordinate mapping data, and content identifiers, and combining the extraction of layout metadata and rendering parameters with terminal feature parameters for fusion, the present invention can achieve the dynamic generation of display interfaces and the accurate presentation of layout content, improving the flexibility of page generation and the accuracy of rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] The following will further illustrate the present invention in conjunction with the drawings. In the drawings:

[0027] Figure 1 is a schematic diagram of an application environment of the page layout method driven by display materials according to an embodiment of the present invention;

[0028] Figure 2 is a schematic flowchart of an embodiment of the page layout method driven by display materials according to the present invention;

[0029] Figure 3 is a schematic diagram of functional modules of a preferred embodiment of the page layout device driven by display materials according to the present invention;

[0030] Figure 4 is a schematic diagram of the structure of a computer device according to an embodiment of the present invention;

[0031] Figure 5 is another schematic diagram of the structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0032] It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0033] The page layout method driven by display materials provided by the embodiments of the present invention can be applied in, for example Figure 1In the application environment, the client communicates with the server through the network. The server can obtain page display materials through the client and store them in the material resource library, select target display materials and perform an operation to change the positioning coordinates to generate a page framework, insert a display block of a preset element into the page framework, generate visual preview data based on the layout parameters of the page framework and output it to the interface rendering processing module, associate and encode the coordinate mapping data of the page framework with the content identifier of the display block to generate a structured storage file, parse the terminal feature parameters in the access request and generate an access identifier, and extract target layout metadata from the structured storage file according to the access identifier and fuse the rendering parameters of the visual preview data to generate a target display interface. By establishing a structured association relationship between the page display materials, the coordinate mapping data, and the content identifier, and combining the extraction of layout metadata and rendering parameters with the terminal feature parameters for fusion, the present invention can achieve the dynamic generation of the display interface and the accurate presentation of the layout content, improving the flexibility of page generation and the accuracy of rendering. Among them, the client can be, but is not limited to, various personal computers, laptop computers, smart phones, tablet computers, and portable wearable devices. The server can be implemented by an independent server or a server cluster composed of multiple servers. The present invention will be described in detail below through specific embodiments.

[0034] Please refer to Figure 2 , Figure 2 which is a schematic flowchart of an embodiment of the page layout method driven by display materials provided by the present invention. It should be noted that although the logical order is shown in the flowchart, in some cases, the steps shown or described herein may be executed in a different order.

[0035] As Figure 2 shown, the page layout method driven by display materials proposed by the present invention includes the following steps:

[0036] S10, obtain page display materials and store the page display materials in the material resource library;

[0037] In this embodiment, the acquisition of page display materials is one of the core contents of the information resource collection process, and its forms can include, but are not limited to, different types of data structures such as images, texts, icons, video frames, etc. The sources of page display materials can be local file uploads, automatic pushes from business systems, pulls from online collection interfaces, or calls to historical content versions based on existing content management systems. The upload behavior is usually triggered through graphical interface interactions, and can be combined with batch upload mechanisms and automatic type recognition mechanisms to improve user operation efficiency. After acquisition, the page display materials need to undergo standardization processing to ensure stable presentation effects under different terminals and layout configurations. These standardization processes include material format conversion, size normalization, resolution correction, color space calibration, etc. After preliminary processing, the materials will be stored in the material resource library, which is a content storage system with classified indexing, version control, and multi-dimensional metadata support. Its structure usually includes partitions such as picture resource directories, text resource directories, and document resource directories, and physical path mapping is performed within each partition based on hash paths, timestamps, or unique identifiers.

[0038] The material resource library should not only be a storage collection of files, but also support the structured extraction of the content attributes of page display materials. Commonly included are material file names, file sizes, pixel specifications, color channel information, keyword tags, content summaries, original business source identifiers, etc. By extracting the metadata of page display materials, a unified identification system can be constructed, and thus the rapid positioning and reuse of materials can be achieved. At the same time, the structured management of metadata is also the basic dependence for realizing material screening, display strategy configuration, and page structured reconstruction in subsequent operations. Page display materials can also be intelligently verified through a compliance detection module when entering the library. For image materials, sensitive elements, copyright watermarks, or violation marks can be identified based on an image content detection model, and for document materials, the structural integrity, text semantic structure, and layout rules can be verified through a document parsing engine. The above detections can output format compliance marks or structural compliance marks, and be used as the basis for whether to enter the library or be marked.

[0039] After completing compliance detection and classified storage, a path mapping table needs to be generated for each type of material. This mapping table defines the relative path of the material in the storage system, the business domain it belongs to, the update time, and the association information with the original upload request. In addition, to improve the resource retrieval efficiency and data redundancy verification ability, each page-displayed material also needs to generate a unique identifier through a hash function and establish a hash index path. This process can use secure hash algorithms such as MD5, SHA-256, and SM3 to generate a unique hash value by combining the material content, uploader identifier, and timestamp, thus ensuring the uniqueness and immutability of the same material within the system. Finally, the source files of the page-displayed materials after hash path mapping will be stored in the corresponding storage nodes, which can be logical blocks in a distributed file system, data objects in an object storage bucket, or file pointers managed by binary fields in a database.

[0040] In one implementation, page-displayed materials are uploaded through the client upload interface, and the system identifies the MIME type of the materials based on the front-end components and performs preliminary classification screening. The uploaded image materials are handed over to the image analysis module for format consistency verification and compression processing, and the document materials are handed over to the structure analysis engine for DOM level verification and content segmentation recognition. After processing, the materials generate a path in the way of "year / month / day / uploader ID / file type" and are written into the mapping table. In another implementation, page-displayed materials are automatically pushed by the business system, and the push format is a structured JSON string, including the Base64 encoding of the material ontology and the corresponding content tag information. After the system parses it, it automatically identifies the business scope it belongs to and marks the business classification label in the material resource library, thus supporting subsequent aggregation and retrieval according to the business dimension. After the materials are stored in the warehouse, different storage node strategies can also be configured for different types of page-displayed materials. For example, image materials adopt highly available distributed object storage, and document materials adopt a version-traceable structured database indexing strategy.

[0041] It is also possible to connect the process of storing page-displayed materials with the content management system. After the materials are uploaded, the material records in the content management system are synchronously updated through the API interface, and the version comparison mechanism is triggered to identify whether the material is the content evolution of the historical version. In addition, algorithms such as OCR text recognition and image feature extraction can be used to automatically extract keywords and write them into the material metadata area after the materials are uploaded, which is used to support search, classification, and intelligent recommendation mechanisms. For business scenarios with high-frequency change requirements, a comparison mechanism can also be established between the hash value of the material and the historical version to achieve automatic change detection and content auditing.

[0042] Example illustration: In the scenario of medical and health data configuration, the page display materials may include medical diagrams, disease description files, risk notice documents, etc. The structural integrity and content compliance of these materials directly affect the accuracy and compliance of page display. Through the format compliance and structure compliance verification mechanism, the system can ensure that medical materials will not cause ambiguity due to format problems when presented on different terminals, and can generate hash identifiers for the materials in combination with disease tags and service term identifiers, facilitating subsequent retrieval and auditing.

[0043] In the scenario of insurance page configuration in the financial field, the page display materials may involve protection liability description diagrams, product benefit comparison diagrams, clause PDF documents, etc. After the uploaded materials are completed with unified identification and path mapping, it is convenient to call common modules of different insurance types and different protection scopes during page configuration. Through the structured path and hash index mechanism, it is possible to quickly locate the appropriate material module on the insurance page, significantly improving the page assembly efficiency and ensuring that the regulatory mandatory elements are not missing.

[0044] By forming a complete data chain for the collection, verification, classification, identification, mapping and storage of page display materials, the standardized management and efficient invocation of page display resources are realized, providing a unified and structured material basis for subsequent page configuration, element layout and visualization interface generation, and effectively improving the material management efficiency and the flexibility of the page generation process.

[0045] S20, select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0046] In this embodiment, the process of selecting target display materials is based on the material resource library, which carries a collection of display materials that have undergone compliance processing, structured identification and path mapping. Display materials can include types such as images, texts, decorative elements, functional controls, etc. Each type of material is attached with its structured metadata to support filtering, sorting and adaptation. The action of selecting target display materials is usually combined with page type configuration parameters, which include content such as page usage identification, industry compliance requirements, user interaction models, etc. For example, for insurance industry pages, risk warning materials may be preferentially selected, while for medical and health pages, disease description or medication guidance materials may be preferentially configured. The selection strategy can be filtered based on the metadata tags of the materials, or rule matching can be performed based on the business logic model, or sorting can be done through predefined display priority fields. The final target display materials are usually organized in the form of a material queue and are bound to the current page configuration session.

[0047] After the display materials are selected, coordinate change operations need to be performed in the page framework to complete the initial construction of the page structure. The generation of the initial positioning coordinates usually depends on the viewport resolution parameters, which include the screen width and height, pixel density, and available display area of the current terminal device. Based on these parameters, the system can map the materials to the layout grid in the standardized coordinate system. A common practice is to divide the page area into equally wide grid cells, and the materials are positioned in units of cells. The coordinate change operation is not a static assignment but includes a dynamic adjustment process, such as the offset generated when the user drags, the displacement correction for automatically avoiding conflicting elements, and the boundary alignment optimized according to the element size. After these operations are combined, the final positioning coordinates are formed and used to construct the page framework. The page framework is essentially an abstract expression of a layout structure, containing information such as the coordinates, sizes, and hierarchies of all positioned materials, and is organized in the form of a rasterized coordinate matrix to support subsequent visual rendering, interaction processing, and storage mapping.

[0048] During the coordinate change operation of the positioning coordinates, a collision detection mechanism also needs to be introduced, especially in the scenario of user interaction configuration. When two display materials overlap in position, the system needs to judge whether to allow overwriting or perform automatic adjustment according to the set rules (such as priority, size, and layout stability). This mechanism can be implemented based on the spatial mapping matrix or the bounding box detection algorithm can be used for quick judgment. The finally generated page framework not only contains the geometric positions of each material but may also include rendering auxiliary information such as margins, borders, and stacking order, which is used to maintain a consistent visual performance during the preview and rendering processes.

[0049] In one implementation, the selection of the target display material is completed by matching the page type and the material label. The system has multiple built-in page template label sets, such as "Product Sales Page", "Risk Disclosure Page", "Health Education Page", etc. Each label set is bound to a set of material category screening conditions and display priority sorting rules. During page initialization, the corresponding label set is selected according to the current page usage, and material screening and sorting are performed to form a target display material queue.

[0050] The sorting logic of the display materials can also be dynamically adjusted according to the user's configuration preferences. For example, the system records the user's commonly used material types and dragging frequencies, and gives a higher display weight to the frequently used materials when generating the target display material queue. It is also possible to introduce a personalized model to perform intelligent sorting of the display materials in combination with the user portrait during page generation. For example, when the health insurance page is targeted at middle-aged and elderly users, pictures with larger fonts and strong color contrasts are automatically displayed first.

[0051] In the positioning coordinate change operation, one implementation method is based on a fixed grid layout, where each material is positioned at a certain starting point and occupied range in the grid coordinate system. For example, material A is positioned at the point (2, 3) and occupies a width of 3 units and a height of 2 units. The responsive layout mechanism can also be used to automatically adjust the material coordinates according to the terminal resolution, so that the relative proportional positions of the materials remain unchanged on different devices. The calculation of the offset can be driven by front-end interaction events. The displacement vector is calculated based on the starting and ending points of the user's drag and is passed into the back-end coordinate update logic. The system automatically detects whether the new coordinates overlap and performs adjustments.

[0052] By linking the selection logic of the displayed materials with the page type configuration parameters and introducing coordinate change operations to construct the page framework, a closed-loop link from material management to structure construction is achieved, improving the automation level and interaction flexibility of page building. The positioning coordinate change mechanism allows users to flexibly adjust the positions of materials according to their needs, and combines collision detection to ensure the structural rationality of page layout, effectively reducing the manual configuration cost and improving the adaptability of page layout.

[0053] S30, insert a display block of a preset element into the page framework;

[0054] In this embodiment, inserting a display block of a preset element into the page framework first depends on the already constructed page framework, which is the layout result after the positioning coordinate change operation of the materials and includes the spatial positions, hierarchical relationships, and coordinate mapping matrices of the target displayed materials. The core purpose of this operation is to complete the page elements that must exist under compliance or business requirements but are not actively added by the user, so that the generated page has integrity and consistency in terms of vision, function, and supervision. Preset elements usually come from a preset element library, which contains a set of element templates predefined and encapsulated for specific page types or business scenarios. Each preset element contains meta-information such as content identification, structure description, adaptation rules, and style rendering parameters.

[0055] The insertion action of the preset element is not a one-size-fits-all forced addition, but is based on the detection of the missing types of compliance elements in the current page framework. This detection process depends on the "required element list" or "compliance inspection list" in the configuration rules. The system traverses the content identifications of the existing elements in the page framework, compares them with the standard list, identifies the missing items, and generates an element missing list. Each missing item is mapped to one or more preset elements. When extracting the target preset elements, the system also refers to the layout strategy, content weight, and interaction characteristics of the current terminal included in the page type configuration parameters to ensure that the selected preset elements achieve a balance between content compliance and display adaptability.

[0056] After extracting the target preset elements, it is necessary to determine their placement positions in the page framework, which are the target layout areas. The determination of the target layout area depends on the framework-level layout strategy, which usually includes page partition division, the priority of each area, and boundary rules. For example, the top area is preferentially allocated for navigation and risk prompt content, and the bottom area is used for compliance texts and disclaimers, etc. This strategy can be preset or dynamically calculated and has a certain adaptation ability. In the actual layout process, the system first identifies suitable available areas, and then makes boundary alignment or centering adjustments based on the dimensions and attributes of the preset elements to ensure spatial coordination and visual balance between the newly inserted elements and the existing content.

[0057] The generation of the display block requires integrating the content attributes of the preset elements and the rendering strategy of the layout area. The content attributes include but are not limited to information types (such as prompts, warnings, text), priorities, visual styles, etc.; the rendering strategy defines style rendering parameters such as border styles, font sizes, background colors, transparencies, etc. The display block not only contains visual rendering-related information but also can contain interactive behavior configurations such as jump links and pop-up triggers. After being generated, the display block is inserted into the target layout area, enters the layout matrix of the page framework, and is processed as a structural unit in subsequent layout parameter encapsulation and preview rendering.

[0058] In one implementation, the detection of missing elements can be achieved through preset field comparison. For example, the system defines two mandatory items, "risk prompt" and "clause link". If these fields cannot be matched in the content identifier set of the current page framework, they are marked as missing items. Another method is based on the business label system, which matches the current page type with regulatory rules to dynamically generate a list of missing elements. It is also possible to update the standard list in real-time through the configuration center with the latest industry regulations to keep the missing element detection timely.

[0059] When determining the target layout area, a configuration-driven static division strategy can be adopted. For example, 20% of the top area is the navigation area, 60% of the middle area is the main display area, and 20% of the bottom area is the compliance information area. It is also possible to identify the currently unoccupied areas through a grid mapping mechanism and automatically calculate the adapted areas according to the spatial requirements of the preset elements. If the page space is tight, a compressed insertion can also be performed, that is, the space for insertion is vacated by reducing the spacing between existing elements.

[0060] During the display block generation process, different page styles can use different rendering templates. For example, in a serious page such as an insurance application page, the display block uses a gray background and a red border to highlight compliance warnings; while in a health guidance page, a card-style flexible color scheme is used to increase reading friendliness. The style parameters can be defined by a design specification file or defined and inherited in the metadata of preset elements. If a functional element is inserted, such as a document download button, it can also automatically bind click events and jump paths to enhance the interaction ability.

[0061] Through the compliance element missing detection and preset element insertion mechanism, the page configuration process has the ability to automatically complete mandatory content while retaining the user's free creation space, thereby effectively improving the compliance, integrity, and display consistency of the page. This mechanism organically combines layout strategies, element content, and rendering parameters, avoiding repeated operations, improving the page construction efficiency, and reducing compliance risks caused by human omissions.

[0062] S40, generate visualization preview data based on the layout parameters of the page framework, and output the visualization preview data to the interface rendering processing module;

[0063] In this embodiment, generating visualization preview data based on the layout parameters of the page framework is the core operation in the page rendering preparation process. The goal is to transform structured spatial layout information, element attributes, and interaction logic into a preview data structure that can be directly parsed and restored by the front-end rendering module. The layout parameters are the cumulative results of previous processes such as positioning coordinate processing and display block insertion. Internally, they contain a rasterized coordinate matrix, viewport resolution parameters, and element hierarchy relationship data, which are used to define the spatial position of elements on the page, the adaptation relationship with the device screen, and the occlusion and priority order of each element when superimposed and displayed.

[0064] The first operation in generating visualization preview data is to parse the layout parameter set. The rasterized coordinate matrix provides the positioning information of page elements in the standard layout unit grid, usually represented by row and column numbers or ratio values; the viewport resolution parameters are used to describe the pixel density, screen width and height, zoom ratio, etc. of the target terminal device, which directly affect the actual rendering pixel calculation of the coordinate data; the element hierarchy relationship data is the display overlay relationship between page elements, such as the z-index value or the element tree structure, which determines the visibility sorting of each element in the final rendering result.

[0065] After the parsing is completed, coordinate mapping transformation needs to be performed to convert the rasterized coordinate data into a set of absolute positioning coordinates adapted to the actual device resolution. This transformation usually depends on the pixel density factor (such as DPI or device zoom ratio) and the screen width and height. The scaling ratio is calculated based on the original reference resolution during page design, and then the original coordinate points are linearly or non-linearly magnified to correspond to the actual display units of the target terminal. This processing ensures that even when the same page is displayed on different devices, it can present a visual effect with consistent size ratios and positional relationships.

[0066] During further processing, it is also necessary to extract the identifiers of interactive elements and event binding strategies from the layout parameters to generate a set of interactive metadata. Each interactive element not only needs to indicate its type, position, and appearance, but also carry its interactive event types (such as click, slide, long press, etc.), event trigger conditions, and bound behavior logics (such as jump paths, function executions, etc.) to support full-link interactive behavior simulation during the page preview stage.

[0067] When constructing the visual preview data, it is necessary to structurally encapsulate the above-generated set of absolute positioning coordinates, viewport resolution parameters, element hierarchy relationship data, and set of interactive metadata to form a composite data structure with strong compatibility and renderability. This data structure should conform to the protocol specifications required by the interface rendering processing module, such as field naming, nested levels, data type conventions, etc., to ensure that the rendering module can efficiently unpack and restore the page state. The preview data is not only used for final rendering, but also can serve as the data basis for subsequent configuration adjustment, audit tracking, template reuse, etc.

[0068] After generation, the visual preview data is pushed to the interface rendering processing module through a preset cross-process communication channel. The cross-process communication channel is a bridge for transmitting structured data between modules and can be constructed using methods such as memory sharing, message queues, WebSocket channels, or standard API interfaces. It has the capabilities of low latency, high reliability, and compatibility with multiple operating environments. After receiving the preview data, the rendering processing module enters the parsing process and generates a preview result consistent with the real page based on the layout coordinates, style attributes, and behavior instructions in the data for users to perform real-time review or further editing.

[0069] In one implementation, the visual preview data is encapsulated using the JSON structure, which includes element position information (absolute coordinates), style information (such as color, font, size), interactive behaviors (such as click jump paths), and terminal adaptation information (resolution identifier, zoom factor, etc.). The rasterized coordinates are calculated by multiplying the row and column numbers by the unit cell width and height, and then combined with the device zoom ratio to finally generate absolute coordinates such as (x: 240px, y: 320px).

[0070] Another approach uses a binary protocol structure to compress the data volume and improve the transmission efficiency on low-bandwidth devices or at the edge. In this approach, all fields use predefined indexes instead of text fields, and the interaction metadata is expressed using event codes and parameter arrays, with a timestamp and an operation source identifier appended to achieve change synchronization in remote preview and multi-user collaborative editing.

[0071] A modular preview framework can also be adopted to divide the generated visual preview data into three parts: LayoutBlock, StyleBlock, and BehaviorBlock, which are separately loaded and rendered in parallel by the rendering module to achieve faster interface response capabilities and more flexible rendering process control.

[0072] By converting the structural layout data of the page framework into standard visual preview data, a real-time preview effect highly adaptable to the terminal device can be achieved, avoiding the inefficient process of switching pages to view the results after repeated modifications. Combining with the cross-process communication mechanism, the rapid transmission of visual preview data between the configuration module and the rendering module enables the rendering result to be highly synchronized with the user operation, reducing the trial-and-error cost, improving the design efficiency, and significantly enhancing the consistency and interactive authenticity of page configuration on multi-terminal devices.

[0073] S50, associate and encode the coordinate mapping data of the page framework with the content identifier of the display block to generate a structured storage file;

[0074] In this embodiment, the coordinate mapping data of the page framework is the result of previous positioning calculations, rasterization modeling, and terminal adaptation processing. Usually, based on the coordinate positions, size ranges, and area identifiers at the element level, it constitutes the core spatial information that can represent the page layout structure. The content identifier of the display block is the unique number of the display material or preset element corresponding to the logical entity in the page framework, which comes from the material resource library or the layout management module and is used to identify the identity, function, and type classification of each display object.

[0075] Associating and encoding the coordinate mapping data of the page framework with the content identifier of the display block is a key operation to achieve the integration of layout logic and content management logic. In the actual implementation process, usually, the two types of information are combined in the form of key-value pairs, taking the content identifier of each display block as the key and the corresponding coordinate mapping data in the page framework as the value, thus generating a complete list of element relationships. This list constitutes the direct mapping set between the page space structure and the display content and is the basic data carrier for subsequent storage, search, preview, and reconstruction of the page structure.

[0076] Based on the generated list of element relationships, further perform encrypted encoding processing on each association record using a hash algorithm to generate a unique relationship identifier. The generation of this identifier usually combines multiple elements such as content identifiers, coordinate mapping data, and the version number of the page framework, and performs mixed encoding through a standard hash function (such as SHA-256 or SM3) to obtain an irreversible, unique, and secure structural fingerprint. This processing can not only be used to accelerate data retrieval but also serve as a basis for page component version control, change identification, and audit tracking.

[0077] At the data structure level, encapsulate the list of element relationships and the corresponding set of relationship identifiers to construct a structured data file. This file generally uses a hierarchical and parsable encoding format, such as JSON, XML, or a structure defined by a binary protocol, and contains multiple field modules, including content identifiers, coordinate data, relationship hashes, version information, generation time, etc. The file structure needs to have good scalability and be able to support subsequent auxiliary fields such as additional interaction rules, style parameters, or label identifiers.

[0078] After the encapsulation is completed, perform data integrity verification processing on the structured data file. The verification process generally uses a checksum algorithm (such as CRC, MD5, or SM3) to encode the entire file data content, generate a short checksum field, and write it into the metadata segment of the structured data file. This checksum is used to verify whether the file is intact, whether there is tampering or format errors during data reading, transmission, or decompression, and is a technical means to ensure the credibility and consistency of the page configuration results in multiple scenarios such as multi-terminal distribution, historical record reconstruction, and configuration restoration.

[0079] By associating the coordinate mapping data in the page framework with the content identifiers of the display blocks one by one and generating a structured data file, the precise binding between the page layout structure and the content identifier is achieved. The structured file has readability, scalability, and security, and ensures the validity and credibility of the data in multiple scenarios through the unique identifier and integrity verification mechanism, thereby improving the automation level and stability of the page configuration process.

[0080] S60, parse the terminal feature parameters in the access request, and generate an access identifier based on the terminal feature parameters;

[0081] In this embodiment, the access request is a request signal transmitted to the server when the end user initiates page loading, rendering, or configuration operations, usually in the form of an HTTP request, WebSocket communication, or a custom protocol message. The terminal characteristic parameters are key device attribute information extracted from the access request, including but not limited to the terminal device type (such as PC, mobile, tablet), operating system version, browser kernel, viewport resolution, device pixel density, input interaction ability (such as whether touch is supported), etc. The methods for obtaining the terminal characteristic parameters include the server parsing the User-Agent string, the front-end actively reporting, the SDK silently collecting, or implementing through mechanisms such as browser environment detection.

[0082] The extraction logic of the terminal characteristic parameters usually adopts a parsing link structure. First, semantic recognition and field extraction are performed on the original request header or request body content, and then the content is converted into a structured representation form through a parameter standardization module, such as the field key-value mapping in the JSON structure. The viewport resolution will be converted into specific width and height values, the device type will be mapped to an enumerable type, and the pixel density can be used as a floating-point scalar. The integrity and accuracy of the terminal characteristic parameters play a key role in subsequent page layout adaptation, material screening, and rendering optimization.

[0083] Generating an access identifier based on the above-structured terminal characteristic parameters is to establish a unique and traceable session identifier in subsequent resource calls, file indexing, rendering path selection, and other links. The access identifier is a computable and recognizable identifier, and its generation usually follows a set of rules or algorithms, taking the terminal characteristic parameters as input, and combining the current request timestamp, page frame identifier, random number, or hash digest generator for combined encoding. The generation method can use standard hash functions (such as SHA-1, SM3) or structure compression functions, or can also use methods such as the snowflake algorithm, time-space hybrid encoding to avoid conflicts.

[0084] After the access identifier is generated, it should have uniqueness, stability, and reversible parsing ability, which can not only accurately refer to the current user terminal access context, but also be used by the system as a basis for indexing structured storage files, locating page versions, or matching page adaptation strategies. In some implementations, the access identifier will also be linked with the permission system, user identity, network node information, etc. to support more complex multi-tenant, distributed, or dynamic permission control systems.

[0085] In one implementation, before loading a page, the front-end device detects the screen width, height, DPI, and operating system type of the terminal through JavaScript, and submits this data together with the page identifier to the server. After parsing the request, the server generates a standardized set of terminal parameters through a rule template, and calls a hashing algorithm to concatenate and encode the page identifier, terminal parameters, and the current millisecond timestamp into an access identifier, which is used to query the index path of the structured data file later.

[0086] In another implementation, the access request already embeds a terminal SDK automatic reporting module, which encapsulates the collected device model, system version number, interaction capability parameters, etc. into a structured body, and the server deserializes and parses it to generate an access identifier. The access identifier contains fields such as device type code, resolution encoding, user feature summary, etc., and uses a bit-field compression method to generate a 64-bit identifier, supporting fast routing and low-latency response.

[0087] It is also possible to combine additional information such as the user's historical access records, geographical location, and network type to expand the dimension of the terminal feature parameters, thereby generating a more refined access identifier to provide support in multi-terminal device switching, access source analysis, and content delivery network (CDN) selection.

[0088] By extracting terminal feature parameters from the access request and generating an access identifier based on them, it is possible to accurately identify and perform personalized adaptation to the page display requirements in different user terminal environments. The access identifier not only provides static adaptation information such as device type and resolution, but can also be used as a unique index for matching structured data files and restoring page layouts, thereby improving page loading efficiency and terminal rendering effects.

[0089] S70, extract the target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the rendering parameters of the target layout metadata and the visualization preview data to generate a target display interface.

[0090] In this embodiment, the access identifier is used as the unique access session identifier generated by the system to accurately locate the data record corresponding to a specific terminal environment in the structured storage file. The structured storage file is a structured data entity that encapsulates page framework layout information, display block content identifiers, and their mapping coordinates, and organizes data using a block-based index and hash key-value mapping. During the process of using the access identifier for file retrieval, the system usually quickly loads the corresponding data block from the file index path based on fields such as the page framework identifier and terminal resolution characteristics contained in the identifier, and extracts the layout metadata required for the current display.

[0091] Target layout metadata is a set of layout instructions extracted from a structured storage file. It contains coordinate mapping information for each display area on the page and the logical position mapping relationship between content identifiers and page frames. It serves as the basis for the spatial configuration of the page frame on a specific device, and contains spatial structural information such as display order, size ratio, and display area division.

[0092] Visual preview data is a collection of data previously generated based on the page framework. It typically includes information such as absolute positioning coordinates, viewport resolution parameters, element hierarchy data, style rendering parameters, and interaction metadata. This data is used to restore the page display effect and support visual layer logic such as style layering, element occlusion relationships, and animation execution order.

[0093] The fusion process involves the unified calculation of the target layout metadata, the style rendering parameters, and the viewport coordinate system in the visual preview data to generate a final rendering configuration with consistent structure and presentation. Core technical operations include coordinate alignment, hierarchical binding, style overlays, and rendering constraint fusion. Specifically, the logical coordinates in the target layout are converted into renderable coordinates based on the actual resolution of the current terminal. The corresponding style parameters are then matched by content identifiers and resource dependencies are loaded to generate a complete display configuration model.

[0094] The target display interface refers to the terminal display page generated after the fused layout instructions and style configuration results are input into the interface rendering engine. It has the characteristics of complete content, unified style, and interactive usability, and can achieve multi-terminal page rendering output that takes into account both consistency and personalization.

[0095] Example illustration: In the field of medical and health services, medical institutions need to display various information pages for patients, such as appointment registration, interpretation of examination results, and health reports. These pages often involve different combinations of display elements, structural logics, and interaction styles. Taking "multi-terminal health report display" as an example, when a patient accesses the examination report page through a mobile phone in the hospital, this page needs to display blood index charts, doctor's interpretation documents, historical comparison content, etc. Since there are differences in screen size, resolution, and performance among the terminal devices used by different patients, the system automatically extracts the corresponding page framework version of the current patient through the access identifier and loads the layout metadata containing content such as chart components, description blocks, and collapsible labels in the structured storage file. Subsequently, the system executes adaptation rules based on the terminal characteristic parameters of the patient's mobile phone (such as resolution 720×1280, Android system version, memory capacity, etc.), fuses the coordinate mapping data with the style rendering parameters, compresses the horizontal ratio, adjusts the font size of chart elements, and hides the auxiliary explanatory content without destroying the content structure, generating a target display interface that is clearer, more compact in structure, and more fluent in interaction on small-screen devices. By fusing the rendering parameters and content positioning information, this display interface highlights the doctor's interpretation information, visually expresses the detection indicators in graphical form, greatly reduces the patient's understanding threshold, and at the same time meets the compliance requirements for the visual display of medical information.

[0096] In the financial services field, insurance company salespeople display health insurance product pages to customers through tablet terminals. The system automatically generates an access identifier based on the terminal characteristic parameters (such as iPad, resolution 2048×1536) in the access request initiated by the salesperson on the client side to locate the structured storage file of the sales product page. The structured storage file records the position, layer, and content identifier of each display block, such as the product cover image, insurance liability table, and insurance purchase notice. During the process of generating the target display interface, the system fuses the layout metadata in the structured storage file with the style rendering parameters bound to the sales template, performs pixel-level scaling on the coordinates, unifies the font, background color, and layer relationship of all display units, and ensures that the page has a good visual rhythm and interaction rhythm on the large-screen terminal. To emphasize the importance of risk warnings, the system binds a high-contrast style to its display block, automatically centers and raises the layer, meets the compliance disclosure requirements during the sales process of financial products, and enables customers to fully identify the core content before signing. This way of generating the display interface driven by the access identifier enhances the expressive ability and display effect of insurance products, and also greatly improves the usability of the sales tool and the page generation efficiency.

[0097] By precisely extracting target layout metadata from a structured storage file using an access identifier and fusing the rendering parameters in the preview data to generate a target display interface, it is possible to achieve dynamic matching and style synchronization between the page display content and the terminal characteristics. This avoids repeated rendering and redundant data transmission, improves the terminal display consistency and loading efficiency, and at the same time enhances the page adaptation ability and rendering flexibility across devices, effectively supporting multi-terminal collaborative display scenarios.

[0098] The present invention relates to the technical field of UI design and can be applied to business scenarios such as fintech and healthcare. It discloses a page layout method driven by display materials, including: obtaining page display materials and storing them in a material resource library, selecting target display materials and performing a positioning coordinate change operation to generate a page framework, inserting a display block of a preset element into the page framework, generating visual preview data based on the layout parameters of the page framework and outputting it to an interface rendering processing module, associating and encoding the coordinate mapping data of the page framework with the content identifiers of the display blocks to generate a structured storage file, parsing the terminal characteristic parameters in the access request and generating an access identifier, and extracting target layout metadata from the structured storage file according to the access identifier and fusing the rendering parameters of the visual preview data to generate a target display interface. By establishing a structured association relationship between the page display materials, coordinate mapping data, and content identifiers, and combining the terminal characteristic parameters to extract layout metadata and rendering parameters for fusion, the present invention can achieve the dynamic generation of the display interface and the accurate presentation of the layout content, improving the flexibility of page generation and the accuracy of rendering.

[0099] In one embodiment, the above step S10 includes:

[0100] S101, receiving the uploaded page display materials, where the page display materials include picture materials and document materials;

[0101] S102, performing format compliance verification processing on the picture materials to generate a format compliance identifier, and performing structure compliance verification processing on the document materials to generate a structure compliance identifier;

[0102] S103, classifying and storing the picture materials that pass the verification into the picture resource directory according to the format compliance identifier, and classifying and storing the document materials that pass the verification into the document resource directory according to the structure compliance identifier;

[0103] S104, extracting the metadata of the picture materials and the metadata of the document materials, and generating a picture material identifier and a document material identifier respectively according to the metadata;

[0104] S105, creating a picture hash index path and a document hash index path respectively according to the picture material identifier and the document material identifier;

[0105] S106. Store the source files of the picture materials and the source files of the document materials into the storage nodes corresponding to the picture hash index path and the storage nodes corresponding to the document hash index path respectively.

[0106] In this embodiment, the process of receiving page display materials usually involves a user uploading pictures and document files required for page design through a configuration platform, and this process is the starting point of page configuration. Page display materials should be understood here as image content (such as background images, function icons, banner pictures) and structured explanatory documents (such as product manuals, compliance documents, risk warning documents, etc.) to be presented in the final page, and their upload forms can be multi-file batch upload, interface call upload, or remote address pulling. To improve management efficiency and resource reliability, basic description information such as material usage, business attribution, version information, etc. needs to be carried during the material upload process.

[0107] Performing format compliance verification processing on picture materials is a necessary measure to ensure that the uploaded pictures meet the requirements of the display platform. Format compliance verification generally includes picture type verification (such as whether it is a supported format such as PNG, JPG, or WEBP), size range verification (whether it is between the minimum width and height and the maximum width and height), and file size limit verification. The format compliance flag can be set as a structured result object, indicating whether each verification passes and attaching a failure reason prompt. For document materials, structural compliance verification processing needs to be carried out to check whether it has a complete structural hierarchy (such as PDF title structure, table of contents labels in DOC, XHTML structure validity, etc.), whether it can be parsed and previewed, etc., to generate a structural compliance flag to ensure the processability and compliance of the document content.

[0108] After the compliance flags are generated, the picture and document materials that pass the verification are classified and stored in their respective resource directories according to their content characteristics and uses. The picture resource directory usually establishes a file structure according to material types (background, icon, button) or business tags (product, health, insurance), and the document resource directory can be divided according to document uses (product description, regulatory text, user agreement). The classification structure of the directory not only improves the resource call efficiency but also provides basic support for subsequent material screening and permission isolation.

[0109] After the materials are initially stored, the system extracts the metadata information of each material file. These metadata include file name, format, size, upload time, business tag, uploader information, etc., and are extracted into a unified field set through a standardized parsing process. Based on the metadata, a material identifier is generated. The identifier design should ensure uniqueness and traceability, and generally can be formed by combining the material upload timestamp, business tag, and file hash value.

[0110] A hash index path is further generated from the material identifier to establish a mapping relationship between the physical file and the index structure. Image hash index paths and document hash index paths should follow consistent naming conventions but belong to separate namespaces to avoid confusion. The path generation process can introduce multi-level directories to compress hash conflicts and integrate with content distribution strategies to achieve distributed resource balancing.

[0111] Ultimately, the image and document source files are written to the storage node corresponding to the hash index path. This storage node can be a logical partition in an object storage bucket, a file system directory, or an automatically assigned shard node in a distributed file cluster. The writing process incorporates checksums, permissions, and version control fields to construct a complete metadata record, ensuring that the source files are stored in a highly reliable and accessible environment, facilitating subsequent access and traceability.

[0112] This embodiment implements automated verification and fine classification of materials during the warehousing process through processing procedures such as structured uploading, compliance verification, metadata extraction, and index path generation. This ensures that in the subsequent page generation process, rapid calling and path positioning can be performed based on identifiers, significantly improving the standardization and traceability of material resource management, effectively avoiding page rendering failures due to non-standard formats, and reducing front-end deployment pressure.

[0113] In one embodiment, the above step S20 includes:

[0114] S201, screening candidate display materials in the material resource library according to page type configuration parameters;

[0115] S202, sorting the candidate display materials based on display priority weights, and screening according to a preset weight threshold to generate a target display material queue;

[0116] S203, determining the initial positioning coordinates of the target display material according to the viewport resolution parameter;

[0117] S204, generating a coordinate offset according to the layout adjustment instruction, where the coordinate offset is a displacement vector generated by the user's dragging operation;

[0118] S205, updating the initial positioning coordinates according to the coordinate offset to generate coordinates to be verified;

[0119] S206, performing collision detection processing on the coordinates to be verified to generate safe positioning coordinates;

[0120] S207, constructing a rasterized coordinate matrix according to the safety positioning coordinates;

[0121] S208, associating the rasterized coordinate matrix with the target display material and storing them in a layout database;

[0122] S209. Generate a set of layout parameters for the page frame based on the rasterized coordinate matrix.

[0123] In this embodiment, the display material screening usually starts with the page type configuration parameters, which represent the structural specifications and display element sets required by the business scenario to which the page belongs, including screening indicators such as display material categories, material dimensions, and key content tags. The material resource library is a content storage system open to the configuration system. The internal materials contain predefined structured information and can be quickly retrieved through metadata and tag structures. The candidate display materials refer to the subset of materials that meet the configuration requirements of the current page type. The screening logic is not only based on the static tag attributes of the materials but also can introduce context environment data such as business date, product type, and terminal adaptability as auxiliary features.

[0124] The display priority weight is the basis for sorting the importance of candidate materials. This weight is composed of multiple factors, such as material usage frequency, user click popularity, and associated page conversion data. The sorting process can be achieved through a weighted scoring mechanism, and on this basis, a weight threshold is set to control the quantity and quality of the finally selected materials. The target display material queue is the result of quantitative screening based on the weight sorting.

[0125] The determination of the initial positioning coordinates needs to combine the viewport resolution parameters of the terminal, which are usually automatically detected when the page is loaded and passed as parameters for calculating the default rendering position of the display materials on the target page. The coordinates here are relative coordinates and can be calculated based on the design drawing or raster division template.

[0126] During the page editing process, the user can fine-tune the position of the material through the drag operation. The system will capture the drag path and generate a coordinate offset, which is a vector data recording the displacement values in both the horizontal and vertical dimensions. The initial positioning coordinates plus the offset form the coordinates to be verified. Since it is not yet confirmed whether this coordinate will cause coverage or out-of-bounds risks with other materials, collision detection needs to be performed.

[0127] Collision detection reads the space occupancy information of the existing materials on the current page, performs geometric calculations between blocks, and determines whether there are illegal situations such as intersection, overlap, and out-of-bounds. If there is a conflict, the coordinate position needs to be adjusted according to the predefined strategy, such as automatic adsorption, avoidance, or micro translation, so as to generate safe positioning coordinates.

[0128] The secure positioning coordinates are transformed into a rasterized coordinate matrix, which is a spatial mapping of the material positions after dividing the page space into multiple uniform grid points, for subsequent page layout rendering, configuration reconstruction, and version management. This matrix is a discrete representation form, which is conducive to the system's structured processing of the layout state.

[0129] After mapping the generated rasterized coordinate matrix with the display materials, it is stored in the layout database. The storage structure here is a mapping table between the material identifier and the spatial coordinate data, and content such as interaction events, style information, and version tags can be attached at the same time.

[0130] Finally, the layout parameter set of the page framework is a structured description comprehensively calculated based on the rasterized coordinate matrix, including information such as material positions, hierarchical relationships, interactive area identifiers, and style template binding identifiers, which is used to support subsequent preview rendering and structured file generation.

[0131] Example description: In the medical and health business scenario, operators need to quickly configure the insurance product introduction page, which includes material content such as product pictures, insurance purchase instructions, risk warnings, and exemption clauses. The system identifies it as a health insurance configuration page according to the page type parameter, automatically filters picture and document materials with labels such as "insurance purchase guide" and "drug list", and selects the main picture and high-frequency display instructions after sorting by display weight. After the page is initially loaded, the initial positions of the materials are calculated according to the terminal resolution. The user drags and adjusts the exemption instructions to the bottom area, and the system records the displacement vector and performs collision detection to ensure that it does not cover the configured product information block. The finally generated rasterized layout parameters are stored in the configuration database to support subsequent interface preview and configuration backtracking.

[0132] In the application of the financial industry, a fund company configures the promotional page of structured wealth management products. The system identifies it as a high-risk product, automatically filters picture materials such as "product income description" and "investor instructions", and fixedly configures the "risk warning" element to be displayed first. The page framework is quickly built through intelligent sorting and coordinate mapping to ensure that both compliance display and differential content arrangement are satisfied simultaneously.

[0133] In this embodiment, the page type configuration parameter is used to limit the material screening range, the candidate materials are sorted by display priority, and the initial coordinates are generated in combination with the terminal viewport parameter. After the user interaction operation, displacement calculation and collision detection are introduced to dynamically adjust the material positioning position. Finally, a rasterized coordinate matrix is constructed based on the secure positioning result and layout parameters are generated, realizing the orderly arrangement and position control of the display materials in the page structure, and improving the layout accuracy and configuration efficiency.

[0134] In one embodiment, the above step S30 includes:

[0135] S301. Detect the type of missing compliance elements in the page framework and generate an element missing list;

[0136] S302. Extract corresponding target preset elements from the preset element library according to the element missing list;

[0137] S303. Determine the target layout area in the page framework according to the frame-level layout strategy in the page type configuration parameters;

[0138] S304. Generate a display block of the target preset element according to the content attributes of the target preset element and the block-level layout strategy of the target layout area;

[0139] S305. Insert the display block into the target layout area.

[0140] In this embodiment, during the page configuration process, to meet the compliance requirements of the displayed content, a type of preset element needs to be inserted into the page structure. These preset elements usually represent mandatory display information structures, such as risk warning messages, standardized instruction documents, clause templates, etc. First, based on the existing page framework, it is necessary to perform an element integrity check on the configured content. This check logic depends on a set of compliance rules related to the page type. For example, for a health insurance page, a risk warning book, an exemption clause, etc. are required to be displayed. By comparing the set of content identifiers currently configured on the page with this set of compliance rules, the mandatory display elements missing from the current page are identified, and a corresponding missing list is generated. Each type of missing element in this list is represented by a standard type identifier.

[0141] After generating the element missing list, it is necessary to retrieve the preset elements that meet the missing item type matching conditions through the matching logic with the preset element library. Each preset element contains data structures such as its unique identifier, affiliated classification, content structure information, and adaptation scenario description, etc., which are used to support the subsequent generation of the display area. The design of the preset element library can be indexed and accelerated according to the type structure, usage frequency, or page purpose to improve the retrieval efficiency and adaptation accuracy.

[0142] Locating the rendering positions of these elements in the page depends on the frame-level layout strategy set in the page type configuration parameters. This layout strategy can include predefined area partitions (such as the page header, main content area, sidebar, page footer, etc.), area priorities, and element display density limits, etc. By reading these rules and combining the actual layout status of the current page framework, the most suitable position for each type of target preset element to be displayed is determined from them, and the target layout area information is generated. This area information usually exists in the form of a logical identifier or a coordinate space boundary, indicating the display area available for insertion.

[0143] Based on the content attributes of each target preset element, such as display size, content density, interaction level, etc., combined with the block-level layout strategy in the target layout area assigned to it, generate the display block of the preset element on the page. The block-level layout strategy defines the microscopic arrangement method of the element in the layout area, including a set of rendering parameters such as precise layout coordinates (such as relative / absolute position), arrangement order, hierarchical relationship, responsive adjustment parameters, background style, border style, font configuration, etc. The generated display block should have complete rendering information for subsequent page generation logic to use.

[0144] Finally, insert the generated display block into its corresponding target layout area, and update the page frame structure data so that it can be directly used by the subsequent visual preview module and layout parameter generation module. This insertion operation needs to ensure that there are no coordinate or hierarchical conflicts with the existing display materials. Therefore, it usually includes a coordinate occupancy detection and hierarchical conflict judgment mechanism before insertion to ensure the presentation stability and readability of the preset element on the page.

[0145] In this embodiment, by automatically detecting missing compliant elements in the page frame and retrieving matching items from the preset element library and inserting them into the page, not only the standardization and consistency of page generation are improved, but also the risk of manual configuration missing key content is reduced. The double-layer structure design of the layout strategy (frame-level layout strategy and block-level layout strategy) enables each display block to be accurately embedded in a reasonable position and present a unified style, effectively solving the problems of conflicts between page layout and compliant content, display misalignment, and element overlap in traditional configurations. It enables the page frame to automatically supplement the elements that must be displayed in the regulatory requirements or platform specifications after the initial content configuration, improves the compliance rate and rendering quality of page configuration, reduces the frequency of manual intervention, and realizes the integrated control of compliant content and page structure.

[0146] In one embodiment, the above step S40 includes:

[0147] S401, parse the layout parameter set of the page frame, where the layout parameter set includes a rasterized coordinate matrix, viewport resolution parameters, and element hierarchical relationship data;

[0148] S402, perform coordinate mapping conversion on the rasterized coordinate matrix according to the device pixel density and screen size values in the viewport resolution parameters to generate an absolute positioning coordinate set;

[0149] S403, extract the identifiers and event binding strategies of interactive elements from the layout parameter set to generate an interactive metadata set;

[0150] S404. Package the absolute positioning coordinate set, viewport resolution parameter, element hierarchy relationship data, and interaction metadata set into visualization preview data;

[0151] S405. Transmit the visualization preview data to the rendering queue of the interface rendering processing module through a preset cross-process communication channel.

[0152] In this embodiment, the layout parameter set is a set of structured configuration data generated after the page framework is formed, mainly used to describe the spatial positions, display levels, and rendering control information of various display elements on the page. This set can consist of three core data: a rasterized coordinate matrix, a viewport resolution parameter, and element hierarchy relationship data. The rasterized coordinate matrix is used to describe the positioning results of display materials in the logical raster system and is a two-dimensional positioning structure formed from the security positioning coordinates in the previous steps. The viewport resolution parameter reflects the screen size and pixel density information of the current running terminal device and usually includes the screen width, height, and dpi scaling factor, which are used for subsequent coordinate mapping conversion. The element hierarchy relationship data is used to describe the stacking order of display materials in the vertical space, such as the abstract form of the Z-index value.

[0153] When performing absolute positioning calculations, coordinate mapping conversion is a necessary operation to convert raster coordinates into pixel-level coordinates on the device screen. This calculation performs linear scaling based on the device pixel density and screen size values in the viewport resolution parameter and combines the raster boundary width for compensation and correction to ensure that the positioning results maintain a consistent display ratio on devices of different sizes.

[0154] The interaction metadata set is a structured data set formed by extracting interactive elements from the layout parameter set and associating their event binding strategies. Typical fields include the element unique identifier, interaction event types (click, long press, swipe, etc.), event trigger conditions, and backend response interface addresses, etc. The event binding strategy can be the system default rule or can be custom-set by the page designer through the interaction configuration interface.

[0155] The encapsulation process of the visualization preview data is to uniformly structure and package the rendering-related data from different sources into a standard data object. This data structure should meet the input protocol requirements of the interface rendering processing module and is usually in a format supported by the front-end rendering engine, such as a JSON object structure or a DOM virtual tree structure. The integrity and logical consistency of the data fields must be maintained in the encapsulated data to ensure correct parsing in the rendering queue.

[0156] The cross - process communication channel is an interface mechanism for completing data exchange between modules, usually a message queue, a pipe communication, or an IPC protocol interface. In this scenario, the encapsulated visual preview data is sent through this channel to the rendering queue inside the interface rendering processing module, and the latter is responsible for docking the received preview data and triggering the page rendering task.

[0157] In actual implementation, the rasterized coordinate matrix is usually constructed based on a 12 - column or 24 - column responsive layout system, and each display element is assigned a raster starting position and a span value. When parsing the viewport resolution parameters, the actual display parameters of the current device can be obtained through API interfaces such as window.devicePixelRatio and window.innerWidth in the browser environment.

[0158] The coordinate mapping conversion process can be calculated in the following way: multiply the rasterized coordinate value by the width of a single raster, and then multiply by the pixel density factor to obtain the absolute positioning coordinate. For example, assume an element starts at the 2nd column, spans 4 columns, each column is 80 pixels wide, and on a terminal with a dpi of 2.0, its pixel positioning range should be between 320 and 960 pixels.

[0159] The identifier of the interactive element can be automatically generated through a unique ID or a component path, and the event binding policy can be visually set through the interactive configuration interface, and the binding result is written into the metadata field.

[0160] When encapsulating the preview data, a unified data model is defined. For example, it includes four major fields: position, layer, interaction, and style, which are used to describe the coordinate information, hierarchical attributes, interaction metadata, and style configuration of the element respectively.

[0161] The implementation of cross - process communication can be based on the IPC mechanism of running environments such as Electron, Node.js, or WebWorker. The data is sent through the message channel to the rendering queue of the front - end module, and this queue can listen for data changes and dynamically execute DOM updates or Canvas drawing.

[0162] In this embodiment, by integrating the positioning data, viewport information, and interaction behavior in the layout parameters in advance during the generation of preview data, and outputting them to the rendering module in real - time through a standardized data encapsulation and communication mechanism, the visual response ability of the page configuration system is effectively improved. It can ensure that the page design and preview behavior are consistent in structure and rendering performance, reduce the problem of frequent trial - and - error in traditional previews, and improve the overall operation efficiency and user experience consistency.

[0163] In one embodiment, the above - mentioned step S50 includes:

[0164] S501, Extract coordinate mapping data from the layout parameters of the page frame, and extract content identifiers from the metadata of the display block;

[0165] S502, Perform a key-value pair binding operation on the coordinate mapping data and content identifiers to generate an element relationship list;

[0166] S503, Generate a unique relationship identifier for each record in the element relationship list based on the secure hash algorithm;

[0167] S504, Package the element relationship list and relationship identifier into a structured storage file;

[0168] S505, Perform data integrity verification on the structured storage file, generate a verification code and write it into the file metadata segment of the structured storage file.

[0169] In this embodiment, the coordinate mapping data of the page frame is derived from the rasterized coordinate matrix generated in the previous operation and the absolute positioning information obtained by terminal adaptation, representing the final display position of each display block on the page. This data is usually organized in the form of a two-dimensional coordinate array or a positioning object, and contains fields such as the horizontal starting point, vertical starting point, spanning cell length, and positioning value after pixel density scaling, which are used to support subsequent data binding and layout restoration.

[0170] The content identifier of the display block is the unique identifier of each logical display unit on the page, used to mark its corresponding business content, material source, or functional meaning. This identifier is usually automatically assigned by the system when the display block is generated, or can be inherited from the uploaded material metadata, such as using the content summary, index ID, material hash value, etc. as the identifier.

[0171] The key-value pair binding operation is a processing method for structurally connecting two technical objects with different sources but logically related. In this scenario, by taking each set of coordinate mapping data as the key and matching its corresponding content identifier as the value, a mapping relationship of "location on the page - content contained" of the display unit is formed, and then a complete element relationship list is constructed. This list is expressed in an indexable list structure, which is convenient for subsequent searching, encoding, and storage.

[0172] In order to achieve a unique identifier for each binding record in the system and ensure the immutability of the data, the system will generate a relationship identifier based on the secure hash algorithm. The hash algorithm used can be the national cryptographic standard, SHA-256, or other salted hash algorithms, and its input parameters include the content identifier of the display unit, the coordinate mapping data, and the version number of the page frame. The page frame version number is used to distinguish layout changes at different time points or versions, ensuring that the same display content can generate different identifiers in pages of different versions.

[0173] A structured storage file is a data file that stores the corresponding relationship between content and layout in a structured format, usually in JSON, YAML, or Protobuf encoding format, and is used to support cross-module reading, storage, verification, and invocation. There are three core fields in the structured storage file: one is the relationship identifier field, which stores the unique code generated by hashing each record; the second is the element list field, which records the content identifier, rasterized coordinate data, and record generation timestamp of each display block; the third is the file metadata field, which includes the page frame identifier, creation time, and data checksum obtained by performing verification on the entire file content.

[0174] Data integrity verification is an important step to ensure that the structured storage file has not been maliciously modified or damaged by abnormal transmission. By extracting fields from the file content in the standard order and performing a hash calculation, a unique checksum (such as a digest signature) can be generated. This checksum is written into the file metadata segment and used as the basis for integrity verification in any future read operation to prevent data contamination or misreading.

[0175] In the specific implementation, the process of extracting coordinate mapping data is usually completed by the layout module. This module traverses each display unit node in the page frame and obtains its latest absolute positioning coordinates and logical hierarchy information. At the same time, the content identifier of each block is read from the display block generation module to ensure the one-to-one correspondence between position and semantics. When constructing the element relationship list, a Map data structure can be used to achieve binding. For example, using the content identifier as the key and the coordinate data as the value, or constructing an array of structures, each item including information such as the identifier, horizontal and vertical coordinates, and positioning accuracy. The system will traverse this structure and perform a hash calculation on each record. The input parameters are the serialized and merged content identifier + coordinate data + frame version number to form the relationship identifier. The encapsulation of the structured file can be completed by the file writing module. The system constructs the above relationship list and identifier into a structured object in the field order and attaches metadata information such as the timestamp, page frame identifier, and version number. The final encapsulation result is written to the specified path or uploaded to the cloud storage system. The checksum generation process is similar to the relationship identifier generation process, but its input is the binary content or canonical serialization result of the entire structured storage file. The system uses a consistent hash function to perform a digest operation on all data, and the result is stored in the "checksum" field of the file metadata segment. The reading module can calculate the file digest again in subsequent operations and compare it with the checksum field to ensure that the data is intact and unchanged.

[0176] In this embodiment, by establishing a binding relationship between the page coordinate mapping data and the content identifier, using a hash identifier to ensure uniqueness, and then encapsulating and verifying in a structured format, it not only realizes the efficient storage and fast reading of page composition information, but also guarantees the consistency and security during the page restoration process.

[0177] In one embodiment, the above step S70 includes:

[0178] S701, parsing the page frame identifier and terminal feature parameters in the access identifier;

[0179] S702, loading the corresponding structured storage file from a predefined storage path according to the page frame identifier;

[0180] S703, based on the resolution matching rule in the terminal feature parameters, screening out the element relationship subset that matches the current terminal from the element relationship list of the structured storage file, and using the element relationship subset as the target layout metadata;

[0181] S704, extracting the viewport resolution parameters, element hierarchy relationship data, and style rendering parameters associated with the terminal feature parameters from the visualization preview data;

[0182] S705, based on the viewport resolution parameters and element hierarchy relationship data, performing layout adaptation analysis on the coordinate mapping data in the target layout metadata to generate the adapted coordinate mapping data and hierarchy relationship;

[0183] S706, binding the style rendering parameters to the corresponding content identifier in the target layout metadata;

[0184] S707, generating a target display interface according to the adapted coordinate mapping data, hierarchy relationship, and the style rendering parameters;

[0185] S708, pushing the target display interface to the rendering queue of the current terminal.

[0186] In this embodiment, the access identifier is an important index for indicating the page frame content and the terminal presentation environment, and it includes two components: the page frame identifier and the terminal feature parameters. The page frame identifier is usually a unique identifier associated when the structured storage file is generated, and it can be a hash-based encoding, a file path pointer, or a database index key, which is used to locate the corresponding page description data from the existing structure. The terminal feature parameters include attributes such as terminal resolution, device type, and system type, which are used to determine the adaptation strategy for subsequent layout rendering.

[0187] The operation of loading the structured storage file depends on the parsing of the page frame identifier, and the system loads the corresponding data entity through predefined path rules, database queries, or distributed file system retrieval. The structured storage file internally stores an element relationship list, where each record associates a content identifier with its corresponding coordinate data and hierarchy information in the page.

[0188] The process of screening the subset of element relationships is based on the resolution or device type given in the terminal characteristic parameters for matching judgment. Methods such as interval matching, label matching, or vector similarity matching can be used to screen out the content subset suitable for the current terminal, and the target layout metadata is formed based on this. This target layout metadata is the basis of the page structure to be rendered on the terminal.

[0189] The rendering parameters come from the visual preview data generated in the previous steps, which includes the style information, hierarchical relationship of elements, and viewport resolution parameters of the elements. The viewport resolution parameters are used to determine the actual available display area of the current terminal; the element hierarchical relationship is used to define the overlay order or stacking effect during rendering; the style rendering parameters include interface visual characteristics such as color, border, shadow, and font.

[0190] Layout adaptation analysis refers to the conversion calculation of the original coordinates in the target layout metadata based on the display characteristics of the target terminal. This calculation needs to consider factors such as scaling ratio, content density, and accessibility of the operation area, so as to generate the adapted coordinate mapping data and hierarchical structure. The adapted coordinates should satisfy both visual consistency and interaction usability.

[0191] The operation of binding the style rendering parameters writes the style information into each node of the target layout metadata based on the corresponding relationship of the content identifiers. The data after binding can be directly used to generate the front-end display structure, reducing the style reorganization overhead during real-time rendering.

[0192] The final interface generation link assembles a complete page structure tree according to the adapted coordinate data, hierarchical structure, and bound styles, and then generates a displayable layer structure through a template engine or a front-end rendering framework. The generated result is sent to the rendering queue of the terminal for display, usually implemented through a browser rendering pipeline or an embedded interface component.

[0193] In the actual deployment process, the generation of access identifiers is usually completed by the front-end request initiation module. This module constructs a set of parameters based on the current terminal information and page context and encodes them to generate access identifiers. This identifier is parsed on the server side into a page frame identifier and a terminal parameter set. The module for loading structured files reads the corresponding data files from object storage or a database according to the page frame identifier. The read results include element coordinate data, content identifiers, version information, etc. The terminal matching module matches and filters the resolution information of the current terminal with the resolution tags in the structured file, and screens out the eligible element subset as the target layout metadata. The adaptation calculation logic calculates the scaling ratio based on the pixel density of the current device and the design benchmark, and applies it to the remapping of coordinate data. At the same time, considering the characteristics of touch devices, the size of the interaction area is adjusted to ensure operability. The hierarchical relationship is adjusted according to the original design weights, and element rearrangement is allowed in specific scenarios. The style parameter binding process can be achieved through key-value matching. The system writes the style set in the visual preview data into the style field of the target layout metadata according to the content identifier. The rendering generation module uses the above-bound structure to generate a page description structure body and calls the terminal rendering engine (such as WebView, Flutter, React Native) for interface drawing. During the process of finally pushing the data to the rendering queue, the system can choose to use means such as shared memory, inter-process message mechanism, or remote call to complete the transmission, ensuring that the data transitions from the server to the terminal display module with low latency and low loss.

[0194] Example illustration: In the medical and health business scenario, an insurance company needs to quickly launch the promotion pages of a batch of major disease insurance products for embedding and display on multiple terminals such as WeChat official accounts, mini-programs, and APPs, and ensure that the page content complies with the mandatory display requirements for risk warnings, insurance purchase notices, and clause summaries in the "Health Insurance Management Measures". Business operators first upload the graphic and text materials and compliance documents of the product introduction to the configuration system. After passing the compliance check, the system automatically generates picture material identifiers and document material identifiers, and stores their source files in the distributed resource library according to the hash path structure, forming a unified material management mechanism.

[0195] Operators select the page type suitable for the "health insurance product page" through the page editing interface. The system automatically configures parameters according to this page type to screen and match the compliant materials, including product introduction pictures, risk warning letters, exemption clause documents, etc. The screened materials are sorted by weight according to the display priority defined by the system, and at the same time, users are supported to drag and sort and fine-tune the positions. After the preliminary arrangement is completed, the system will automatically execute positioning coordinate calculation and collision detection, and finally generate a rasterized coordinate matrix that meets the design specifications and construct a page frame, generating the corresponding layout parameter set.

[0196] According to predefined rules, the system identifies the missing "Health Declaration" module and "Product Liability Description" module on the current page, automatically extracts the structured field content from the preset element library and inserts it into the display block according to the target area. At the same time, style parameters and layout coordinates are generated to ensure that the page has clear structure and balanced display while the content complies with regulations.

[0197] After the page framework is formed, the system further analyzes the layout parameters, combines the viewport parameters and pixel density information in the current operating device (such as a PC browser with 1920×1080 or an iPhone device), converts the rasterized coordinates into absolute positioning coordinates, and generates visual preview data containing event interaction rules to ensure that the page effect previewed by the operator in real time is consistent with the terminal display. This data is encapsulated in the cross-process communication channel and transmitted to the front-end rendering module for real-time display in the operation interface.

[0198] After the configuration is completed, the system will perform structured encoding on the coordinate mapping data of the page framework and the content identifiers of all display blocks to generate a structured storage file. This file records the unique hash relationship identifier, content metadata and its positioning coordinates of each display element, and generates an integrity verification code for subsequent page backtracking, version restoration and compliance auditing.

[0199] When a user accesses this page on WeChat or the APP side, the request contains parameters such as device information, terminal resolution, and used language. The system generates an access identifier based on these terminal characteristic parameters and quickly extracts the target layout metadata adapted to the terminal from the structured file. The system fuses this metadata with the previously generated visual preview data to complete coordinate adaptation, rearrangement of hierarchical relationships, and binding of style parameters to generate the final display interface. The page maintains the same information structure and visual style on different terminals, and at the same time fully meets the user experience and regulatory requirements in terms of loading efficiency, content compliance, display logic, etc.

[0200] In this embodiment, by combining the access identifier parsing and the structured storage file matching, the dynamic adaptation of the page layout to the terminal display environment can be realized, effectively improving the cross-device display consistency. After the rendering parameters in the target layout metadata and the visual preview data are fused, common rendering problems such as style loss and hierarchical dislocation can be reduced. With the help of the coordinate adaptation calculation and style binding mechanism, the system can implement a data-driven display logic based on unified configuration, efficiently and stably generate the final display interface in different terminal environments, improve the interface loading performance and enhance the user interaction experience.

[0201] In one embodiment, a page layout device driven by display materials is provided. The page layout device driven by display materials corresponds one-to-one to the page layout method driven by display materials in the above embodiment. Refer to Figure 3 , Figure 3This is a schematic diagram of the functional modules of a preferred embodiment of the page layout device driven by display materials according to the present invention. The material access module 10, the material screening module 20, the element insertion module 30, the preview generation module 40, the data encoding module 50, the access identification module 60, and the interface generation module 70. The detailed description of each functional module is as follows:

[0202] The material access module 10 is used to obtain page display materials and store the page display materials in a material resource library;

[0203] The material screening module 20 is used to select target display materials from the material resource library and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0204] The element insertion module 30 is used to insert a display block of a preset element into the page framework;

[0205] The preview generation module 40 is used to generate visual preview data based on the layout parameters of the page framework and output the visual preview data to an interface rendering processing module;

[0206] The data encoding module 50 is used to associate and encode the coordinate mapping data of the page framework with the content identifiers of the display blocks to generate a structured storage file;

[0207] The access identification module 60 is used to analyze the terminal feature parameters in an access request and generate an access identification based on the terminal feature parameters;

[0208] The interface generation module 70 is used to extract target layout metadata from the corresponding structured storage file according to the access identification, and fuse the rendering parameters of the target layout metadata and the visual preview data to generate a target display interface.

[0209] In an embodiment, the material access module 10 is specifically used for:

[0210] Receiving uploaded page display materials, where the page display materials include picture materials and document materials;

[0211] Performing format compliance verification processing on the picture materials to generate a format compliance identifier, and performing structure compliance verification processing on the document materials to generate a structure compliance identifier;

[0212] Classifying and storing the verified picture materials in a picture resource directory according to the format compliance identifier, and classifying and storing the verified document materials in a document resource directory according to the structure compliance identifier;

[0213] Extracting the metadata of the picture materials and the metadata of the document materials, and generating a picture material identifier and a document material identifier respectively according to the metadata;

[0214] Create a picture hash index path and a document hash index path respectively according to the picture material identifier and the document material identifier;

[0215] Store the source files of the picture material and the document material into the storage nodes corresponding to the picture hash index path and the document hash index path respectively.

[0216] In one embodiment, the material screening module 20 is specifically configured to:

[0217] Screen the candidate display materials in the material resource library according to the page type configuration parameters;

[0218] Sort the candidate display materials based on the display priority weight, and screen and generate a target display material queue according to a preset weight threshold;

[0219] Determine the initial positioning coordinates of the target display material according to the viewport resolution parameters;

[0220] Generate a coordinate offset according to the layout adjustment instruction, where the coordinate offset is the displacement vector generated by the user's dragging operation;

[0221] Update the initial positioning coordinates according to the coordinate offset to generate coordinates to be verified;

[0222] Perform collision detection processing on the coordinates to be verified to generate safe positioning coordinates;

[0223] Construct a rasterized coordinate matrix according to the safe positioning coordinates;

[0224] Associate and store the rasterized coordinate matrix with the target display material in the layout database;

[0225] Generate a set of layout parameters for the page frame based on the rasterized coordinate matrix.

[0226] In one embodiment, the element insertion module 30 is specifically configured to:

[0227] Detect the missing types of compliant elements in the page frame and generate a list of missing elements;

[0228] Extract corresponding target preset elements from a preset element library according to the list of missing elements;

[0229] Determine the target layout area in the page frame according to the frame-level layout strategy in the page type configuration parameters;

[0230] Generate a display block of the target preset element according to the content attributes of the target preset element and the block-level layout strategy of the target layout area.

[0231] Insert the display block into the target layout area.

[0232] In one embodiment, the preview generation module 40 is specifically configured to:

[0233] Parse the layout parameter set of the page frame, where the layout parameter set includes a rasterized coordinate matrix, a viewport resolution parameter, and element hierarchy relationship data;

[0234] Perform coordinate mapping conversion on the rasterized coordinate matrix according to the device pixel density and screen size values in the viewport resolution parameter to generate an absolute positioning coordinate set;

[0235] Extract the identifiers of interactive elements and event binding policies from the layout parameter set to generate an interactive metadata set;

[0236] Package the absolute positioning coordinate set, the viewport resolution parameter, the element hierarchy relationship data, and the interactive metadata set into visual preview data;

[0237] Transmit the visual preview data to the rendering queue of the interface rendering processing module through a preset cross-process communication channel.

[0238] In one embodiment, the data encoding module 50 is specifically configured to:

[0239] Extract coordinate mapping data from the layout parameters of the page frame, and extract content identifiers from the metadata of the display block;

[0240] Perform a key-value pair binding operation on the coordinate mapping data and the content identifier to generate an element relationship list;

[0241] Generate a unique relationship identifier for each record in the element relationship list based on a secure hash algorithm;

[0242] Package the element relationship list and the relationship identifier into a structured storage file;

[0243] Perform data integrity verification on the structured storage file, generate a verification code, and write it into the file metadata segment of the structured storage file.

[0244] In one embodiment, the interface generation module 70 is specifically configured to:

[0245] Parse the page frame identifier and terminal feature parameters in the access identifier;

[0246] Load the corresponding structured storage file from a predefined storage path according to the page frame identifier;

[0247] Based on the resolution matching rule in the terminal feature parameters, filter out the subset of element relationships that match the current terminal from the element relationship list of the structured storage file, and use the subset of element relationships as the target layout metadata;

[0248] Extract the viewport resolution parameter, element hierarchical relationship data, and style rendering parameter associated with the terminal feature parameters from the visual preview data;

[0249] Based on the viewport resolution parameter and the element hierarchical relationship data, perform layout adaptation analysis on the coordinate mapping data in the target layout metadata to generate the adapted coordinate mapping data and hierarchical relationship;

[0250] Bind the style rendering parameter to the corresponding content identifier in the target layout metadata;

[0251] Generate a target display interface according to the adapted coordinate mapping data, hierarchical relationship, and the style rendering parameter;

[0252] Push the target display interface to the rendering queue of the current terminal.

[0253] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as shown in Figure 4 The figure. The computer device includes a processor, a memory, a network interface, and a database connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile and / or volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external client through a network connection. When the computer program is executed by the processor, it realizes the functions or steps of the server side of a page layout method driven by display materials.

[0254] In one embodiment, a computer device is provided. The computer device may be a client, and its internal structure diagram may be as shown in Figure 5As shown in the figure. The computer device includes a processor, a memory, a network interface, a display screen, and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server through a network connection. When the computer program is executed by the processor, it realizes the functions or steps on the user side of a page layout method driven by display materials

[0255] 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. When the processor executes the computer program, the following steps are realized:

[0256] Obtain page display materials and store the page display materials in a material resource library;

[0257] Select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0258] Insert a display block of a preset element into the page framework;

[0259] Generate visual preview data based on the layout parameters of the page framework, and output the visual preview data to an interface rendering processing module;

[0260] Associate and encode the coordinate mapping data of the page framework with the content identifiers of the display blocks to generate a structured storage file;

[0261] Analyze the terminal feature parameters in the access request, and generate an access identifier based on the terminal feature parameters;

[0262] Extract target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the target layout metadata and the rendering parameters of the visual preview data to generate a target display interface.

[0263] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are realized:

[0264] Obtain page display materials and store the page display materials in a material resource library;

[0265] Select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework;

[0266] Insert a display block of a preset element into the page frame;

[0267] Generate visual preview data based on the layout parameters of the page frame, and output the visual preview data to the interface rendering processing module;

[0268] Associate and encode the coordinate mapping data of the page frame with the content identifier of the display block to generate a structured storage file;

[0269] Analyze the terminal feature parameters in the access request, and generate an access identifier based on the terminal feature parameters;

[0270] Extract target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the rendering parameters of the target layout metadata and the visual preview data to generate a target display interface.

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

[0272] Those of ordinary skill in the art can understand that all or part of the processes of implementing the methods in the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, storage, database, or other medium used in the various embodiments provided in the present application can include non-volatile and / or volatile memories. Non-volatile memories can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memories can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0273] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the above division of each functional unit and module is used as an example. In actual applications, the above functions can be allocated to different functional units and modules as needed, that is, the internal structure of the device is divided into different functional units or modules to complete all or part of the functions described above.

[0274] It should be noted that if there are software tools or components of other companies in the embodiments of the present application, they are only used for example introduction and do not represent actual use. The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements on some of the technical features; and these modifications or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. A page layout method driven by display materials, characterized in that Including the following steps: Obtain page display materials and store the page display materials in a material resource library; Select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework; Insert a display block of a preset element into the page framework; Generate visual preview data based on the layout parameters of the page framework, and output the visual preview data to an interface rendering processing module; Associate and encode the coordinate mapping data of the page framework with the content identifier of the display block to generate a structured storage file; Parse the terminal feature parameters in the access request, and generate an access identifier based on the terminal feature parameters; Extract target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the rendering parameters of the target layout metadata and the visual preview data to generate a target display interface.

2. The page layout method based on display material driving according to claim 1, wherein Obtain page display materials and store the page display materials in a material resource library, including: Receive uploaded page display materials, where the page display materials include picture materials and document materials; Perform format compliance verification processing on the picture materials to generate a format compliance identifier, and perform structure compliance verification processing on the document materials to generate a structure compliance identifier; Classify and store the picture materials that pass the verification into a picture resource directory according to the format compliance identifier, and classify and store the document materials that pass the verification into a document resource directory according to the structure compliance identifier; Extract the metadata of the picture materials and the metadata of the document materials, and generate a picture material identifier and a document material identifier respectively according to the metadata; Create a picture hash index path and a document hash index path respectively according to the picture material identifier and the document material identifier; Store the source files of the picture materials and the source files of the document materials into the storage nodes corresponding to the picture hash index path and the storage nodes corresponding to the document hash index path respectively.

3. The page layout method driven by display materials as claimed in claim 1, wherein Select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework, including: Screen the candidate display materials in the material resource library according to the page type configuration parameters; Perform a sorting process on the candidate display materials based on the display priority weight, and screen and generate a target display material queue according to a preset weight threshold; Determine the initial positioning coordinates of the target display materials according to the viewport resolution parameters; Generate a coordinate offset according to a layout adjustment instruction, where the coordinate offset is a displacement vector generated by a user dragging operation; Update the initial positioning coordinates according to the coordinate offset to generate coordinates to be verified; Perform collision detection processing on the coordinates to be verified to generate safe positioning coordinates; Construct a rasterized coordinate matrix according to the safe positioning coordinates; Associate and store the rasterized coordinate matrix with the target display materials in a layout database; Generate a layout parameter set of the page framework based on the rasterized coordinate matrix.

4. The page layout method based on display material driving according to claim 1, wherein Insert a display block of a preset element into the page framework, including: Detect the compliance element missing types in the page framework, and generate an element missing list; Extract the corresponding target preset elements from a preset element library according to the element missing list; Determine the target layout area in the page frame according to the frame-level layout strategy in the page type configuration parameters; Generate a display block of the target preset element according to the content attributes of the target preset element and the block-level layout strategy of the target layout area; Insert the display block into the target layout area.

5. The page layout method based on display material driving according to claim 1, characterized in that Generate visualization preview data based on the layout parameters of the page frame and output the visualization preview data to the interface rendering processing module, including: Parse the layout parameter set of the page frame, where the layout parameter set includes a rasterized coordinate matrix, viewport resolution parameters, and element hierarchy relationship data; Perform coordinate mapping conversion on the rasterized coordinate matrix according to the device pixel density and screen size values in the viewport resolution parameters to generate an absolute positioning coordinate set; Extract the identifiers of interactive elements and event binding strategies from the layout parameter set to generate an interactive metadata set; Package the absolute positioning coordinate set, viewport resolution parameters, element hierarchy relationship data, and interactive metadata set into visualization preview data; Transmit the visualization preview data to the rendering queue of the interface rendering processing module through a preset cross-process communication channel.

6. The page layout method based on display material driving according to claim 1, wherein Associate and encode the coordinate mapping data of the page frame with the content identifier of the display block to generate a structured storage file, including: Extract the coordinate mapping data from the layout parameters of the page frame and extract the content identifier from the metadata of the display block; Perform a key-value pair binding operation on the coordinate mapping data and the content identifier to generate an element relationship list; Generate a unique relationship identifier for each record in the element relationship list based on a secure hash algorithm; Package the element relationship list and the relationship identifier into a structured storage file; Perform data integrity verification on the structured storage file, generate a verification code, and write it to the file metadata segment of the structured storage file.

7. The page layout method based on display material driving according to claim 1, wherein Extract the target layout metadata from the corresponding structured storage file according to the access identifier, and fuse the target layout metadata and the rendering parameters of the visualization preview data to generate a target display interface, including: Parse the page frame identifier and terminal feature parameters in the access identifier; Load the corresponding structured storage file from a predefined storage path according to the page frame identifier; Based on the resolution matching rule in the terminal feature parameters, filter out the element relationship subset that matches the current terminal from the element relationship list of the structured storage file, and use the element relationship subset as the target layout metadata; Extract the viewport resolution parameters, element hierarchy relationship data, and style rendering parameters associated with the terminal feature parameters from the visualization preview data; Based on the viewport resolution parameters and element hierarchy relationship data, perform layout adaptation analysis on the coordinate mapping data in the target layout metadata to generate adapted coordinate mapping data and hierarchy relationship; Bind the style rendering parameters to the corresponding content identifier in the target layout metadata; Generate a target display interface according to the adapted coordinate mapping data, hierarchical relationship, and the style rendering parameters; Push the target display interface to the rendering queue of the current terminal.

8. A page layout device driven by display materials, characterized in that The page layout device driven by display materials includes: A material access module, configured to obtain page display materials and store the page display materials in a material resource library; A material screening module, configured to select target display materials from the material resource library, and perform a positioning coordinate change operation on the target display materials to generate a page framework; An element insertion module, configured to insert a display block of a preset element into the page framework; A preview generation module, configured to generate visual preview data based on the layout parameters of the page framework, and output the visual preview data to an interface rendering processing module; A data encoding module, configured to perform associated encoding on the coordinate mapping data of the page framework and the content identifier of the display block to generate a structured storage file; An access identifier module, configured to parse the terminal feature parameters in an access request, and generate an access identifier based on the terminal feature parameters; An interface generation module, configured to extract target layout metadata from a corresponding structured storage file according to the access identifier, and fuse the target layout metadata and the rendering parameters of the visual preview data to generate a target display interface.

9. A computer device, characterized in that, The computer device includes a memory, a processor, and a page layout program driven by display materials stored on the memory and executable on the processor. When the page layout program driven by display materials is executed by the processor, the steps of the page layout method driven by display materials according to any one of claims 1-7 are implemented.

10. A computer-readable storage medium, characterized in that, A page layout program driven by display materials is stored on the storage medium. When the page layout program driven by display materials is executed by a processor, the steps of the page layout method driven by display materials according to any one of claims 1-7 are implemented.

Images