Cross-platform visualization system, method, device, medium and program product

Abstract

The present invention discloses a cross-platform visualization system, method, device, medium and program product, which relates to the field of computer technology, including: establishing a point-to-point channel to transmit multi-user operation data packets through a distributed collaboration module, and determining the operation adopted by the interface when it is determined that an operation conflict occurs, thereby reducing the conflict rate and improving writing efficiency; utilizing a cross-platform rendering adaptation module to obtain and analyze device characteristic parameters, identify device categories to determine the direction of code generation, generate multi-terminal adaptation code and perform layout optimization at the same time to achieve cross-device display of the interface, thereby improving code generation efficiency and accuracy; using a version management module to record versions in a directed acyclic graph, quantify branch operation differences and perform merges, thereby shortening the time consumption of version merges and reducing management complexity. In this way, high-precision collaboration, low-code cross-platform development and traceable version control are achieved, which greatly improves the efficiency and quality of interface design and reduces development costs.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a cross-platform visualization system, method, device, medium and program product. Background Art

[0002] Traditional visual design tools suffer from numerous flaws. First, they lack collaborative capabilities, enabling only file-level sharing or asynchronous collaboration, preventing real-time, simultaneous multi-user operations. Concurrent editing relies on locking mechanisms, which delays operations and increases the probability of conflicts. Second, cross-platform adaptation is inefficient, requiring manual secondary adjustments to the generated code to adapt to different terminals, which prolongs the development cycle. Furthermore, responsive design relies on empirical debugging, resulting in low accuracy. Third, version management capabilities are weak, requiring manual conflict resolution when merging branches, which consumes a significant portion of the total development time. Summary of the Invention

[0003] The present invention provides a cross-platform visualization system, method, device, medium and program product, which can reduce the conflict rate, improve code generation efficiency, shorten the time of version merging, and realize high-precision collaboration, low-code cross-platform development and traceable version control.

[0004] The present invention provides a cross-platform visualization system, comprising:

[0005] The distributed collaboration module is used to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations and determine the operation to be adopted by the interface when an operation conflict occurs;

[0006] The cross-platform rendering adaptation module is used to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization to achieve cross-device display of the interface;

[0007] The version management module is used to record interface design versions through a directed acyclic graph while the interface is displayed across devices, quantify the operational differences between branch versions, and perform branch merges.

[0008] The present invention also provides a cross-platform visualization method, comprising:

[0009] Use the distributed collaboration module to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations and determine the operation to be adopted by the interface when an operation conflict occurs;

[0010] Use the cross-platform rendering adaptation module to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and optimize the layout to achieve cross-device display of the interface;

[0011] The version management module is used to record interface design versions through a directed acyclic graph, quantify the operational differences of branch versions, and perform branch merges.

[0012] The present invention also provides an electronic device, comprising: a memory for storing a computer program; and a processor for implementing the steps of any one of the above-mentioned cross-platform visualization methods when executing the computer program.

[0013] The present invention also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above-mentioned cross-platform visualization methods are implemented.

[0014] The present invention also provides a computer program product, comprising a computer program, which implements the steps of any of the above-mentioned cross-platform visualization methods when executed by a processor.

[0015] Through the present invention, due to the integration of distributed collaboration module, cross-platform rendering adaptation module and version management module, a point-to-point channel is established through the distributed collaboration module to transmit multi-user operation data packets, realizing multi-user real-time collaborative editing, and determining the operation adopted by the interface when an operation conflict occurs, reducing the conflict rate and improving writing efficiency; using the cross-platform rendering adaptation module to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization at the same time to realize cross-device display of the interface, thereby improving code generation efficiency and accuracy; with the help of the version management module, a directed acyclic graph is used to record versions, quantify branch operation differences and perform merges, shortening the version merge time and reducing management complexity. In this way, high-precision collaboration, low-code cross-platform development and traceable version control are ultimately achieved, supporting multi-user real-time collaboration and multi-terminal adaptive rendering visualization, automatically generating high-quality adaptation code, efficiently managing version history, greatly improving interface design efficiency and quality, reducing development costs, and being suitable for scenarios such as industrial Internet of Things, intelligent operation and maintenance platforms, and cross-platform application development.

[0016] In addition, the present invention also provides a corresponding visualization method, electronic device, computer-readable storage medium and program product for a cross-platform visualization system, which have the same or corresponding technical features as the above-mentioned cross-platform visualization system and have the same effects as above. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the embodiments of the present invention, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0018] Figure 1 A schematic diagram of the structure of a cross-platform visualization system provided by an embodiment of the present invention;

[0019] Figure 2 An architectural flow chart of a cross-platform visualization system provided by an embodiment of the present invention;

[0020] Figure 3 A schematic diagram corresponding to the distributed collaboration module provided in an embodiment of the present invention;

[0021] Figure 4 A schematic diagram corresponding to the cross-platform rendering adaptation module provided in an embodiment of the present invention;

[0022] Figure 5 This is a flowchart of a cross-platform visualization method provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0023] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making any creative efforts shall fall within the scope of protection of the present invention.

[0024] It should be noted that, in the description of the present invention, the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or apparatus comprising a series of elements includes not only those elements but also other elements not explicitly listed, or elements inherent to such process, method, article, or apparatus. The terms "first," "second," etc., in the present invention are used to distinguish similar objects, and are not used to describe a particular order or precedence.

[0025] In order to enable those skilled in the art to better understand the solutions of the present invention, the present invention is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0026] In conjunction with the specific application environment architecture or specific hardware architecture on which the execution of the cross-platform visualization system depends, the specific application environment architecture or specific hardware architecture is described herein.

[0027] The embodiment of the present invention provides a cross-platform visualization system. Figure 1 A schematic diagram of the structure of a cross-platform visualization system provided by an embodiment of the present invention is shown in FIG. Figure 1 As shown, the system includes:

[0028] Distributed collaboration module 1 is used to establish a peer-to-peer (P2P) channel to transmit multi-user operation data packets for operation synchronization and determine the operation to be adopted by the interface when an operation conflict occurs;

[0029] Cross-platform rendering adaptation module 2 is used to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization to achieve cross-device display of the interface;

