Cross-platform unified multi-picture configuration method and system

Abstract

The application provides a cross-platform unified multi-picture configuration method and system. The method comprises the following steps: creating a UI diagram of a multi-picture layout; converting the UI diagram into a vector diagram; generating a configuration file according to the vector diagram; encapsulating the configuration file generation rule, the cache variable generation rule and the UI rendering algorithm into an integrated package; installing the integrated package on each platform; the platform acquires a corresponding configuration file from a server through the configuration file generation rule encapsulated by the integrated package, and distributes the configuration file to a terminal; the terminal converts the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rule; and the terminal reads the cache variable and generates a UI layout by using the UI rendering algorithm. The application improves the efficiency and consistency of multi-platform multi-picture configuration through innovations in unified configuration, automatic generation, integration and dynamic adaptability.

Description

Technical Field

[0001] This invention relates to the field of video communication technology, and more specifically, to a cross-platform unified multi-screen configuration method and system. Background Technology

[0002] Internet-based video communication technology is widely used in video conferencing scenarios for work and life. However, in the current multi-platform environment, the following problems exist regarding multi-screen layout configuration: H5 pages have the ability to distribute configurations, but due to inconsistencies in configuration files and the fragmentation of UI algorithms, each platform requires dedicated personnel for maintenance, thus increasing project development and maintenance costs.

[0003] Different platforms employ independent implementation schemes. For example, a meeting scheduling platform uses CSS to control the UI, JavaScript to control the logic, and SVG images to control thumbnail rendering, resulting in independent configuration implementations. Although the implementation ideas of meeting control platforms are generally the same, differences in technical details lead to configuration variations between platforms.

[0004] The shortcomings of existing technologies are mainly reflected in two aspects: First, the inconsistent CSS and JavaScript logic leads to low performance, and the lack of configuration file support for new features necessitates modifications to the logic code, potentially affecting existing core functionality and posing a deployment risk. Second, new features involve multiple platforms and related developers; if relevant personnel are absent, feature misalignment can easily occur, increasing project management complexity. These issues make project development and maintenance complex and costly. Summary of the Invention

[0005] This invention provides a cross-platform unified multi-screen configuration method and system. By converting the UI diagram of a multi-screen layout into a vector graphic and using this vector graphic to generate configuration files, the method unifies the configuration file generation rules. The configuration file generation rules, cache variable generation rules, and UI rendering algorithm are encapsulated in an npm package. Each platform only needs to install this npm package to share the same configuration file generation rules, cache variable generation rules, and UI rendering algorithm. Based on the platform type and terminal device, the configuration file is converted into cache variables according to the cache variable generation rules, adapting to different platforms and different terminal device performance (such as screen size and resolution), enhancing cross-platform flexibility. The UI rendering algorithm reads the cache variables and automatically combines JavaScript and CSS, automatically generating dynamically responsive UI layouts without the need for CSS development. Regardless of the number of platforms, only one person is required for maintenance. In summary, this effectively reduces the development and maintenance costs of multi-screen services and improves project consistency and efficiency.

[0006] In a first aspect, the present invention provides a cross-platform unified multi-screen configuration method, characterized in that the method includes:

[0007] Create a UI design with a multi-screen layout;

[0008] Convert the UI image into a vector graphic;

[0009] Generate a configuration file based on the vector graphic;

[0010] The configuration file generation rules, cache variable generation rules, and UI rendering algorithm are encapsulated into an integration package;

[0011] Install the aforementioned integration package on each platform;

[0012] The platform obtains the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and sends the configuration file to the terminal.

[0013] The terminal converts the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rules.

[0014] The terminal uses the UI rendering algorithm to read the cached variables and generate a UI layout.

[0015] Secondly, the present invention also provides a cross-platform unified multi-screen configuration system, characterized in that the system includes multiple platforms, terminals, and:

[0016] Create a device that is used to create UI diagrams for multi-screen layouts;

[0017] A conversion device for converting the UI image into a vector graphic;

[0018] A generation device for generating a configuration file based on the vector graphic;

[0019] An encapsulation device is used to encapsulate the configuration file generation rules, cache variable generation rules, and UI rendering algorithm into an integration package;

[0020] An installation device for installing the integration package on each of the platforms;

[0021] The platform is used to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and to send the configuration file to the terminal.

[0022] The terminal is used to convert the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rule;

[0023] The terminal is also used to read the cached variables and generate a UI layout using the UI rendering algorithm.

