VUE dynamic component interface configuration and rendering method for multi-scene multiplexing

Abstract

The invention discloses a multi-scene multiplexing-oriented VUE dynamic component interface configuration and rendering method, which comprises the following steps of: receiving a multi-scene configuration file, and extracting and coding to generate a scene feature vector; component layout parameters, resource priorities and rendering strategies are automatically generated through the two-stage generative adversarial network, and application parameters are output after the generated parameters are optimized; on the basis of application parameters, asynchronous component loading and priority queue scheduling are adopted, and on-demand loading of components is achieved in combination with dependency topology sorting; dynamically dividing a rendering area by using an adaptive Gaussian algorithm, and rejecting invalid rendering through a boundary box mechanism; the DOM operation frequency is reduced by adopting an optimization Diff algorithm; and constructing a component cache pool through an elimination strategy. According to the method, intelligent configuration and efficient rendering of the interface component under multiple scenes are realized, the development efficiency is improved, and the performance is optimized.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end interface development and dynamic rendering optimization, and particularly relates to a VUE dynamic component interface configuration and rendering method for multi-scene reuse. BACKGROUND

[0002] With the rapid development of Internet applications, the front-end interface needs to adapt to multiple business scenarios and changing user needs. The traditional static component configuration and manual rendering method cannot meet the actual requirements of multi-scene reuse, efficient maintenance and dynamic expansion. In the prior art, component configuration relies on manual adjustment, lacks automation and intelligent mechanism, resulting in low interface development efficiency, slow response speed and error-prone.

[0003] At the same time, although the current mainstream front-end framework supports componentization and partial asynchronous loading, there are still deficiencies in component layout optimization, dependency relationship processing, resource scheduling, rendering efficiency improvement and cache management in multiple scenarios, which cannot achieve unified scheduling and high-performance rendering across scenarios.

[0004] Therefore, how to provide a VUE dynamic component interface configuration and rendering method for multi-scene reuse is a problem that needs to be solved by those skilled in the art. SUMMARY

[0005] One object of the present application is to provide a VUE dynamic component interface configuration and rendering method for multi-scene reuse. The present application realizes automatic configuration, on-demand loading and efficient rendering of interface components in multiple scenarios through feature extraction and encoding, two-stage generative adversarial network and adaptive optimization mechanism. It can intelligently generate component layout and rendering strategy according to business needs and historical data, effectively improving development efficiency. Through priority queue, dependency topological sorting, Gaussian rendering optimization and cache management, resource consumption is reduced, and interface response speed and running stability in complex scenarios are improved.

[0006] According to the VUE dynamic component interface configuration and rendering method for multi-scene reuse of the embodiment of the present application, the following steps are included: Receive a multi-scene configuration file, parse it using a feature extraction and encoding algorithm, and generate a scene feature vector; Build a two-stage generative adversarial network, input the scene feature vector, and output component layout parameters, resource priority and rendering strategy through the generator to form the generated parameters. The discriminator evaluates the effectiveness of the generated parameters, iteratively optimizes until the generated parameters meet the preset standard, and obtains the application parameters; Based on the application parameters, use the asynchronous component loading method of the VUE framework to create a component loading queue through the dynamic import API, topologically sort the dependent components, and use a priority queue for the loading queue; Adaptive Gaussian algorithm is introduced to calculate the rendering area radius, and the rendering area is dynamically divided according to the scene complexity coefficient and the rendering error threshold, and the bounding box optimization mechanism is used to eliminate invalid rendering calculation; An optimized Diff algorithm is adopted to reduce the number of DOM operations by calculating the longest increasing subsequence of the new and old virtual DOM tree node sequences. A component cache pool based on the elimination strategy is constructed, and the upper limit of the component cache is set to a limited number. When the cache is full, the least frequently used components are preferentially eliminated.

[0007] Further, the multi-scene configuration file supports JSON format, including: Scene identification information: the unique identification, name and grouping label of each business scene; Component type: component list involved in each scene, including basic components and composite components; Attribute parameters: configuration attributes of each component, including initial value, state, style parameter, interactive event and data source reference; Structural hierarchy: nesting, parent-child, parallel, partition, column, grid layout relationship between components; Dependency relationship: dependency and data flow relationship between components, including event linkage, data binding and loading sequence constraint; Historical configuration data: past configuration and usage records of scenes or components, including user preferences, historical layout schemes and interactive logs; Encoded as follows: the scene identification field is encoded into binary code using hash encoding; the component type is numbered according to the predefined dictionary and the frequency is counted; the attribute parameters are processed by numerical normalization and one-hot encoding, and then spliced by mean value; the structural hierarchy is obtained by tree traversal to get depth and width numerical features; the dependency relationship is encoded in the form of adjacency matrix and expanded into a one-dimensional vector; the historical configuration parameters are normalized and directly spliced; all features are spliced into a fixed length vector in a fixed order, and then normalized as a whole, finally forming a scene feature vector.