[0030] The version management module 3 is used to record the interface design version through a directed acyclic graph while the interface is displayed across devices, quantify the operational differences between branch versions, and perform branch merging.

[0031] It should be noted that the distributed collaboration module 1 can be understood as a distributed collaboration engine, which is one of the core modules of the cross-platform system of the present invention, and is mainly responsible for real-time operation synchronization and conflict merging between multiple users. It ensures that multiple users can edit the same interface design project simultaneously on different terminals without any operation conflicts or data inconsistencies by establishing an efficient communication mechanism and advanced conflict resolution algorithm. The cross-platform rendering adaptation module 2 can convert the design draft into a multi-terminal adaptation code. The version management module 3 can record the design history version and support branch merging. The version here refers to the iterative version of the design file, that is, the different iterative states of the design draft saved in the visual design tool. The content of the version can include the design element level and the file metadata level. Branch merging is the process of integrating modifications from different branches into the target branch. A branch is an independent development path separated from the main line, used to isolate the iterations of different functions or solutions. Merging is to synchronize the modifications in the branch to the main branch or other branches to achieve results integration.

[0032] In the above-mentioned cross-platform visualization system provided by the embodiment of the present invention, due to the integration of the distributed collaboration module 1, the cross-platform rendering adaptation module 2 and the version management module 3, a point-to-point channel is established through the distributed collaboration module 1 to transmit multi-user operation data packets, thereby realizing multi-user real-time collaborative editing, and determining the operation adopted by the interface when an operation conflict occurs, thereby reducing the conflict rate and improving writing efficiency; the cross-platform rendering adaptation module 2 is used to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization at the same time to realize cross-device display of the interface, thereby improving code generation efficiency and accuracy; with the help of the version management module 3, the version is recorded in a directed acyclic graph, the branch operation difference is quantified and the merge is performed, thereby shortening the version merge time and reducing management complexity. In this way, high-precision collaboration, low-code cross-platform development and traceable version control are finally realized, and a visualization method that supports multi-user real-time collaboration and multi-terminal adaptive rendering can automatically generate high-quality adaptation code, efficiently manage version history, greatly improve interface design efficiency and quality, reduce development costs, and is suitable for scenarios such as industrial Internet of Things, intelligent operation and maintenance platforms, and cross-platform application development.

[0033] Figure 2 This is a flow chart of the architecture of the cross-platform visualization system provided by the embodiment of the present invention. Figure 2 As shown, user A, user B, and user C are participants in multi-user collaboration, representing different collaborative roles. The user terminal is the carrier for users to access the system and is responsible for receiving user operation instructions. The distributed collaboration module can realize point-to-point real-time communication based on network real-time communication, and can use distributed collaboration algorithms to merge queues to resolve multi-user operation conflicts. The cross-platform rendering adaptation module can call the code generator to generate multi-terminal adaptation code, and associate the device feature database, match hardware parameters according to the terminal type, and optimize the interface rendering effect. The version management module can record the full version history of the interface design based on a directed acyclic graph, realize version traceability and branch management, compare conflicting interfaces, assist in version merging, and visually display the interface differences between different branches, reducing the cost of manual conflict resolution.

[0034] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the distributed collaborative module 1 may include a communication layer and a conflict merging layer; the communication layer is used to establish a point-to-point communication channel using Web Real-Time Communication (WebRTC), and transmit multi-user operation data packets between each terminal through the point-to-point communication channel to synchronize user operations to the terminal; the conflict merging layer is used to determine the order of operation execution, obtain the causal relationship between operations according to the order of operation execution, and determine whether an operation conflict occurs based on the causal relationship between operations. If so, conflict merging processing is performed to determine the operation adopted by the interface.

[0035] In practice, the communication layer and the conflict merging layer collaborate to significantly improve the fluidity and accuracy of multi-user interactions. The communication layer uses real-time network communication to establish a point-to-point communication channel, enabling rapid and direct transmission of user operation data between terminals. This ensures timely synchronization of user operations and provides a foundation for efficient data interaction for multi-person collaboration. The conflict merging layer employs a conflict-free replicated data type (CRDT) algorithm. Specifically, it first determines the order in which operations are executed, then determines the causal relationships between operations based on these order. Then, based on these causal relationships, it determines whether an operation conflict exists. If so, it performs conflict merging and determines the interface operation to be used. If not, the interface is displayed directly according to the order in which the operations are executed. This streamlines the order in which operations are executed, accurately determines conflicting operations based on causal relationships, and effectively merges any conflicts, avoiding interface clutter caused by conflicting operations and ensuring consistent and correct interface operation. The combination of the communication layer and the conflict merging layer not only addresses the real-time nature of multi-terminal data transmission but also resolves conflicts among multiple users, significantly improving the multi-user collaborative experience.

[0036] Furthermore, in the cross-platform visualization system provided in the embodiments of the present invention, the communication layer utilizes a signaling server based on the Stream Control Transmission Protocol for data transmission. The format of the operation data packets transmitted in the communication layer includes: a unique identifier for tracking and managing operations within the distributed system; a user identifier for distinguishing operations performed by different users; a timestamp for recording the time the operation occurred; and an operation status for describing changes in the interface.

[0037] In practice, the signaling server optimizes transmission reliability based on the Stream Control Transmission Protocol (SCTP). The signaling server plays a crucial role in the communication process and optimizes transmission reliability based on SCTP. SCTP provides orderly data transmission, flow control, and error recovery, effectively reducing data loss and transmission errors and ensuring stable communications.

[0038] The packet format can be defined as:

[0039] ;

[0040] in, For data packets, A unique identifier that facilitates tracking and management of operations in a distributed system; The identifier (ID) of the user who performed the operation, used to distinguish operations performed by different users; Record the timestamp of the operation to determine the execution order of the operations and provide a time basis for subsequent conflict resolution; Contains specific operation content and related data, and describes specific changes in interface design, such as adding a component, modifying properties, etc.