[0024] This invention provides a cross-platform unified multi-screen configuration method and system: First, by converting UI images into vector graphics and generating configuration files, the generation rules and UI rendering algorithms are encapsulated in an npm package. Each platform only needs to install the npm package to obtain the same configuration and UI layout generation logic, achieving unified multi-screen configuration across multiple platforms. In contrast, existing technologies use independent implementation schemes for each platform, leading to inconsistent configurations and requiring dedicated personnel for maintenance, increasing development and maintenance costs. Second, this invention automatically generates UI layouts by combining JavaScript and CSS through a UI rendering algorithm. Developers do not need to manually write CSS, whereas existing technologies require developers to manually write CSS logic, with different platforms using different methods, resulting in inconsistencies and performance issues. Third, this invention dynamically obtains configuration variables based on platform type and terminal device characteristics, and converts the configuration file into cached variables through hooks, achieving dynamic adaptation to different platforms and terminal devices. In summary, this invention improves the efficiency and consistency of multi-platform multi-screen configuration through innovations in unified configuration, automated generation, integration, and dynamic adaptability. Attached Figure Description

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

[0026] Figure 1 This is a flowchart of the cross-platform unified multi-screen configuration method provided in this embodiment of the invention;

[0027] Figure 2 This is a block diagram of a cross-platform unified multi-screen configuration system provided in an embodiment of the present invention. Detailed Implementation

[0028] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Invention Overview

[0030] As mentioned above, this invention provides a cross-platform unified multi-screen configuration method and system, which improves the efficiency and consistency of multi-platform multi-screen configuration through innovations in unified configuration, automated generation, integration and dynamic adaptability.

[0031] Exemplary methods

[0032] Figure 1This is a flowchart of a cross-platform unified multi-screen configuration method provided in an embodiment of the present invention. This embodiment includes the following steps:

[0033] S101: Create UI diagrams for multi-screen layouts.

[0034] Through user experience (UX) design, draw UI diagrams of multi-screen layouts to reflect the required screen distribution and style.

[0035] S102: Convert the UI image into a vector graphic.

[0036] Using specialized tools or algorithms, each element in the UI drawing is converted into a vector graphic. These vector graphics reflect the layout and style of the UI design and can be scaled to any size without distortion.

[0037] Preferably, the vector graphic is an SVG graphic. SVG (Scalable Vector Graphics) is a vector graphics description language based on XML syntax, used to describe two-dimensional vector graphics. Unlike pixel graphics, SVG graphics are based on mathematical equations and geometric descriptions, resulting in relatively small file sizes and faster loading speeds. Furthermore, SVG graphics are in a readable text format, making them easy for developers to view and edit. They can be scaled to any size without distortion, and SVG's scalability ensures that layouts maintain good display effects on different devices. SVG graphics support various graphic elements, such as lines, rectangles, circles, and paths, enabling accurate rendering of UX design details in multi-screen layouts, providing a more realistic and precise UI effect. Styles and behaviors can be controlled via CSS and JavaScript. Because SVG is an open standard, it enjoys widespread support. Almost all modern browsers support SVG, making it a reliable cross-platform choice that can be used on various devices and in various environments.

[0038] In summary, SVG graphics offer numerous advantages in multi-screen layouts, including scalability, high fidelity, interactive support, lightweight design, and cross-platform compatibility, making them an ideal graphic format for representing and processing multi-screen layouts.

[0039] S103: Generate a configuration file based on the vector image.

[0040] Specifically, a vector graphics conversion algorithm is used to automatically generate a corresponding configuration file from the vector graphics.

[0041] Preferably, the vector graphics conversion algorithm is the SVGToConfigAlgo algorithm. The mapping rules of the SVGToConfigAlgo algorithm can accurately convert each element in the SVG drawing into the layout information in the configuration file, ensuring the consistency between the UI drawing and the final configuration file, and avoiding deviations caused by the conversion process. Furthermore, the modular design of the SVGToConfigAlgo algorithm gives it strong flexibility and scalability, allowing users to customize and extend it according to specific needs, adapting to different projects and scenarios, thereby improving the algorithm's applicability.

[0042] More specifically, the SVGToConfigAlgo algorithm is used to convert the code of the SVG image into DOM elements, and the DOM elements into configuration files.