[0008] Further, the two-stage generative adversarial network includes a generator and a discriminator: The generator adopts an improved U-Net structure, inputs the scene feature vector, and outputs the preliminary layout parameters in the first stage: Each layer uses a nonlinear activation function RELU for processing; The output result of each layer is transmitted to the next layer and also used as a feature skip connection input to the corresponding decoder layer; The decoder part is also composed of multiple layers of fully connected networks, which receives the splicing vector of the same layer output and the upper decoding result of the encoder, and finally outputs the preliminary layout parameters; The preliminary layout parameters are a set of component parameter sets, each component containing position coordinates, size, and parent sequence number values, each parameter normalized to the interval of zero to one. If the actual number of components is less than the agreed maximum number of components, the insufficient part is filled with a zero vector. The second stage generates resource priority and rendering strategy parameters based on the preliminary results: The preliminary layout parameters output by the first stage are flattened into a one-dimensional vector and spliced with the scene feature vector as input for the second stage generator. The input vector is processed by a multi-layer fully connected network, with a non-linear activation function set at each layer, and finally outputs the resource priority parameter and rendering strategy parameter corresponding to each component. The resource priority parameter is limited to between zero and one through probabilistic means. The rendering strategy parameter is obtained by taking the maximum value of the normalized probability distribution to get discrete strategy labels. The discriminator uses Euclidean distance as the discrimination function to compare the generated parameters with historical real parameters in blocks, and outputs the effectiveness discrimination probability. During training, the Euclidean distance between the generated parameters and the historical real parameters is used as the loss function, and the generator network weights are iteratively updated using gradient optimization methods until the Euclidean distance of the generated parameters is less than the preset distance threshold.

[0009] Further, the construction and scheduling of the component loading queue include the following steps: Parse the component layout parameters, resource priority, and rendering strategy in the application parameters to obtain the unique identifier, resource size, historical usage frequency, and correlation degree parameters of all components to be loaded in sequence. Based on the dependency relationship of each component, a dependency directed graph of all components is generated, and a topological sorting algorithm is used to sort the dependency graph to obtain a component loading order that meets the dependency constraints. For each component, the loading priority of the component is calculated using weighted summation, specifically: Set three sets of weight coefficients for resource size weight, usage frequency weight, and scene correlation degree weight, and the sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative. Multiply the resource size by the resource size weight, multiply the historical usage frequency by the usage frequency weight, and multiply the scene correlation degree by the scene correlation degree weight, and add the three to obtain the loading priority score of the component. Sort the components according to their loading priority scores, with higher priority scores being added to the loading queue first. Adjust the priority queue based on the dependency order obtained by topological sorting to generate a component loading queue that meets the dependency relationship and priority requirements.

[0010] Further, the component loading queue supports dynamic refreshing and exception handling, including the following steps: During operation, the loading state and dependency state of components in the component loading queue are detected in real time, and when it is detected that the loading of a dependent component of a certain component fails or times out, the component is automatically removed from the current queue or its loading priority is temporarily reduced; When external business requirements or scene configurations change, the members and order of the component loading queue are dynamically updated according to the latest application parameters, dependency relationships, and priority scores; For a component instance that has been loaded and has not been activated or used for more than a set time, it is actively removed from the cache pool according to pre-set rules, and the queue is re-adjusted to release resources; During the component loading process, if a loop dependency, repeated dependency, or component instance exception is found in the queue, an exception log is automatically output, and the system is restored to the last valid queue state through a rollback mechanism.