[0041] Furthermore, in a specific implementation, in the cross-platform visualization system provided by an embodiment of the present invention, the conflict merging layer may include: an order determination unit, configured to define a partial order relationship between operations and determine the order in which operations are executed; if the timestamp of the first operation is less than the timestamp of the second operation and the first operation is valid, the first operation is executed before the second operation; a clock comparison unit, configured to introduce a vector clock and compare the vector clocks of the operations according to the order in which operations are executed to determine the causal relationship between the operations; if the vector clock of the first operation is less than or equal to the second operation, the first operation occurs causally before the second operation; the vector clock includes a local clock value maintained by each user; a conflict determination unit, configured to determine that a conflict exists between the first operation and the second operation if the vector clock of the first operation does not satisfy a condition of being less than or equal to the vector clock of the second operation and the vector clock of the second operation does not satisfy a condition of being less than or equal to the vector clock of the first operation; and a conflict merging unit, configured to perform conflict merging processing for conflicting operations using a dual determination rule of vector clock and user weight.

[0042] In implementation, the order determination unit may first define a partial order relationship between operations to determine the execution order of the operations: , and ;in, Indicates the first operation, Indicates the second operation, Represents a set of operations, Indicates the timestamp of the first operation, Indicates the timestamp of the second operation, Indicates that the first operation is valid. represents a bidirectional equivalence relation, Indicates universal quantifier, Indicates a belongs relationship. For any two operations in the operation set and ,if Timestamp Less than Timestamp ,and is a valid operation, then Should be This partial order helps to follow the correct logical order when operations from different users are merged.

[0043] The clock comparison unit introduces vector clocks to address causal consistency in distributed systems. Vector clocks are tools used to mark the order of operations in distributed systems, where each dimension corresponds to a different user's operation version. Each user maintains a local clock:

[0044] ;

[0045] Among them, each element ti represents the value of the corresponding user local clock, Represents the local clock. When each user performs an operation, they update their local clock value and record it in the vector clock. By comparing vector clocks, the causal relationship between different operations can be determined. For example, if two operations and , their vector clocks satisfy , then it means causally precedes occur.

[0046] The formula corresponding to the conflict determination rule in the conflict determination unit is: and ;in, Indicates that the first operation and the second operation conflict. Indicates a negative meaning. If the vector clocks of two operations cannot be compared with each other, that is, they do not satisfy , nor satisfied , then the two operations are considered to be in conflict. In this case, further merge strategies are needed to resolve the conflict.

[0047] The conflict merging unit performs conflict merging processing through the dual judgment rules of vector clock and user weight, breaking through the causal consistency limitations of traditional CRDT algorithms and resolving conflicts caused by concurrent operations of multiple users.

[0048] Furthermore, in a specific implementation, in the cross-platform visualization system provided in an embodiment of the present invention, a conflict merging unit is configured to compare the maximum vector clock values ​​of a first operation and a second operation in conflict; if the maximum vector clock value of the first operation is greater than the maximum vector clock value of the second operation, the first operation is executed; if the maximum vector clock value of the second operation is greater than the maximum vector clock value of the first operation, the second operation is executed; if the maximum vector clock values ​​of the first operation and the second operation are the same, the user operation with the higher weight is prioritized based on the user weight; if the priority cannot be determined, the data of the first operation and the second operation are merged.

[0049] In practice, the formula corresponding to the merge strategy in the conflict merge unit is:

[0050] ;

[0051] in, Indicates integration; Represents a merge operation.

[0052] First, the maximum values ​​of the two operation vector clocks are compared, and the operation with the larger value takes precedence. This is based on the assumption that the operation with the larger vector clock value is relatively recent and more likely to reflect the user's current intent. If the vector clock maximum values ​​are the same, the user weights are used to determine the operation, giving priority to the operation with the higher weight. This mechanism enables the system to intelligently resolve operation conflicts and ensure consistency and correctness in collaborative editing. User weights can be set based on factors such as user roles and permissions. For example, administrators can have a higher weight than ordinary users to ensure that operations of important users take precedence. If priority cannot be determined in either of the above situations, the data of the two operations is merged, preserving the content of both operations as much as possible. This method is suitable for scenarios where operations can be merged. Figure 3 This is a schematic diagram corresponding to the distributed collaboration module provided in the embodiment of the present invention. Figure 3 As shown, in text editing, user A and user B add text at different locations at the same time, and all added content can be retained by merging.

[0053] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the cross-platform rendering adaptation module 2 may include: a feature extraction unit, for obtaining device feature parameters corresponding to the current operation, and analyzing the device feature parameters to identify the device category; determining the adapted code generation direction according to the device category, and generating codes adapted to different terminals; a layout optimization unit, for obtaining the number of grid columns according to the device feature parameters, and combining the device feature parameters with the number of grid columns to obtain a component size based on the overall screen size, and performing layout optimization according to the number of grid columns and the component size.

[0054] During implementation, the feature extraction unit and layout optimization unit can accurately identify the device category and determine the code generation direction through analysis and application of device feature parameters, automatically generate code adapted to different terminals, and improve the efficiency and accuracy of code generation. At the same time, based on the device feature parameters and the number of grid columns, the component size is calculated and the layout is optimized, realizing the adaptive generation of multi-terminal code and intelligent adjustment of the interface layout, effectively improving the cross-platform development efficiency, reducing the development cost of multi-device adaptation, and ensuring that the interface can present good display effects and user experience on different terminals.

[0055] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the feature extraction unit may include: an input subunit, used to input a parameter set describing the display and interaction characteristics of the device; the parameter set includes the width and height of the device screen, the number of pixels per inch, the input type and the maximum rendering resolution of the device; a first judgment subunit, used to judge whether the device screen width is less than or equal to the first set pixel and the input type is a touch operation based on the parameter set; if so, output a code applicable to the mobile device; if not, execute the judgment operation of the second judgment subunit; the second judgment subunit, used to judge whether the device screen width is greater than the second set pixel and the maximum rendering resolution is greater than or equal to the device screen set resolution, and if so, output a code applicable to a desktop device; if not, execute the judgment operation of the third judgment subunit; the third judgment subunit, used to judge whether the maximum rendering resolution of the device is greater than or equal to the set value and the input type is a gesture operation, and if so, output a code applicable to an extended reality device.

[0056] In the implementation, the parameter set is first input into the feature extraction unit. The parameter set defines a set of parameters that describe the display and interaction characteristics of the device, as follows:

[0057] DeviceParams={W,H,DPI,Itype,Rmax};