[0043] For example, the SVGToConfigAlgo algorithm parses SVG code, converting it into DOM elements that the browser can recognize. It then iterates through these DOM elements to extract key layout information. This information includes crucial parameters such as the position and size of the elements. Finally, the SVGToConfigAlgo algorithm integrates the extracted layout information into a configuration file, where each element is assigned corresponding layout attributes.

[0044] The configuration file contains a data structure describing the UI layout, as well as the position, size, and style of UI elements. The data structure represents the overall structure of the multi-screen layout, including the relative positions and arrangement of the screens. This data structure in the configuration file enables the terminal device to accurately render the multi-screen layout. The position, size, and style of the UI elements specify the position, size, and other style-related information of each screen within the overall layout, ensuring that the terminal device can accurately display each screen.

[0045] S104: Encapsulate the configuration file generation rules, cache variable generation rules, and UI rendering algorithm into an integration package.

[0046] The configuration file generation rules are steps S102 and S103. The cache variable generation rules are the logic for generating dynamic UI configuration cache variables, i.e., how to transform the information in the configuration file into an internal data structure for easier application in UI rendering. The UI rendering algorithm, based on the generated UI configuration cache variables, achieves a dynamically responsive UI layout.

[0047] S105: Install the aforementioned integration package on each platform.

[0048] In other words, the logic for multi-screen configuration is encapsulated into an integration package. All platforms can integrate the same configuration and layout logic by installing the package, ensuring that different platforms use the same version of configuration files, cache variable generation rules, and UI rendering algorithms. This achieves one-time integration across multiple platforms, ensuring consistent layout and efficient development. When new UI designs or features are added later, only the integration package needs to be upgraded, reducing integration and maintenance costs. Developers only need to focus on UI design without manually handling specific layout algorithms and styles.

[0049] Preferably, the integration package is an npm package. npm (Node Package Manager) is a package management tool for Node.js environments, allowing developers to import, manage, share, and publish code modules in their projects. By installing an npm package, the platform can easily integrate, use, and update functional modules related to configuration file generation, cache variable generation, and UI rendering algorithms.

[0050] Using npm packages allows you to define a unified standard, ensuring that the same configuration file generation rules, cache variable generation rules, and UI rendering algorithms are used across different platforms. This helps maintain consistency across multiple platforms and reduces the possibility of inconsistent configuration files or UI display differences. npm packages provide a robust version management mechanism, facilitating easy version upgrades and rollbacks. By releasing new versions of npm packages, you can update configuration file generation rules, cache variable generation rules, and UI rendering algorithms, thus simplifying the maintenance and upgrade process for unified configurations across multiple platforms. Furthermore, npm is a widely used package management tool in the JavaScript ecosystem, boasting a large developer community and a wealth of third-party modules. By adopting npm packages, you can fully leverage this ecosystem to access more tools and resources, accelerating the development process.

[0051] S106: The platform obtains the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and sends the configuration file to the terminal.

[0052] The platform retrieves the corresponding configuration file from the server by calling the REST interface through the configuration file generation rules encapsulated in the integration package, and then distributes the configuration file to the terminal. In other words, the platform can use the functional modules provided in the npm package to call the REST interface to obtain and update configuration files. Because the configuration file generation rules are unified, the terminal only needs to maintain one set of conventions.

[0053] A RESTful API is an API that communicates via the HTTP protocol. It uses standard HTTP methods (such as GET, POST, PUT, DELETE, etc.) to perform various operations, enabling communication between different systems. In other words, RESTful APIs communicate through the standard HTTP protocol, allowing different platforms to interact with the server by sending HTTP requests and receiving HTTP responses, enabling the retrieval and updating of configuration files. The design of RESTful APIs follows a set of specifications and principles, making the interface clear, simple, easy to understand, and extensible.

[0054] In summary, by using integrated npm packages, the methods for obtaining configuration files across platforms are unified, enabling consistency in the process of generating and obtaining configuration files across multiple platforms. This improves development efficiency, reduces maintenance costs, and ensures that users on different platforms can obtain the same configuration files, thereby achieving uniformity and consistency in multi-screen layout.

[0055] S107: The terminal converts the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rules.

[0056] Specifically, the terminal obtains configuration variables based on the platform type and terminal device (such as screen size, resolution, device type, operating system, and device hardware performance); and converts the configuration file into the cached variables by combining the configuration variables with a hook (e.g., useComputedLayout).