[0011] Further, the adaptive Gaussian algorithm includes the following steps: For each component, a complexity coefficient under the current scene is obtained, which is calculated based on the number of components in the scene, the component nesting level, and the data binding density parameter, and is normalized to a standardized value between zero and one. The component nesting level is recursively calculated by traversing the component tree structure described in the configuration file, and the maximum path length from the root node to each position is taken as the nesting level. The data binding density is calculated by traversing all components, counting the total number of fields of all bound data sources, dividing by the total number of components, and obtaining the average number of data binding fields. The density value is normalized with the pre-set maximum density as a standardized parameter. A current pre-set rendering error threshold is obtained, which is set according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value. For each component, a Gaussian function is used to dynamically calculate the rendering area radius of the component based on the complexity coefficient and the rendering error threshold, specifically: The complexity coefficient is multiplied by the standard deviation parameter of the Gaussian distribution factor, and combined with the rendering error threshold, the rendering radius is calculated by the Gaussian function. The rendering radius is used to limit the actual rendering impact range of the component. During rendering task scheduling, the actual rendering area of each component is spatially divided using the axis-aligned bounding box algorithm, and the bounding boxes of all components to be rendered are detected for overlap. For regions that are determined to be invalid overlap or completely blocked by other components, the related rendering calculation tasks are removed in advance to reduce invalid rendering operations.

[0012] Furthermore, the optimized Diff algorithm includes the following steps: Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two sets of nodes in their respective sequences; The virtual DOM node sequence is divided into multiple business partitions based on the scene feature vector, and each partition corresponds to a different grouping label. For the new and old virtual DOM node sequences, map them according to the unique identifier of the nodes, and convert the node indices in the new sequence into the index arrangement corresponding to the old sequence; For each partition's index arrangement, a binary search algorithm is used to calculate the longest increasing subsequence, resulting in a set of node subsequence indices that do not require movement. For nodes not included in the longest increasing subsequence, perform node movement or insertion / deletion operations to minimize the DOM.

[0013] Furthermore, the construction and management of the component cache pool includes the following steps: Set the upper limit of the component cache pool capacity, where the upper limit is a preset limit on the number of component instances; During operation, the usage frequency of each component instance in the cache pool is monitored in real time; When the number of component instances in the cache pool reaches the capacity limit and new component instances need to be added, they are sorted according to the usage frequency of each component instance. Remove the least frequently used component instances from the cache pool and release the corresponding resources; New component instances are added to the cache pool.

[0014] The beneficial effects of this invention are: This invention achieves automatic configuration, dynamic loading, and efficient rendering of UI components across multiple scenarios by introducing feature extraction and encoding algorithms, a two-stage generative adversarial network, and an adaptive scheduling optimization mechanism. Compared to existing manual configuration or static rule-driven solutions, this invention can automatically generate component layouts, priorities, and rendering strategies based on business needs and historical data, significantly improving the efficiency of UI development and maintenance.

[0015] This invention also effectively reduces resource consumption and improves interface response speed and operational stability in complex multi-scenario environments through priority queues, dependency topology sorting, adaptive Gaussian rendering optimization, longest increasing subsequence node movement optimization, and component cache management based on elimination strategies. It has strong advantages in intelligence, adaptability, and high performance. Attached Figure Description

[0016] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Fig. 1 A flow chart of a VUE dynamic component interface configuration and rendering method for multi-scene reuse proposed by the present application; Fig. 2 An optimized Diff algorithm schematic diagram of a VUE dynamic component interface configuration and rendering method for multi-scene reuse proposed by the present application; Fig. 3 A result schematic diagram of a VUE dynamic component interface configuration and rendering method for multi-scene reuse proposed by the present application. DETAILED DESCRIPTION

[0017] The present application will now be further described in detail with reference to the drawings. These drawings are simplified schematic diagrams and only illustrate the basic structure of the present application in a schematic manner, and thus only show the components related to the present application.

[0018] REFERENCE Figs. 1-3 A VUE dynamic component interface configuration and rendering method for multi-scene reuse, comprising the following steps: Receiving a multi-scene configuration file, using a feature extraction and coding algorithm to parse and generate a scene feature vector; Building a two-stage generative adversarial network, inputting the scene feature vector, outputting component layout parameters, resource priority and rendering strategy through the generator to form the generated parameters, and the discriminator to evaluate the effectiveness of the generated parameters, and iteratively optimizing until the generated parameters reach the preset standard to obtain the application parameters; Based on the application parameters, using the asynchronous component loading mode of the VUE framework to realize component on-demand loading, creating a component loading queue through dynamic import API, and implementing topological sorting on dependent components, wherein the loading queue uses a priority queue, and the priority calculation is based on a weighted function of resource size, usage frequency and scene correlation degree, and the sum of the weight coefficients is a constant; Introducing an adaptive Gaussian algorithm to calculate the radius of the component rendering area, dynamically dividing the rendering area according to the scene complexity coefficient and the rendering error threshold, and simultaneously using a bounding box optimization mechanism to early eliminate invalid rendering calculations; On the basis of the original Diff algorithm, segmenting the virtual DOM sequence according to the grouping label, separately performing LIS optimization inside each segment, calculating the longest increasing subsequence of the new and old virtual DOM tree node sequences to reduce the number of DOM operations, and realizing intra-partition optimization and global near-optimization; Building a component cache pool based on an elimination strategy, setting the upper limit of the component cache to a limited number, and when the cache is full, preferentially eliminating the least used components.