[0058] W and H represent the width and height of the device screen, respectively, typically in pixels (px). They determine the device's screen size and are a key factor in layout calculations. DPI stands for pixels per inch and reflects the device's pixel density. High-DPI devices can display more pixels in the same physical area, resulting in clearer images. Itype represents the input type, such as touch, mouse, and gesture. Different input types correspond to different interaction methods. Rmax represents the device's maximum rendering resolution, expressed in pixels, such as 4K (3840×2160 pixels).

[0059] After that, the code type suitable for the device is determined based on the input parameter set of the device. The corresponding formula is as follows:

[0060] ;

[0061] in, Indicates device parameters, Represents a code suitable for mobile devices. indicates a code suitable for desktop devices. Represents a code suitable for an extended reality device. Indicates the device screen width, Indicates that the input type is touch screen. Indicates the maximum rendering resolution, Indicates that the input type is gesture operation.

[0062] When the device screen width is less than or equal to 720 pixels and the input type is touch, code for mobile devices is output. When the device screen width is greater than 1080 pixels and the maximum rendering resolution is greater than or equal to 1920×1080 pixels, code for desktop devices is output. When the device's maximum rendering resolution is greater than or equal to 4K and the input type is gesture, code for Extended Reality (XR) devices is output. XR can include virtual reality (VR) and augmented reality (AR). XR devices need to process high-resolution 3D image rendering and support special features such as gesture interaction, so specialized code is required to achieve an immersive user experience.

[0063] Figure 4 This is a schematic diagram corresponding to the cross-platform rendering adaptation module provided by an embodiment of the present invention. Figure 4 As shown, the design draft is the source of all terminal renderings and represents the interface prototype of the design, including the unified design of visual elements and interaction logic. Depending on the device type, the design draft is rendered into different terminal interfaces, such as web rendering, mobile rendering, and augmented reality rendering. Web rendering ultimately outputs a 4D layout, mobile rendering outputs a 2D layout, and augmented reality rendering outputs a 3D floating effect.

[0064] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the layout optimization unit may include: a first calculation subunit, used to determine the device screen width, layout margins, scrolling area size, grid width and grid spacing, and subtract the margins on both sides and the scrolling area size from the screen width to obtain the remaining horizontal space; dividing the remaining horizontal space by the sum of the grid width and the grid spacing, rounding the result down to obtain the number of grid columns; a second calculation subunit, used to obtain the available width of each column based on the device screen width and the number of grid columns; obtaining the component size related to the overall screen size based on the device type coefficient, screen width and screen height; and selecting the smaller value between the available width of each column and the component size related to the overall screen size as the final size of the component.

[0065] In implementation, the first calculation subunit in the layout optimization unit can establish a grid system dynamic calculation model and calculate the number of grid columns through the model. The calculation formula of the model is:

[0066] ;

[0067] in, Represents the device screen width, which is the basic parameter for layout calculation and determines the available horizontal space. Represents layout margins, which are used to leave a certain amount of blank space at the edge of the interface to prevent content from clinging to the edge of the screen and improve visual comfort. Indicates the size of the scrolling area. On mobile devices, a certain amount of space is usually reserved for displaying scroll bars or implementing scrolling effects, while on other devices, this may not be necessary or may require less space. Represents the grid width, which indicates the width of each grid unit. It is used to divide the screen space and provide a layout basis for interface elements. Represents the grid spacing, that is, the spacing between adjacent grids, which is used to avoid crowding between elements and ensure a clear and beautiful layout. Indicates the number of grid columns, the number of columns used to divide the layout. The remaining space after subtracting the margins and scrolling area from the screen width is calculated, and then divided by the sum of the grid width and the grid spacing to obtain the number of columns that can be accommodated. Finally, the number of columns is rounded down to an integer to ensure the regularity of the layout.

[0068] For example, on a mobile device with a width of 375px, assuming the margins 8px, the scroll area size 20px, grid width 120px, grid spacing is 8px, then the number of grid columns is calculated Set to 2, which generates code for a two-column layout, allowing interface elements to be arranged reasonably on the screen.

[0069] The second calculation subunit in the layout optimization unit can realize the calculation of component size adaptation. The calculation formula is:

[0070] ;

[0071] in, Indicates the device screen width, Indicates the number of grid columns, Indicates the device type coefficient. Different device types have different coefficient values, such as mobile terminals. =0.8, desktop =1.2. This coefficient is used to adjust the size of components to suit the visual and interactive needs of different devices. The value can make the component size relatively small so that more content can be displayed in a limited space; while the desktop screen is larger, the larger A value of can generate slightly larger components, improving visual effects and operational convenience. Indicates the device screen height, which, together with the screen width, provides the screen area information and is used to calculate the component size based on the overall screen size. The first part of the above formula and Calculate the available width of each column based on the screen width and the number of grid columns, which serves as a reference for the component width. Part 2 、 、 A size related to the overall screen size is calculated based on the device type coefficient and the screen area. The smaller of the two is ultimately used as the component size, ensuring that the component does not exceed a reasonable size both horizontally and within the overall screen range. Appropriate adjustments are made based on the device type to achieve the best visual effect and user experience.

[0072] Furthermore, in specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the version management module 3 may include: a version recording unit, which is used to construct a version graph based on the structure of a directed acyclic graph, and use the version graph to record the historical version and current version of the interface design to track the version history and evolution path; a branch merging unit, which is used to construct a branch merging cost evaluation model, and use the branch merging cost evaluation model to quantify the operational differences of branch versions, and selectively perform automatic branch merging or trigger manual intervention.

[0073] During implementation, the version recording unit and the branch merging unit work together to bring significant advantages to interface design and development. The former constructs a version graph with a directed acyclic graph to achieve systematic recording of historical and current versions of the interface design, making it easier for developers to intuitively trace the version evolution trajectory, accurately locate the modified content, analyze the iterative logic, and effectively reduce the complexity of version management; the latter, by constructing a branch merge cost evaluation model, can quantify the operational differences between branch versions, make intelligent decisions based on the degree of difference, automatically execute simple merge tasks to improve development efficiency, and trigger manual intervention in time for complex conflicts to ensure the accuracy and reliability of the merge results. The combination of the two not only improves the standardization and efficiency of interface design version management, but also ensures the quality of branch merges, helping the team to more smoothly advance cross-version and cross-branch development work.