[0057] For example, the position and size of each screen, as well as other layout details, are dynamically calculated to suit the specific platform and terminal. Another example is that the platform can adjust the actual UI controls to match its theme color or style, ensuring they conform to the platform's overall appearance, without modifying the core logic for generating the UI layout. In short, it considers the platform's personalized needs while maintaining the consistency of the core logic for generating the UI layout.

[0058] The configuration variables include screen position, screen size, margins, spacing, background, border style, and border color. Specifically, the screen position and size can be described using information such as coordinates, width, and height. Margins are the distance between the screen and the edge of the container, and spacing is the distance between screens. The background is the background color or image of the UI element. Border styles include whether there is a border, line width, and corner shape (e.g., right angle or rounded corner).

[0059] The hooks mentioned above typically refer to React Hooks, a way to add state and other React features to functional components. React Hooks allow functional components to use React features such as state and lifecycle management without the need for class components.

[0060] S108: The terminal uses the UI rendering algorithm to read the cached variables and generate a UI layout.

[0061] Developers do not need to manually write CSS. The terminal uses the UI rendering algorithm (e.g., RenderAssinLayout) to read cached variables and automatically combine JavaScript and CSS to generate a dynamically responsive UI layout. In other words, through the automated processing of the UI rendering algorithm, developers can more easily implement dynamic layouts for multi-screen configurations without having to focus too much on specific CSS writing. This helps maintain UI layout consistency and reduces the difficulty of maintaining and modifying the UI layout.

[0062] Exemplary System

[0063] Accordingly, embodiments of the present invention also provide a cross-platform unified multi-screen configuration system. Figure 2 This is a block diagram of a cross-platform unified multi-screen configuration system provided in an embodiment of the present invention, such as... Figure 2 As shown, the system 100 provided in this embodiment includes: multiple platforms 101, a terminal 102, and:

[0064] A device 103 is created for creating a UI diagram of a multi-screen layout;

[0065] Conversion device 104, which is used to convert the UI image into a vector image;

[0066] Generation device 105, which is used to generate a configuration file based on the vector graphic;

[0067] The encapsulation device 106 is used to encapsulate the configuration file generation rules, cache variable generation rules and UI rendering algorithm into an integration package;

[0068] Installation device 107 is used to install the integration package on each of the platforms 101;

[0069] The platform 101 is used to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and send the configuration file to the terminal 102;

[0070] The terminal 102 is used to convert the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rule;

[0071] The terminal 102 is also used to read the cached variables and generate a UI layout using the UI rendering algorithm.

[0072] The generation device 105 is also used to automatically generate a corresponding configuration file from the vector graphic using a vector graphic conversion algorithm.

[0073] The vector graphic is an SVG image;

[0074] The vector graphics conversion algorithm is the SVGToConfigAlgo algorithm.

[0075] The generation device 105 is also used to convert the code of the SVG image into DOM elements using the SVGToConfigAlgo algorithm, and to convert the DOM elements into configuration files.

[0076] The configuration file contains data structures that describe the UI layout, as well as the position, size, and style of UI elements.

[0077] The platform 101 is also used to call the REST interface to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and send the configuration file to the terminal 102.

[0078] The terminal 102 includes:

[0079] A unit for obtaining configuration variables based on the platform type and terminal device;

[0080] A unit used to convert the configuration file into the cached variable by hooking the configuration variable.

[0081] The configuration variables include screen position, screen size, margins, spacing, background, border style, and border color.

[0082] The terminal 102 includes a unit for automatically combining JavaScript and CSS by reading the cached variables using the UI rendering algorithm to generate a dynamically responsive UI layout.

[0083] The integrated package is an npm package.

[0084] It should be noted that although the operations of the cross-platform unified multi-screen configuration method of the present invention are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0085] Furthermore, although several devices, units, or modules of the cross-platform unified multi-screen configuration system have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of the present invention, the features and functions of two or more modules described above can be embodied in one module. Conversely, the features and functions of one module described above can be further divided and embodied by multiple modules.

[0086] While the spirit and principles of the invention have been described with reference to several specific embodiments, it should be understood that the invention is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined for benefit; such division is merely for ease of description. The invention is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