[0019] In this embodiment, the multi-scene configuration file supports JSON format, including: Scene identification information: unique identification, name, grouping label of each business scene; Component type: list of components involved in each scene, including basic components and composite components; Attribute parameters: configuration attributes of each component, including initial value, state, style parameter, interaction event, data source reference; Structural hierarchy: nesting, parent-child, parallel, partition, column, grid layout relationship between components; Dependency relationship: dependency and data flow relationship between components, including event linkage, data binding, loading sequence constraint; Historical configuration data: past configuration and usage records of scenes or components, including user preferences, historical layout schemes, interaction logs; Encoded as follows: scene identification field is encoded into binary code using hash encoding; component type is numbered according to a predefined dictionary and the frequency is counted; attribute parameters are processed using numerical normalization and one-hot encoding, and then concatenated according to the mean value; structural hierarchy is obtained by tree traversal to get depth and width numerical features; dependency relationship is encoded in the form of adjacency matrix and expanded into a one-dimensional vector; historical configuration parameters are normalized and directly concatenated; all features are concatenated into a fixed-length vector in a fixed order, and then normalized as a whole, finally forming a scene feature vector.

[0020] In this embodiment, the two-stage generative adversarial network includes a generator and a discriminator: The generator uses an improved U-Net structure, inputs the scene feature vector, and outputs preliminary layout parameters in the first stage: Each layer uses a nonlinear activation function RELU for processing; The output result of each layer is not only passed to the next layer, but also used as a feature jump connection input to the corresponding decoder layer; The decoder part is also composed of multiple layers of fully connected networks, which receives the concatenation vector of the same layer output and the upper decoding result of the encoder, and finally outputs the preliminary layout parameters; The preliminary layout parameters are a set of component parameters, each component contains position coordinates, size and parent sequence number, and each parameter is normalized to the interval of zero to one; If the actual number of components is less than the agreed maximum number of components, the insufficient part is filled with a zero vector; The second stage generates resource priority and rendering strategy parameters jointly with the preliminary results: The preliminary layout parameters output by the first stage are flattened into a one-dimensional vector and concatenated with the scene feature vector as the input of the second stage generator; The input vector is processed by multiple layers of fully connected networks, each layer is set with a nonlinear activation function, and finally outputs the resource priority parameter and the rendering strategy parameter corresponding to each component; The resource priority parameter is limited between zero and one by a probabilistic manner; The rendering strategy parameter is obtained by a maximum value of normalized probability distribution, and a discrete strategy label is obtained; The discriminator adopts the Euclidean distance as a discrimination function, compares the generated parameter with the historical real parameter in blocks, and outputs an effectiveness discrimination probability, including: Selecting data corresponding to the generated parameter and the historical real parameter respectively; Calculating the difference between each pair of parameters in the generated parameter and the historical real parameter in sequence; Squaring all the differences, and accumulating all the squared results; Taking the square root of the accumulated result to obtain the Euclidean distance between the generated parameter and the historical real parameter; Comparing the calculated Euclidean distance with a preset distance threshold; When the Euclidean distance is less than or equal to the threshold, it is determined that the generated parameter is effective, and when the Euclidean distance is greater than the threshold, it is determined that the generated parameter is invalid; In the training process, the Euclidean distance between the generated parameter and the historical real parameter is used as a loss function, and a gradient optimization method is used to iteratively update the generator network weight until the Euclidean distance of the generated parameter is less than the preset distance threshold.