[0074] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the version recording unit may include: a version graph construction sub-unit, which is used to construct a version graph based on the structure of a directed acyclic graph, and use the version graph to store version nodes; each version node contains an operation set and a hash value of the parent node; the operation set is used to record all operations performed on the current version and the previous version, and the hash value of the parent node is used to identify the direct predecessor version of the current version; an evolution path construction sub-unit, which is used to locate the parent node in the version graph through the hash value of the parent node, and construct the evolution path of the version.

[0075] In practice, the version graph construction subunit within the version recording unit can store version nodes based on a directed acyclic graph (DAG). Using the DAG structure, each version node contains the following information: Vi = {OpSet, ParentHash}, where OpSet represents the operation set, recording all operations performed on the version compared to the previous version. ParentHash represents the hash value of the parent node, identifying the immediate predecessor of the version. The evolution path construction subunit can quickly locate the parent node in the DAG using the hash value, thereby constructing the version's evolution path.

[0076] Furthermore, in a specific implementation, in the above-mentioned cross-platform visualization system provided by an embodiment of the present invention, the branch merging unit may include: an evaluation model establishment sub-unit, for establishing a branch merging cost evaluation model based on the two branch versions to be merged and the operation set of the branch versions on the interface elements; a cost evaluation sub-unit, for calculating the operational differences between the two branch versions on each interface element using the branch merging cost evaluation model before performing the branch merging, and obtaining the total cost of the version merging; if the total cost of the version merging is less than or equal to the set threshold, performing automatic branch merging; if the total cost of the version merging is greater than the set threshold, triggering the manual intervention mechanism.

[0077] In implementation, the evaluation model building subunit builds a branch merge cost evaluation model based on the two branch versions to be merged and the set of operations on the interface elements of the branch versions. The formula of this model is as follows:

[0078] ;

[0079] in, and Represents two branch versions that need to be merged. and Respectively represent versions and The set of operations on the k-th interface element.

[0080] The interface design usually consists of multiple elements, and each element may have undergone different operation changes in different versions. Before performing a branch merge, it is necessary to evaluate the cost of the merge to determine the complexity and potential risks of the merge. The cost evaluation subunit can calculate the degree of difference between two operation sets through the above formula. By calculating the square root of the sum of the squares of the operation differences of each interface element in the two versions, the difference value of this element is obtained. Then, the difference values of all interface elements are added together to obtain the total cost of the entire version merge. Quantifying the operation differences between two branch versions in this way provides a basis for branch merge decisions. A higher cost value means a greater difference between the two branches, and more manual intervention and conflict resolution work may be required during the merge; while a lower cost value indicates a smaller difference and automatic merge can be carried out more smoothly. If , perform a lossless merge, is the set threshold; when the merge cost exceeds the threshold, the system will trigger a manual intervention mechanism.

[0081] The following uses an example to illustrate the application of the above cross-platform visualization system provided by the embodiments of the present invention, specifically for processing the content related to the multi-user collaborative editing of the home page dashboard:

[0082] During the collaborative process of multi-user collaborative editing of the home page dashboard, user A, as an administrator, performs an operation of "adding a temperature meter component" at timestamp t = 1001, and its operation vector clock is VCA = [1, 0, 0]. Subsequently, user B, as an ordinary user, performs an operation of "modifying the meter color" at timestamp t = 1002, and the operation vector clock is VCB = [0, 1, 0].

[0083] Since there is a dimension crossover between the operation vector clock VCA and the operation vector clock VCB (such as a certain dimension of VCA > the corresponding dimension of VCB, and another dimension < the corresponding dimension of VCB), that is, there is no causal order between the operation vector clock VCA and the operation vector clock VCB, a conflict is determined to occur, and the weight merge mechanism is triggered. Also, since the administrator weight w = 2 is greater than the ordinary user weight w = 1, the operation of user A is finally adopted.

[0084] Regarding mobile code generation, when the device characteristic parameters are W = 375px and Itype = Touch, the calculated number of grid columns is 2, and the generated code is:

[0085] ;

[0086] In terms of AR device coordinate conversion, 3D (Three-Dimensional) coordinate mapping is to convert 2D (Two-Dimensional) coordinates (x, y) to the AR space. The specific conversion method is:

[0087] ;

[0088] Among them, (x, y) is the input 2D screen coordinate, (x1, y1, z1) is the output 3D space coordinate, and represents the scaling factor, and Indicates the offset, represents the depth parameter, represents the focal length parameter, Indicates the maximum detection distance.

[0089] The above conversion method combines screen coordinate mapping and depth perception to ensure that AR devices can accurately convert 2D input (such as touch operations) into the position of virtual objects in 3D space, realizing the interactive fusion of reality and virtuality.

[0090] It should be pointed out that in the cross-platform visualization system provided by the present invention, the distributed collaboration module uses WebRTC and CRDT algorithms to achieve real-time collaborative editing by multiple users, with a conflict rate of less than 2%, which greatly improves the efficiency of collaboration. The cross-platform rendering adaptation module can automatically generate adaptation code according to the characteristics of different devices through a mathematical model, and the generation efficiency is 3 to 4 times higher than that of traditional tools, with an accuracy rate of more than 95%, which effectively solves the problem of cross-platform adaptation. The version management module can use DAG to record version history, and by quantifying the cost of branch merging, the time taken for version merging is shortened to one-fifth of that of traditional tools, reducing the complexity of version management. Overall, the present invention greatly improves the efficiency and quality of interface design, reduces development costs, and has broad market application prospects.

[0091] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method.

[0092] An embodiment of the present invention also provides a cross-platform visualization method. Figure 5 Flowchart of the cross-platform visualization method provided by the embodiment of the present invention. Figure 5 Shown, including:

[0093] S501: Use a distributed collaboration module to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations, and determine the operation to be adopted by the interface when an operation conflict occurs.

[0094] S502: Utilize the cross-platform rendering adaptation module to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization to achieve cross-device display of the interface.

[0095] S503: Using the version management module to record the interface design version through a directed acyclic graph, quantify the operational differences of the branch versions, and perform branch merging.