[0087] This invention provides: 1. A cross-platform unified multi-screen configuration method, characterized in that the method includes: Create a UI design with a multi-screen layout; Convert the UI image into a vector graphic; Generate a configuration file based on the vector graphic; The configuration file generation rules, cache variable generation rules, and UI rendering algorithm are encapsulated into an integration package; Install the aforementioned integration package on each platform; The platform obtains the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and sends the configuration file to the terminal. The terminal converts the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rules. The terminal uses the UI rendering algorithm to read the cached variables and generate a UI layout. 2. The cross-platform unified multi-screen configuration method according to item 1, characterized in that the step of generating a configuration file based on the vector image is specifically as follows: The vector graphics are automatically converted into corresponding configuration files using a vector graphics conversion algorithm. 3. The cross-platform unified multi-screen configuration method according to item 2, wherein the vector graphic is an SVG graphic; The vector graphics conversion algorithm is the SVGToConfigAlgo algorithm. 4. The cross-platform unified multi-screen configuration method according to item 3 is characterized in that the step of automatically generating the corresponding configuration file from the vector graphic using a vector graphic conversion algorithm is specifically as follows: The SVGToConfigAlgo algorithm is used to convert the code of the SVG image into DOM elements, and then the DOM elements are converted into configuration files. 5. The cross-platform unified multi-screen configuration method according to any one of items 1-4, characterized in that the configuration file includes a data structure describing the UI layout, as well as the position, size and style of UI elements. 6. The cross-platform unified multi-screen configuration method according to any one of items 1-4, characterized in that the step of the platform obtaining the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package and sending the configuration file to the terminal specifically includes: The platform retrieves the corresponding configuration file from the server by calling the REST interface through the configuration file generation rules encapsulated in the integration package, and then sends the configuration file to the terminal. 7. The cross-platform unified multi-screen configuration method according to any one of items 1-4, characterized in that the step of the terminal converting the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rule specifically comprises: The terminal obtains configuration variables based on the platform type and the terminal device. The configuration file is converted into the cached variable by using a hook in conjunction with the configuration variable. 8. The cross-platform unified multi-screen configuration method according to item 7, wherein the configuration variables include screen position, screen size, margin, spacing, background, border style and border color. 9. The cross-platform unified multi-screen configuration method according to any one of items 1-4, characterized in that the step of the terminal using the UI rendering algorithm to read the cached variables and generate the UI layout specifically comprises: The terminal uses the UI rendering algorithm to read the cached variables and automatically combines JavaScript and CSS to generate a dynamically responsive UI layout. 10. The cross-platform unified multi-screen configuration method according to any one of items 1-4, wherein the integration package is an npm package. 11. A cross-platform unified multi-screen configuration system, characterized in that the system includes multiple platforms, terminals, and: Create a device that is used to create UI diagrams for multi-screen layouts; A conversion device for converting the UI image into a vector graphic; A generation device for generating a configuration file based on the vector graphic; An encapsulation device is used to encapsulate the configuration file generation rules, cache variable generation rules, and UI rendering algorithm into an integration package; An installation device for installing the integration package on each of the platforms; The platform is used to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and to send the configuration file to the terminal. The terminal is used to convert the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rule; The terminal is also used to read the cached variables and generate a UI layout using the UI rendering algorithm. 12. The cross-platform unified multi-screen configuration system according to item 11, wherein the generating device is further used to automatically generate a corresponding configuration file from the vector graphic using a vector graphic conversion algorithm. 13. The cross-platform unified multi-screen configuration system according to item 12, wherein the vector graphic is an SVG graphic; The vector graphics conversion algorithm is the SVGToConfigAlgo algorithm. 14. The cross-platform unified multi-screen configuration system according to item 13, wherein the generation device is further used to convert the code of the SVG image into DOM elements using the SVGToConfigAlgo algorithm, and to convert the DOM elements into configuration files. 15. The cross-platform unified multi-screen configuration system according to any one of items 11-14, characterized in that the configuration file includes a data structure describing the UI layout, as well as the position, size and style of UI elements. 16. The cross-platform unified multi-screen configuration system according to any one of items 11-14, characterized in that the platform is further used to call the REST interface through the configuration file generation rules encapsulated in the integration package to obtain the corresponding configuration file from the server, and to send the configuration file to the terminal. 17. The cross-platform unified multi-screen configuration system according to any one of items 11-14, characterized in that the terminal comprises: A unit for obtaining configuration variables based on the platform type and terminal device; A unit used to convert the configuration file into the cached variable by hooking the configuration variable. 18. The cross-platform unified multi-screen configuration system according to item 17, wherein the configuration variables include screen position, screen size, margin, spacing, background, border style and border color. 19. The cross-platform unified multi-screen configuration system according to any one of items 11-14, characterized in that the terminal includes a unit for automatically combining JavaScript and CSS by reading the cached variables using the UI rendering algorithm to generate a dynamically responsive UI layout. 20. The cross-platform unified multi-screen configuration system according to any one of items 11-14, wherein the integration package is an npm package.