[0021] In the embodiment, the construction and scheduling of the component loading queue include the following steps: Analyzing the component layout parameter, resource priority and rendering strategy in the application parameter, obtaining the unique identifier, resource occupation size, historical use frequency and current scene correlation degree parameter of all components to be loaded in sequence, the resource occupation size is obtained by reading the component main code package volume through an automatic packaging tool, and the byte number of all dependent static resource files and the initialization memory peak value are accumulated, the three are weighted and summed as the original occupation value, and then linearly normalized by using the maximum value and the minimum value of all components. The historical use frequency is obtained by analyzing the cumulative loading times of the component in a fixed time window, and is linearly normalized according to the maximum value and the minimum value of the use times of all components. The current scene correlation degree is calculated by comparing the intersection number of the component applicable scene label and the current business scene label, or the cosine similarity is calculated by using the one-hot encoding vector of the label set, and is normalized to a decimal between zero and one; Based on the dependency relationship of each component, a dependency directed graph of all components is generated: the dependency description data of all to-be-loaded components is parsed, and each component unique identifier is taken as a node of the graph. For each component, its dependency component list is read in sequence, and a directed edge between each dependency component in the dependency list and the current component is established, pointing to the current component, indicating that the component can be loaded only after the dependency component is loaded. After the above process traverses all components and their dependency lists, a complete dependency directed graph is generated. The dependency directed graph can be stored in an adjacency list or an adjacency matrix. After the dependency directed graph is generated, loop detection is performed on the graph structure, and if there is a circular dependency, an exception prompt is output, otherwise the topological sorting link is entered.

[0022] The topological sorting algorithm is used to sort the dependency graph to obtain a component loading order that meets the dependency constraints. For each component, the loading priority of the component is calculated using weighted summation, specifically: Three sets of weight coefficients are set for resource size weight, usage frequency weight, and scenario correlation degree weight, and the sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative. The resource size is multiplied by the resource size weight, the historical usage frequency is multiplied by the usage frequency weight, and the scenario correlation degree is multiplied by the scenario correlation degree weight, and the three are added to obtain the loading priority score of the component. The components are sorted according to the loading priority score, and the components with higher priority scores are preferentially added to the loading queue. The priority queue is adjusted in combination with the dependency order obtained by topological sorting to generate a component loading queue that meets the dependency relationship and priority requirements.

[0023] In this embodiment, the component loading queue supports dynamic refreshing and exception handling, including the following steps: During running, the loading state and dependency state of the components in the component loading queue are detected in real time, and when it is detected that the dependency component of a component fails to load or times out, the component is removed from the current queue or its loading priority is temporarily reduced; When external business requirements or scene configurations change, the members and order of the component loading queue are dynamically updated according to the latest application parameters, dependency relationships, and priority scores; For a loaded component instance that has not been activated or used for more than a set time, it is actively removed from the cache pool according to a preset rule, and the queue is readjusted to release resources; During the component loading process, if loop dependency, repeated dependency, or component instance exception is found in the queue, an exception log is output, and the system is restored to the last valid queue state through a rollback mechanism.

[0024] In this embodiment, the adaptive Gaussian algorithm includes the following steps: For each component to be rendered, first obtain the complexity coefficient under the current scene, which is calculated based on the number of components in the scene, the component nesting level, and the data binding density parameter, and is normalized to a standardized value between zero and one. The component nesting level is calculated by recursively counting the path length from the root node to each component's position by traversing the component tree structure described in the configuration file. The maximum path length is taken as the nesting level. The data binding density is calculated by counting the total number of fields of all binding data sources and dividing by the total number of components to obtain the average number of data binding fields. This density value is normalized with the preset maximum density as a standardized parameter. Obtain the current preset rendering error threshold, which is set according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value. For each component, use a Gaussian function to dynamically calculate the rendering area radius of the component based on the complexity coefficient and the rendering error threshold. Specifically: Multiply the complexity coefficient by the standard deviation parameter of the Gaussian distribution factor and combine it with the rendering error threshold to calculate the rendering radius using the Gaussian function. The rendering radius is used to define the actual rendering impact range of the component. During rendering task scheduling, the actual rendering area of each component is divided using the axis-aligned bounding box algorithm. The bounding boxes of all components to be rendered are detected for overlap. Based on the actual rendering area parameters of each component to be rendered, the left, right, top, and bottom boundary coordinates of its axis-aligned bounding box are calculated. Then, the bounding boxes of all components are compared pairwise to determine whether there is an intersection in the horizontal and vertical intervals. If there is an intersection, it is determined that the bounding boxes overlap. For all overlapping bounding boxes, record the component number and overlapping area coordinates, and determine whether a component is completely obscured based on the component level information. Finally, output the overlap detection result and occlusion information to provide data basis for subsequent invalid rendering area elimination. For the areas determined to be invalid overlap or completely obscured by other components, the related rendering calculation tasks are eliminated in advance to reduce invalid rendering operations and improve overall rendering efficiency.