[0096] In the above-mentioned cross-platform visualization method provided by the embodiment of the present invention, a point-to-point channel can be established through a distributed collaboration module to transmit multi-user operation data packets, realize multi-user real-time collaborative editing, and determine the operation adopted by the interface when an operation conflict occurs, thereby reducing the conflict rate and improving writing efficiency; using a cross-platform rendering adaptation module to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization at the same time to realize cross-device display of the interface, improve code generation efficiency and accuracy; with the help of a version management module, a directed acyclic graph is used to record versions, quantify branch operation differences and perform merges, shortening the version merge time and reducing management complexity. In this way, high-precision collaboration, low-code cross-platform development and traceable version control are ultimately achieved, supporting multi-user real-time collaboration and multi-terminal adaptive rendering visualization, which can automatically generate high-quality adaptation code, efficiently manage version history, greatly improve interface design efficiency and quality, reduce development costs, and is suitable for scenarios such as industrial Internet of Things, intelligent operation and maintenance platforms, and cross-platform application development.

[0097] Since the embodiments of the cross-platform visualization method correspond to the embodiments of the cross-platform visualization system, the description of the features in the corresponding embodiments of the cross-platform visualization method can be found in the description of the corresponding embodiments of the cross-platform visualization system, and will not be repeated here. The cross-platform visualization method has the same beneficial effects as the cross-platform visualization system mentioned above.

[0098] Furthermore, in specific implementation, in the above-mentioned cross-platform visualization method provided in an embodiment of the present invention, the distributed collaborative module includes a communication layer and a conflict merging layer; step S101 uses the distributed collaborative module to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations, and determines the operation adopted by the interface when it is determined that an operation conflict occurs. Specifically, it may include: establishing a point-to-point communication channel through the communication layer using a real-time network communication method, and transmitting multi-user operation data packets between each terminal through the point-to-point communication channel to synchronize user operations to the terminal; determining the operation execution order through the conflict merging layer, obtaining the causal relationship between operations according to the operation execution order, and judging whether an operation conflict occurs based on the causal relationship between operations. If so, conflict merging processing is performed to determine the operation adopted by the interface.

[0099] Among them, the communication layer uses a signaling server to transmit data based on the stream control transmission protocol; the format of the operation data packet transmitted in the communication layer includes: a unique identifier, used to track and manage operations in a distributed system; a user identifier, used to distinguish operations of different users; a timestamp, used to record the time when the operation occurred; and an operation status, used to describe the change information in the interface.

[0100] In the above steps, the operation execution order is determined, the causal relationship between operations is obtained according to the operation execution order, and whether an operation conflict occurs based on the causal relationship between operations. If so, conflict merging is performed to determine the operation to be adopted by the interface. Specifically, this may include: defining a partial order relationship between operations, determining the operation execution order, and if the timestamp of the first operation is less than the timestamp of the second operation and the first operation is valid, then the first operation is executed before the second operation; introducing vector clocks, and comparing the vector clocks of the operations according to the operation execution order to determine the causal relationship between operations; if the vector clock of the first operation is less than or equal to the second operation, then the first operation occurs causally before the second operation; the vector clock includes the local clock value maintained by each user; if the vector clock of the first operation does not meet the requirement of being less than or equal to the vector clock of the second operation, and the vector clock of the second operation does not meet the requirement of being less than or equal to the vector clock of the first operation, then it is determined that there is a conflict between the first and second operations; for conflicting operations, a dual judgment rule of vector clock and user weight is used to perform conflict merging.

[0101] In implementation, a dual judgment rule of vector clock and user weight is used to perform conflict merging processing, which may specifically include: comparing the maximum vector clock values ​​of the first and second operations in conflict; if the maximum vector clock value of the first operation is greater than that of the second operation, executing the first operation; if the maximum vector clock value of the second operation is greater than that of the first operation, executing the second operation; if the maximum vector clock values ​​of the first and second operations are the same, the user weight is used to determine which operation is executed first; if the priority cannot be determined, merging the data of the first and second operations.

[0102] Furthermore, in specific implementation, in the above-mentioned cross-platform visualization method provided in an embodiment of the present invention, step S102 obtains and analyzes the device characteristic parameters corresponding to the current operation, identifies the device category to determine the code generation direction, generates multi-terminal adaptation code, and performs layout optimization at the same time to achieve cross-device display of the interface. Specifically, it may include: obtaining the device characteristic parameters corresponding to the current operation, and analyzing the device characteristic parameters, identifying the device category, determining the adaptation code generation direction according to the device category, and generating code adapted to different terminals; obtaining the number of grid columns according to the device characteristic parameters, and combining the device characteristic parameters with the number of grid columns to obtain the component size based on the overall screen size, and performing layout optimization according to the number of grid columns and the component size.

[0103] In the above steps, the device characteristic parameters corresponding to the current operation are obtained, and the device characteristic parameters are analyzed to identify the device category. The adaptive code generation direction is determined according to the device category, and code adapted to different terminals is generated; specifically, it may include: inputting a parameter set that describes the display and interaction characteristics of the device; the parameter set includes the width and height of the device screen, the number of pixels per inch, the input type, and the maximum rendering resolution of the device; according to the parameter set, it is determined whether the device screen width is less than or equal to the first set pixel and the input type is a touch operation; if so, a code suitable for a mobile device is output; if not, it is determined whether the device screen width is greater than the second set pixel and the maximum rendering resolution is greater than or equal to the device screen set resolution, and if so, a code suitable for a desktop device is output; if not, it is determined whether the maximum rendering resolution of the device is greater than or equal to the set value and the input type is a gesture operation, and if so, a code suitable for an extended reality device is output.

[0104] In the above steps, the number of grid columns is obtained according to the device characteristic parameters, and the device characteristic parameters are combined with the number of grid columns to obtain the component size based on the overall screen size. The layout optimization is performed according to the number of grid columns and the component size, which may specifically include: determining the device screen width, layout margins, scrolling area size, grid width and grid spacing, subtracting the margins and scrolling area size from the screen width to obtain the remaining horizontal space; dividing the remaining horizontal space by the sum of the grid width and the grid spacing, rounding the result down to obtain the number of grid columns; obtaining the available width of each column according to the device screen width and the number of grid columns; obtaining the component size related to the overall screen size according to the device type coefficient, screen width and screen height; and selecting the smaller value between the available width of each column and the component size related to the overall screen size as the final component size.