Claims

1. A cross-platform unified multi-screen configuration method, characterized in that, The method includes: Create UI diagrams with multi-screen layouts; The UI image is converted into a vector graphic, and the vector graphic is an SVG image; The SVGToConfigAlgo algorithm is used to convert the code of the SVG image into DOM elements, and then the DOM elements are converted into configuration files. The configuration file generation rules, cache variable generation rules, and UI rendering algorithm are encapsulated into an integration package; Install the aforementioned integration package on each platform; The platform obtains the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and sends the configuration file to the terminal. The terminal converts the configuration file into cache variables based on the platform type and the terminal device according to the cache variable generation rules. The terminal uses the UI rendering algorithm to read the cached variables and generate a UI layout.

2. The cross-platform unified multi-screen configuration method according to claim 1, characterized in that, The configuration file contains data structures that describe the UI layout, as well as the position, size, and style of UI elements.

3. The cross-platform unified multi-screen configuration method according to claim 1, characterized in that, The platform obtains the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and sends the configuration file to the terminal in the following specific steps: The platform retrieves the corresponding configuration file from the server by calling the REST interface through the configuration file generation rules encapsulated in the integration package, and then sends the configuration file to the terminal.

4. The cross-platform unified multi-screen configuration method according to claim 1, characterized in that, The specific steps for the terminal to convert the configuration file into a cache variable based on the platform type and the terminal device according to the cache variable generation rules are as follows: The terminal obtains configuration variables based on the platform type and the terminal device. The configuration file is converted into the cached variable by using a hook in conjunction with the configuration variable.

5. The cross-platform unified multi-screen configuration method according to claim 4, characterized in that, The configuration variables include screen position, screen size, margins, spacing, background, border style, and border color.

6. The cross-platform unified multi-screen configuration method according to claim 1, characterized in that, The specific steps for the terminal to read the cached variables and generate the UI layout using the UI rendering algorithm are as follows: The terminal uses the UI rendering algorithm to read the cached variables and automatically combines JavaScript and CSS to generate a dynamically responsive UI layout.

7. The cross-platform unified multi-screen configuration method according to claim 1, characterized in that, The integrated package is an npm package.

8. A cross-platform unified multi-screen configuration system, characterized in that, The system includes multiple platforms, terminals, and: Create a device that is used to create UI diagrams for multi-screen layouts; A conversion device for converting the UI image into a vector graphic, wherein the vector graphic is an SVG image; A generation device for converting the code of an SVG image into DOM elements using the SVGToConfigAlgo algorithm, and then converting the DOM elements into configuration files; An encapsulation device is used to encapsulate the configuration file generation rules, cache variable generation rules, and UI rendering algorithm into an integration package; An installation device for installing the integration package on each of the platforms; The platform is used to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and to send the configuration file to the terminal. The terminal is used to convert the configuration file into cache variables based on the platform type and the terminal device according to the cache variable generation rules; The terminal is also used to read the cached variables and generate a UI layout using the UI rendering algorithm.

9. The cross-platform unified multi-screen configuration system according to claim 8, characterized in that, The configuration file contains data structures that describe the UI layout, as well as the position, size, and style of UI elements.

10. The cross-platform unified multi-screen configuration system according to claim 8, characterized in that, The platform is also used to call the REST interface to obtain the corresponding configuration file from the server through the configuration file generation rules encapsulated in the integration package, and to send the configuration file to the terminal.

11. The cross-platform unified multi-screen configuration system according to claim 8, characterized in that, The terminal includes: A unit for obtaining configuration variables based on the platform type and terminal device; A unit used to convert the configuration file into the cached variable by hooking the configuration variable.

12. The cross-platform unified multi-screen configuration system according to claim 11, characterized in that, The configuration variables include screen position, screen size, margins, spacing, background, border style, and border color.

13. The cross-platform unified multi-screen configuration system according to claim 8, characterized in that, The terminal includes a unit for automatically combining JavaScript and CSS by reading the cached variables using the UI rendering algorithm to generate a dynamically responsive UI layout.

14. The cross-platform unified multi-screen configuration system according to claim 8, characterized in that, The integrated package is an npm package.

Images