[0025] In this embodiment, the optimized Diff algorithm includes the following steps: Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two groups of nodes in their respective sequences. Divide the virtual DOM node sequence into multiple business partitions according to the scene feature vector, and each partition corresponds to a different grouping tag. Map the new and old virtual DOM node sequences according to the node unique identifier, and convert the node index in the new sequence to the corresponding index arrangement in the old sequence. For the index arrangement of each partition, the longest increasing subsequence is calculated by binary search to obtain the node subsequence index set without moving; For the nodes not contained in the longest increasing subsequence, node moving or insertion and deletion minimization DOM operation is performed.

[0026] In the embodiment, the construction and management of the component cache pool includes the following steps: The upper limit of the capacity of the component cache pool is set, and the upper limit of the capacity is a preset limited number of component instances; During operation, the usage frequency of each component instance in the cache pool is monitored in real time; When the number of component instances in the cache pool reaches the upper limit of the capacity and a new component instance needs to be added, the component instances are sorted according to the usage frequency; The component instance with the lowest usage frequency is eliminated from the cache pool, and the corresponding resources are released; The new component instance is added to the cache pool, and the number of component instances in the cache pool is ensured not to exceed the upper limit of the capacity.

[0027] Example 1 In order to verify the feasibility of the application in implementation, the application is applied to the "operation large screen" business scenario of a SaaS enterprise data analysis platform.

[0028] The user configures the "operation large screen" scenario in JSON format in the background of the platform, and a typical configuration fragment is as follows: Scenario ID: SCN_ANALYSIS_2024; Component list: TableChart, LineChart, PieChart, ExportBtn, FilterPanel; Attribute parameters: such as the initial state (visible / hidden) of each component, the default data source, and the theme color; Structural hierarchy: TableChart, LineChart, and PieChart are direct child nodes of the root container, and ExportBtn and FilterPanel are child nodes thereof; Dependency relationship: ExportBtn depends on TableChart rendering completion, and FilterPanel depends on data source initialization; Historical configuration data: TableChart past 30-day average daily visits 300, ExportBtn daily clicks 100 times.

[0029] According to the above configuration, the parameters are extracted and coded, and a sample of the scenario feature vector is as follows: Number of components: 5; Maximum nesting level: 2; Data binding density: 12 fields / 5 components = 2.4; TableChart access frequency: 300 / total accesses = 0.43 (normalized); ExportBtn click rate: 100 / total accesses = 0.14 (normalized); The scene feature vector is input into the two-stage generative adversarial network, and the system automatically outputs the following application parameters, as shown in Table 1.

[0030] Table 1: Sample core data table As shown in Table 1, the core display components TableChart and LineChart have high priority and use synchronous or asynchronous rendering to ensure fast availability of main content on large screens; ExportBtn is a functional component that uses lazy rendering to prevent affecting the performance of the main view area.

[0031] The spatial coordinates and dimensions of all components are automatically adjusted by AI according to the regular visualization templates of large screens. ExportBtn must be loaded after TableChart is rendered to ensure the availability and correctness of the data export button.

[0032] TableChart and LineChart, which have high access frequency, are preferentially retained in the cache pool to avoid repeated destruction and reconstruction, thereby improving response speed; functional components with lower priority are preferentially eliminated when the cache pool is full.

[0033] TableChart and LineChart have many data binding fields and high historical interaction frequency, so the model automatically allocates them larger rendering area radius and higher loading priority, thereby achieving adaptive high-performance rendering of key interface blocks.

[0034] According to the scene complexity and AI output, the components automatically match the best rendering strategy (synchronous, asynchronous, or lazy), so that the entire business large screen can ensure stable and efficient main content, while also considering functional flexibility and system resource utilization.

[0035] The above description is only a preferred specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can make equivalent replacements or changes to the technical solutions and inventive concepts of the present application within the technical scope disclosed by the present application, and all of these should be covered within the protection scope of the present application.

Claims