[0105] Furthermore, in specific implementation, in the above-mentioned cross-platform visualization method provided in an embodiment of the present invention, step S103 utilizes the version management module to record the interface design version through a directed acyclic graph, quantifies the operational differences of branch versions, and performs branch merges. Specifically, it may include: constructing a version graph based on the structure of a directed acyclic graph, and using the version graph to record the historical version and current version of the interface design to track the version history and evolution path; constructing a branch merge cost evaluation model, and using the branch merge cost evaluation model to quantify the operational differences of branch versions, and selectively performing automatic branch merges or triggering manual intervention.

[0106] In the above steps, a version graph is constructed based on the structure of a directed acyclic graph, and the version graph is used to record the historical versions and current versions of the interface design to track the version history and evolution path. Specifically, it can include: constructing a version graph based on the structure of a directed acyclic graph, and using the version graph to store version nodes; each version node contains an operation set and a hash value of the parent node; the operation set is used to record all operations performed on the current version and the previous version, and the hash value of the parent node is used to identify the direct predecessor version of the current version; the parent node is located in the version graph through the hash value of the parent node to construct the evolution path of the version.

[0107] In the above steps, a branch merge cost evaluation model is constructed, and the branch merge cost evaluation model is used to quantify the operational differences between branch versions, and automatic branch merges are selectively executed or manual intervention is triggered. Specifically, it may include: establishing a branch merge cost evaluation model based on the two branch versions to be merged and the operation sets of the branch versions on the interface elements; before performing the branch merge, the branch merge cost evaluation model is used to calculate the operational differences between the two branch versions on each interface element to obtain the total cost of the version merge; if the total cost of the version merge is less than or equal to the set threshold, automatic branch merge is executed; if the total cost of the version merge is greater than the set threshold, the manual intervention mechanism is triggered.

[0108] An embodiment of the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to execute the steps in any of the above cross-platform visualization method embodiments.

[0109] An embodiment of the present invention further provides a computer-readable storage medium, in which a computer program is stored. The computer program is configured to execute the steps of any of the above-mentioned cross-platform visualization method embodiments when running.

[0110] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0111] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any one of the above cross-platform visualization method embodiments are implemented.

[0112] An embodiment of the present invention also provides another computer program product, including a non-volatile computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the steps of any of the above-mentioned cross-platform visualization method embodiments.

[0113] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present invention.

[0114] The cross-platform visualization system, method, device, medium, and program product provided by the present invention are introduced in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method and core ideas of the present invention. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present invention, the present invention can also be improved and modified in a number of ways, and these improvements and modifications also fall within the scope of protection of the present invention.

Claims

1. A cross-platform visualization system, characterized in that: include: A distributed collaboration module is used to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations and determine the operation to be adopted by the interface when an operation conflict is determined to have occurred. The distributed collaboration module includes a communication layer and a conflict merging layer. The communication layer is used to establish a point-to-point communication channel using a real-time network communication method, and transmit multi-user operation data packets between various terminals through the point-to-point communication channel. The conflict merging layer is used to determine the order in which operations are executed, obtain the causal relationship between operations according to the operation execution order, and determine whether an operation conflict has occurred based on the causal relationship between operations. If so, conflict merging is performed to determine the operation to be adopted by the interface. If not, the interface is displayed directly in the order in which the operations are executed; the conflict merging layer includes: a sequence determination unit, which is used to define a partial order relationship between operations and determine the order in which operations are executed. If the timestamp of the first operation is less than the timestamp of the second operation and the first operation is valid, the first operation is executed before the second operation; a clock comparison unit, which is used to introduce a vector clock and compare the vector clocks of the operations in the order in which the operations are executed to determine the causal relationship between the operations; if the vector clock of the first operation is less than or equal to the second operation, the first operation occurs causally before the second operation; the vector clock includes the local clock value maintained by each user; a conflict determination unit, which is used to determine that there is a conflict between the first operation and the second operation if the vector clock of the first operation does not meet the requirement of being less than or equal to the vector clock of the second operation, and the vector clock of the second operation does not meet the requirement of being less than or equal to the vector clock of the first operation; a conflict merging unit, which is used to perform conflict merging processing for conflicting operations using a dual determination rule of vector clock and user weight; A cross-platform rendering adaptation module is used to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization at the same time to achieve cross-device display of the interface; the cross-platform rendering adaptation module includes: a feature extraction unit, used to obtain the device characteristic parameters corresponding to the current operation, and analyze the device characteristic parameters to identify the device category; determine the adaptive code generation direction according to the device category, and generate code adapted to different terminals; a layout optimization unit, used to obtain the number of grid columns according to the device characteristic parameters, and combine the device characteristic parameters with the grid column number to obtain the component size based on the overall screen size, and according to the grid column number and the component size, The layout optimization unit includes: a first calculation subunit, configured to determine the device screen width, layout margins, scrolling area size, grid width, and grid spacing, and to obtain a remaining horizontal space by subtracting the margins and scrolling area size from the screen width; the remaining horizontal space is divided by the sum of the grid width and the grid spacing, and the result is rounded down to obtain the number of grid columns; a second calculation subunit, configured to obtain an available width for each column based on the device screen width and the number of grid columns; and a component size related to the overall screen size based on a device type coefficient, screen width, and screen height; and a smaller value between the available width for each column and the component size related to the overall screen size is selected as the final component size. The version management module is used to build a version graph based on the structure of a directed acyclic graph while the interface is displayed across devices. The version graph is used to record interface design versions, quantify the operational differences between branch versions, and selectively perform automatic branch merging or trigger manual intervention.

2. The cross-platform visualization system according to claim 1, characterized in that: In the communication layer, a signaling server is used to transmit data based on the stream control transmission protocol; The format of the operation data packet transmitted in the communication layer includes: a unique identifier, which is used to track and manage operations in a distributed system; a user identifier, which is used to distinguish operations of different users; a timestamp, which is used to record the time when the operation occurred; and an operation status, which is used to describe the change information in the interface.

3. The cross-platform visualization system according to claim 2, characterized in that: The conflict merging unit is configured to compare the maximum vector clock values ​​of a first operation and a second operation in conflict. If the maximum vector clock value of the first operation is greater than the maximum vector clock value of the second operation, the first operation is executed; if the maximum vector clock value of the second operation is greater than the maximum vector clock value of the first operation, the second operation is executed; and if the maximum vector clock values ​​of the first and second operations are the same, the user operation with the higher weight is executed first according to user weight. If the priority cannot be determined, the data of the first operation and the second operation are merged.

4. The cross-platform visualization system according to claim 1, characterized in that: The feature extraction unit includes: An input subunit, configured to input a parameter set describing the display and interaction characteristics of the device; the parameter set includes the width and height of the device screen, the number of pixels per inch, the input type, and the maximum rendering resolution of the device; a first judgment subunit, configured to judge, based on the parameter set, whether the device screen width is less than or equal to a first set pixel and the input type is a touch operation; if so, output a code applicable to the mobile device; if not, execute the judgment operation of the second judgment subunit; The second judgment subunit is used to judge whether the device screen width is greater than the second set pixel and the maximum rendering resolution is greater than or equal to the device screen set resolution. If so, output the code suitable for the desktop device; if not, execute the judgment operation of the third judgment subunit; The third judgment subunit is used to judge whether the maximum rendering resolution of the device is greater than or equal to a set value and the input type is a gesture operation. If so, it outputs a code suitable for the extended reality device.

5. The cross-platform visualization system according to claim 1, characterized in that: The version management module includes: The version recording unit is used to build a version graph based on the structure of a directed acyclic graph. The version graph is used to record the historical and current versions of the interface design to track the version history and evolution path. The branch merging unit is used to build a branch merging cost evaluation model, use the branch merging cost evaluation model to quantify the operational differences of branch versions, and selectively perform automatic branch merging or trigger manual intervention.

6. The cross-platform visualization system according to claim 5, characterized in that: The version recording unit includes: A version graph construction subunit is used to construct a version graph based on a directed acyclic graph structure, and use the version graph to store version nodes. Each version node contains an operation set and a hash value of a parent node. The operation set is used to record all operations performed on the current version and the previous version, and the hash value of the parent node is used to identify the direct predecessor version of the current version. The evolution path construction sub-unit is used to locate the parent node in the version map through the hash value of the parent node and construct the evolution path of the version.

7. The cross-platform visualization system according to claim 5, characterized in that: The branch merging unit includes: An evaluation model establishment subunit is used to establish a branch merge cost evaluation model based on two branch versions to be merged and a set of operations on interface elements of the branch versions; The cost evaluation subunit is used to calculate the operational differences between the two branch versions on various interface elements using the branch merge cost evaluation model before performing a branch merge, and obtain the total cost of the version merge; if the total cost of the version merge is less than or equal to the set threshold, perform an automatic branch merge; if the total cost of the version merge is greater than the set threshold, trigger a manual intervention mechanism.

8. A cross-platform visualization method, characterized in that: include: A distributed collaboration module is used to establish a point-to-point channel to transmit multi-user operation data packets to synchronize operations and determine the operation to be adopted by the interface when an operation conflict is determined to have occurred. The distributed collaboration module includes a communication layer and a conflict merging layer. The communication layer is used to establish a point-to-point communication channel using a real-time network communication method, and transmit multi-user operation data packets between various terminals through the point-to-point communication channel. The conflict merging layer is used to determine the order in which operations are executed, obtain the causal relationship between operations according to the operation execution order, and determine whether an operation conflict has occurred based on the causal relationship between operations. If so, conflict merging is performed to determine the operation to be adopted by the interface. If not, the interface is displayed directly in the order in which the operations are executed; the conflict merging layer includes: a sequence determination unit, which is used to define a partial order relationship between operations and determine the order in which operations are executed. If the timestamp of the first operation is less than the timestamp of the second operation and the first operation is valid, the first operation is executed before the second operation; a clock comparison unit, which is used to introduce a vector clock and compare the vector clocks of the operations in the order in which the operations are executed to determine the causal relationship between the operations; if the vector clock of the first operation is less than or equal to the second operation, the first operation occurs causally before the second operation; the vector clock includes the local clock value maintained by each user; a conflict determination unit, which is used to determine that there is a conflict between the first operation and the second operation if the vector clock of the first operation does not meet the requirement of being less than or equal to the vector clock of the second operation, and the vector clock of the second operation does not meet the requirement of being less than or equal to the vector clock of the first operation; a conflict merging unit, which is used to perform conflict merging processing for conflicting operations using a dual determination rule of vector clock and user weight; A cross-platform rendering adaptation module is used to obtain and analyze the device characteristic parameters corresponding to the current operation, identify the device category to determine the code generation direction, generate multi-terminal adaptation code, and perform layout optimization at the same time to achieve cross-device display of the interface; the cross-platform rendering adaptation module includes: a feature extraction unit for obtaining the device characteristic parameters corresponding to the current operation, analyzing the device characteristic parameters, and identifying the device category; determining the adapted code generation direction according to the device category, and generating code adapted to different terminals; a layout optimization unit for obtaining the number of grid columns according to the device characteristic parameters, and combining the device characteristic parameters with the number of grid columns to obtain the component size based on the overall screen size, and according to the number of grid columns and the component size, The layout optimization unit includes: a first calculation subunit, configured to determine the device screen width, layout margins, scrolling area size, grid width, and grid spacing, and to obtain a remaining horizontal space by subtracting the margins and scrolling area size from the screen width; the remaining horizontal space is divided by the sum of the grid width and the grid spacing, and the result is rounded down to obtain the number of grid columns; a second calculation subunit, configured to obtain an available width for each column based on the device screen width and the number of grid columns; and a component size related to the overall screen size based on a device type coefficient, screen width, and screen height; and a smaller value between the available width for each column and the component size related to the overall screen size is selected as the final component size. The version management module is used to build a version graph based on the structure of a directed acyclic graph. The version graph is used to record the interface design version, quantify the operational differences between branch versions, and selectively perform automatic branch merging or trigger manual intervention.

9. An electronic device, characterized in that: include: memory for storing computer programs; A processor, configured to implement the steps of the cross-platform visualization method according to claim 8 when executing the computer program.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein the computer program implements the steps of the cross-platform visualization method according to claim 8 when executed by a processor.

11. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the cross-platform visualization method according to claim 8 are implemented.

Images