1. A method for VUE dynamic component interface configuration and rendering for multi-scenario reuse, characterized in that, The method comprises the following steps: Receiving a multi-scene configuration file, using a feature extraction and coding algorithm to analyze and generate a scene feature vector; Building a two-stage generative adversarial network, inputting the scene feature vector, and outputting component layout parameters, resource priority and rendering strategy through the generator to form the generated parameters, and the discriminator evaluates the effectiveness of the generated parameters, and iteratively optimizes until the generated parameters meet the preset standard to obtain application parameters; Based on the application parameters, using the asynchronous component loading method of the VUE framework, creating a component loading queue through a dynamic import API, and implementing topological sorting on dependent components, the loading queue uses a priority queue; Introducing an adaptive Gaussian algorithm to calculate the radius of the component rendering area, dynamically dividing the rendering area according to the scene complexity coefficient and the rendering error threshold, and using a bounding box optimization mechanism to eliminate invalid rendering calculations; Using an optimized Diff algorithm to reduce the number of DOM operations by calculating the longest increasing subsequence of the new and old virtual DOM tree node sequences; Building a component cache pool based on an elimination strategy, setting the upper limit of the component cache to a limited number, and when the cache is full, the least frequently used components are preferentially eliminated.

2. The VUE dynamic component interface configuration and rendering method for multi-scenario multiplexing according to claim 1, characterized in that, The multi-scene configuration file supports JSON format, including: Scene identification information: the unique identification, name, and grouping label of each business scene; Component type: a list of components involved in each scene, including basic components and composite components; Attribute parameters: configuration attributes of each component, including initial value, state, style parameter, interaction event, and data source reference; Structure level: the nesting, parent-child, parallel, partition, column, and grid layout relationship between components; Dependency relationship: the dependency and data flow relationship between components, including event linkage, data binding, and loading sequence constraints; Historical configuration data: past configuration and usage records of scenes or components, including user preferences, historical layout schemes, and interaction logs; Encoded in the following way: the scene identification field is encoded into binary code using hash encoding; the component type is numbered according to a predefined dictionary and the frequency is counted; the attribute parameters are processed using numerical normalization and one-hot encoding, and then spliced according to the mean value; the structure level is obtained by tree traversal to get depth and width numerical features; the dependency relationship is encoded in the form of an adjacency matrix and expanded into a one-dimensional vector; the historical configuration parameters are normalized and directly spliced; all features are spliced into a fixed-length vector in a fixed order, and then normalized as a whole, finally forming the scene feature vector.

3. The method of claim 1, wherein, The two-stage generative adversarial network includes a generator and a discriminator: The generator uses an improved U-Net structure, inputs the scene feature vector, and outputs preliminary layout parameters in the first stage: Each layer uses a nonlinear activation function RELU for processing; The output of each layer is transmitted to the next layer and also used as feature skip connection input to the corresponding decoder layer; The decoder part also consists of multiple layers of fully connected networks, which receive the spliced vector of the same layer output and the decoding result of the upper layer, and finally output the preliminary layout parameters; The preliminary layout parameters are a set of component parameters, each component contains position coordinates, size and parent sequence number, and each parameter is normalized to the interval of zero to one. If the actual number of components is less than the agreed maximum number of components, the insufficient part is filled with a zero vector; The second stage generates resource priority and rendering strategy parameters based on the preliminary results; The preliminary layout parameters output by the first stage are flattened into a one-dimensional vector and spliced with the scene feature vector as the input of the second stage generator; The input vector is processed by a multi-layer fully connected network, each layer is provided with a nonlinear activation function, and finally outputs the resource priority parameters and rendering strategy parameters corresponding to each component; The resource priority parameters are limited to zero to one through probabilistic methods; The rendering strategy parameters are obtained by taking the maximum value of the normalized probability distribution to obtain discrete strategy labels; The discriminator uses the Euclidean distance as the discrimination function to compare the generated parameters with the historical real parameters in blocks, and outputs the effectiveness discrimination probability; During the training process, the Euclidean distance between the generated parameters and the historical real parameters is used as the loss function, and the gradient optimization method is used to iteratively update the generator network weights until the Euclidean distance of the generated parameters is less than the preset distance threshold.

4. The VUE dynamic component interface configuration and rendering method for multi-scenario multiplexing according to claim 1, characterized in that, The construction and scheduling of the component loading queue include the following steps: Parse the component layout parameters, resource priority and rendering strategy in the application parameters, and sequentially obtain the unique identifier, resource size, historical usage frequency and correlation degree parameters of all components to be loaded; Based on the dependency relationship of each component, a dependency directed graph of all components is generated, and a topological sorting algorithm is used to sort the dependency graph to obtain a component loading order that meets the dependency constraints; For each component, the loading priority of the component is calculated by weighted summation, specifically: Set the resource size weight, usage frequency weight and scene correlation degree weight as three sets of weight coefficients, and the sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative; Multiply the resource size by the resource size weight, multiply the historical usage frequency by the usage frequency weight, and multiply the scene correlation degree by the scene correlation degree weight, and add the three items to obtain the loading priority score of the component; Sort the components according to the loading priority score, and the higher the priority score, the higher the priority of the component in the loading queue; Adjust the priority queue according to the dependency order obtained by topological sorting to generate a component loading queue that meets the dependency relationship and priority requirements.

5. The VUE dynamic component interface configuration and rendering method for multi-scenario multiplexing according to claim 1, characterized in that, The component loading queue supports dynamic refreshing and exception handling, including the following steps: During the running process, the loading state and dependency state of the components in the component loading queue are detected in real time, and when it is detected that the dependent components of a component fail to load or timeout, the component is removed from the current queue or its loading priority is temporarily reduced; When the external business demand or scene configuration changes, the members and order of the component loading queue are dynamically updated according to the latest application parameters, dependency relationships and priority scores; For component instances that have been loaded and have not been activated or used for more than a set time, they are actively removed from the cache pool according to the preset rules, and the queue is adjusted again to release resources; During the component loading process, if a loop dependency, repeated dependency or component instance exception is found in the queue, an exception log is output, and the system is restored to the last valid queue state through a rollback mechanism.

6. The VUE dynamic component interface configuration and rendering method for multi-scenario multiplexing according to claim 1, characterized in that, The adaptive Gaussian algorithm includes the following steps: For each component, obtain the complexity coefficient in the current scene, which is calculated based on the number of components in the scene, the component nesting level, and the data binding density parameter, and is normalized to a standardized value between zero and one. The component nesting level is calculated by traversing the component tree structure described in the configuration file, recursively counting the path length from the root node to each component's position, and taking the maximum path length as the nesting level. The data binding density is calculated by counting the total number of fields of all binding data sources, dividing by the total number of components, and obtaining the average number of data binding fields. The density value is normalized with the preset maximum density as a standardized parameter. Obtain the current preset rendering error threshold, which is set according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value. For each component, use a Gaussian function to dynamically calculate the rendering area radius based on the complexity coefficient and the rendering error threshold. Specifically: Multiply the complexity coefficient by the standard deviation parameter of the Gaussian distribution factor, and combine the rendering error threshold to calculate the rendering radius using the Gaussian function. The rendering radius is used to define the actual rendering impact range of the component. During rendering task scheduling, use the axis-aligned bounding box algorithm to divide the space for each component's actual rendering area, and perform overlap detection on the bounding boxes of all components to be rendered. For regions that are determined to be invalid overlaps or completely obscured by other components, eliminate related rendering calculation tasks in advance to reduce invalid rendering operations.

7. The VUE dynamic component interface configuration and rendering method for multi-scenario multiplexing of claim 1, wherein, The optimized Diff algorithm includes the following steps: Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two groups of nodes in their respective sequences. Divide the virtual DOM node sequence into multiple business partitions according to the scene feature vector, and each partition corresponds to a different grouping tag. Map the new and old virtual DOM node sequences according to the node unique identifier, and convert the node index in the new sequence to the corresponding index arrangement in the old sequence. For each partition's index arrangement, use binary search to calculate the longest increasing subsequence and obtain the node subsequence index set that does not need to be moved. For nodes not included in the longest increasing subsequence, perform node movement or insertion, deletion minimization DOM operations.

8. The VUE dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 1, characterized in that, The construction and management of the component cache pool includes the following steps: Set the upper limit of the capacity of the component cache pool, which is the preset limited number of component instances. In the running process, monitor the usage frequency of each component instance in the cache pool in real time. When the number of component instances in the cache pool reaches the capacity upper limit and a new component instance needs to be added, sort the component instances according to their usage frequency. Eliminate the component instance with the lowest usage frequency from the cache pool and release the corresponding resources. Add the new component instance to the cache pool.

Images