Front-end cascading customization and style preservation method, apparatus, device, and medium

Abstract

The present disclosure provides a front-end cascade customization and style maintenance method, comprising: constructing a front-end cascade structure, generating a unique hierarchical identifier to bind each node in the front-end cascade structure; in response to a user clicking a DOM node of the front-end cascade structure, filtering a set of subordinate nodes of the DOM node based on the unique hierarchical identifier of the DOM node, and generating a cascade customization list of the set of subordinate nodes; in response to a cascade customization operation of the user, flattening the set of subordinate nodes in the cascade customization list, and compressing the hierarchy between the subordinate nodes in the cascade customization list; rendering the cascade customization list based on the unique hierarchical identifier of the subordinate nodes, and distinguishing the hierarchy of the subordinate nodes through styles. The method realizes one-key cascade relationship adjustment through the unique hierarchical identifier, which not only ensures dynamic acquisition of node cascade data, but also takes into account the richness of interactive operations and the beauty of rendering effects. The present disclosure also provides a front-end cascade customization and style maintenance device, equipment and medium.

Description

Technical Field

[0001] This disclosure relates to the field of computer application engineering technology, and in particular to a front-end cascade customization and style maintenance method, apparatus, electronic device and medium. Background Technology

[0002] Tree-like data structures were initially implemented using recursive functions. While logically simple, this approach suffers from performance issues due to the simultaneous rendering of recursive functions and numerous DOM nodes. Later, developers began using nested lists to implement cascading tree data structures. This approach is more intuitive than traditional recursive functions, but it requires expanding all data, potentially causing slow page loading. With the continuous development of front-end development, tree-like data components based on Virtual DOM emerged. Virtual DOM helps developers render large amounts of data more efficiently and offers excellent performance and maintainability. With the development of component-based frameworks like React and Vue, developers began using component-based approaches to implement tree-like data components. The tree structure is encapsulated as a component, and the entire tree data is constructed through recursive calls. This approach offers better maintainability and scalability, and allows for easy implementation of custom node styles and interactive events.

[0003] However, currently popular tree controls only perform various operations on the tree structure. No mainstream tree control can achieve flattening without altering the original data structure, and it cannot flexibly arrange and display elements by setting specific styles. In scenarios involving complex organizational structures or complex business logic, users must repeatedly click and navigate through levels to find the same information, severely impacting efficiency and user experience. While Canvas generates topological images and offers some interactive capabilities, it cannot capture dynamic cascading data of nodes. HTML cascading controls, although capable of capturing dynamic cascading data, are difficult to use for adding interactive elements and have less aesthetically pleasing rendering. In modern networked information systems with a "separation of powers" between development, operations, and maintenance roles, overly homogenized system pages contain redundant functions that are irrelevant, unrelated, or even unauthorized by business roles, hindering efficient system operation and posing security risks. In dynamic scenarios with high staff turnover, when staff move to different workstations, system desktop styles, business preferences, and other attributes are typically initialized. This results in high learning and adaptation costs for cross-workstation use, impacting work efficiency during cross-workstation roaming and failing to provide a consistent user experience. There is an urgent need to record user business preferences (cascading relationship display methods, desktop themes, etc.) through front-end methods, bind them to user identities, and achieve automated front-end style push in cross-workstation scenarios. This ensures seamless user experience across workstations and guarantees consistent user experience. Summary of the Invention

[0004] In view of the above problems, the present invention provides a front-end cascade customization and style preservation method, apparatus, electronic device and medium to solve the above technical problems.

[0005] The first aspect of this disclosure provides a front-end cascading customization and style preservation method, comprising: constructing a front-end cascading structure and generating a unique hierarchical identifier to bind each node in the front-end cascading structure; responding to a user's click on a DOM node in the front-end cascading structure, filtering a set of subordinate nodes of the DOM node in the front-end cascading structure based on the unique hierarchical identifier of the DOM node, and generating a cascading customization list of the subordinate node set; responding to a user's cascading customization operation, flattening the set of subordinate nodes in the cascading customization list and compressing the hierarchy between subordinate nodes in the cascading customization list; and rendering the cascading customization list by matching styles based on the unique hierarchical identifier of the subordinate node, thereby distinguishing the hierarchy of the subordinate nodes through styles.

[0006] According to embodiments of this disclosure, the step of responding to a user's cascading customization operation by flattening the set of subordinate nodes in the cascading customization list and compressing the hierarchy between subordinate nodes in the cascading customization list includes: responding to a user's cascading customization operation by changing all descendant nodes of the grandchildren of the DOM node to grandchildren nodes and flattening them in the cascading customization list, thus compressing the hierarchy of the cascading customization list to a maximum of 3 levels; or responding to a user's cascading customization operation by changing all grandchildren and descendant nodes of the DOM node to child nodes and flattening them in the cascading customization list, thus compressing the hierarchy of the cascading customization list to a maximum of 2 levels; or responding to a user's cascading customization operation by changing all descendant nodes of the DOM node to sibling nodes and flattening them in the cascading customization list, thus compressing the hierarchy of the cascading customization list to 1 level.

[0007] According to an embodiment of this disclosure, the method includes: responding to a user's cascading customization operation, flattening a customization list array representing the set of subordinate nodes in the cascading customization list; obtaining a cascading array representing the front-end cascading structure, finding the corresponding position in the cascading array based on the unique hierarchical identifier of the DOM node clicked by the user, and replacing the data after the position of the DOM node in the cascading array with the customization list array; and reconstructing the front-end cascading structure based on the cascading array after the data replacement, so that the subordinate nodes in the cascading customization list are displayed in a flattened manner.

[0008] According to an embodiment of this disclosure, the method further includes: updating the cascading array representing the front-end cascading structure in response to a user changing the position of one of the nodes of the front-end cascading structure by dragging; binding the cascading array to a user identity identifier; wherein, when a user opens the front-end cascading structure based on the user identity identifier, the front-end cascading structure is generated based on the cascading array.

[0009] According to embodiments of this disclosure, the method further includes: constructing a user-defined theme style library, wherein the theme style library defines a variety of theme styles according to user roles, the theme styles include styles defined by nodes at each level of the front-end cascading structure, and the styles defined by nodes at each level are bound to a unique hierarchical identifier.

[0010] According to embodiments of this disclosure, the method further includes: setting user role information, binding the user role information, user unique identity information, theme style, and the cascading array of the front-end cascading structure; when a user logs into the front-end cascading structure, obtaining the cascading array and theme style corresponding to the user role information based on the user's user unique identity information, and generating a front-end cascading structure and theme style that conforms to the user's preferences.

[0011] According to an embodiment of this disclosure, the method further includes: when a user's unique identity information is bound to multiple theme styles, setting a theme style time listener, and periodically switching the theme style of the front-end cascading structure.

[0012] A second aspect of this disclosure provides a front-end cascading customization and style preservation device, comprising: an identifier binding module for constructing a front-end cascading structure and generating a unique hierarchical identifier to bind each node in the front-end cascading structure; a list generation module for responding to a user's click on a DOM node in the front-end cascading structure, filtering a set of subordinate nodes of the DOM node in the front-end cascading structure based on the unique hierarchical identifier of the DOM node, and generating a cascading customization list of the subordinate node set; a cascading customization module for responding to a user's cascading customization operation, flattening the set of subordinate nodes in the cascading customization list, and compressing the hierarchy between subordinate nodes in the cascading customization list; and a list rendering module for rendering the cascading customization list by matching styles based on the unique hierarchical identifier of the subordinate node, and distinguishing the hierarchy of the subordinate nodes by styles.

[0013] A third aspect of this disclosure provides an electronic device, including: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, it implements the steps of the front-end cascaded customization and style retention method according to any one of the first aspects.

[0014] The fourth aspect of this disclosure provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the front-end cascading customization and style preservation methods of the first aspect.

[0015] The above-described at least one technical solution adopted in the embodiments of this disclosure can achieve the following beneficial effects:

[0016] This disclosure provides a method to achieve flattening without altering the backend data; it enables one-click adjustment of cascading relationships through a unique hierarchical identifier filtering mechanism; after customizing the hierarchical relationship, it also supports differentiating and displaying different cascading subordinate relationships through styles; at the same time, this method combines the advantages of Canvas and HTML, ensuring both dynamic acquisition of node cascading data and rich interactive operations and aesthetically pleasing rendering effects. Attached Figure Description

[0017] To gain a more complete understanding of this disclosure and its advantages, reference will now be made to the following description taken in conjunction with the accompanying drawings, wherein:

[0018] Figure 1 The illustration shows a schematic diagram of a front-end cascading customization and style preservation method provided in an embodiment of this disclosure;

[0019] Figure 2 This illustration schematically shows a front-end style preservation method for seat flow scenarios provided by an embodiment of the present disclosure;

[0020] Figure 3 This schematic diagram illustrates a structural block diagram of a front-end cascaded customization and style retention device provided in an embodiment of the present disclosure;

[0021] Figure 4 The schematic diagram illustrates a structural block diagram of an electronic device provided in an embodiment of the present disclosure. Detailed Implementation

[0022] The embodiments of the present disclosure will now be described with reference to the accompanying drawings. However, it should be understood that these descriptions are exemplary only and are not intended to limit the scope of the disclosure. In the following detailed description, numerous specific details are set forth to provide a thorough understanding of the embodiments of the present disclosure for ease of explanation. However, it will be apparent that one or more embodiments may be practiced without these specific details. Furthermore, descriptions of well-known structures and techniques are omitted in the following description to avoid unnecessarily obscuring the concepts of the present disclosure.

[0023] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit this disclosure. The terms “comprising,” “including,” etc., as used herein indicate the presence of the stated features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0024] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein are to be interpreted in a manner consistent with the context of this specification, and not in an idealized or overly rigid way.

[0025] The accompanying drawings show some block diagrams and / or flowcharts. It should be understood that some blocks or combinations thereof in the block diagrams and / or flowcharts can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that when executed by the processor, these instructions can create means for implementing the functions / operations described in these block diagrams and / or flowcharts.

[0026] Therefore, the technology disclosed herein can be implemented in hardware and / or software (including firmware, microcode, etc.). Additionally, the technology disclosed herein can take the form of a computer program product stored on a computer-readable medium, which can be used by or in conjunction with an instruction execution system. In the context of this disclosure, a computer-readable medium can be any medium capable of containing, storing, transmitting, propagating, or transmitting instructions. For example, a computer-readable medium can include, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, apparatuses, or propagation media. Specific examples of computer-readable media include: magnetic storage devices, such as magnetic tape or hard disk drives (HDDs); optical storage devices, such as optical discs (CD-ROMs); memory, such as random access memory (RAM) or flash memory; and / or wired / wireless communication links.

[0027] Figure 1 The illustration shows a schematic diagram of a front-end cascading customization and style preservation method provided in an embodiment of this disclosure.

[0028] like Figure 1 As shown in the embodiments of this disclosure, a front-end cascading customization and style preservation method is provided, including S110 to S140.

[0029] S110, construct the front-end cascade structure, and generate a unique hierarchical identifier to bind each node in the front-end cascade structure.

[0030] In this embodiment, the front-end retrieves the cascaded JSON data from the back-end and constructs the front-end cascaded structure. The front-end cascaded structure is stored in a JSON array, and each node in the JSON array is recursively read using a Map method to generate a unique level identifier for each node. This unique level identifier uniquely determines the location and level information of the current node.

[0031] The data structure style of the cascading identifier is as follows:

[0032]

[0033]

[0034] S120 responds to user clicks on DOM nodes in the front-end cascading structure, filters the set of subordinate nodes of DOM nodes in the front-end cascading structure based on the unique hierarchical identifier of the DOM nodes, and generates a cascading custom list of subordinate node sets.

[0035] In this embodiment, the user hovers the mouse over the cascading position of the target and right-clicks to obtain the cascading relationship data (including a unique hierarchy identifier) ​​of the current DOM node. Based on the obtained data, the front-end array Filter method (note: filters out some elements in the array and returns the remaining unfiltered elements; the length may decrease, but the array value remains unchanged) recursively loops to find the subordinate hierarchy information (descendant nodes) and cascading position information of the current node, generating a customized operation list for the current node. The customized operation list can be a list box displayed on the front-end cascading structure, showing all subordinate nodes of the current node.

[0036] S130 responds to the user's cascading customization operation by flattening the set of subordinate nodes in the cascading customization list and compressing the hierarchy between subordinate nodes in the cascading customization list.

[0037] In this embodiment, in response to a user's click, several predefined cascading customization operations can be displayed to change the display method of subordinate nodes in the cascading customization list. The user selects the desired cascading customization operation from the list to flatten the data filtered by the filter.

[0038] Alternatively, cascading customization operations can be divided into three cases:

[0039] First, all descendant nodes of the grandchildren of the DOM nodes are made into grandchildren nodes, and displayed in a flattened manner in the cascading custom list, compressing the hierarchy of the cascading custom list to a maximum of 3 levels.

[0040] Secondly, all grandchild nodes and descendant nodes of DOM nodes are turned into child nodes and displayed flat in the cascading custom list, compressing the hierarchy of the cascading custom list to a maximum of 2 levels.

[0041] Third, all descendant nodes of the DOM node are made into sibling nodes and displayed in a flattened manner in the cascading custom list, compressing the hierarchy of the cascading custom list to 1 level.

[0042] The order of descendant nodes after promotion to grandchild nodes, grandchild nodes to child nodes, and descendant nodes to sibling nodes follows certain rules. The rules are as follows: the current node's position remains unchanged, and descendant nodes are arranged sequentially to the right of the current node from left to right. Simultaneously, the current node and merged descendant nodes are annotated with special styles. This ensures that after promotion, users can still distinguish the hierarchical relationship without altering the original database structure.

[0043] The front-end responds to the user's cascading customization operation by flattening the customization list array, which represents the set of subordinate nodes in the cascading customization list; it obtains the cascading array representing the front-end cascading structure, finds the corresponding position in the cascading array based on the unique hierarchical identifier of the DOM node clicked by the user, and replaces the data after the position of the DOM node in the cascading array with the customization list array; it then reconstructs the front-end cascading structure based on the cascading array with the replaced data, so that the subordinate nodes in the cascading customization list are displayed in a flattened manner.

[0044] This step allows for personalized customization of the cascading structure using front-end visualization methods without altering the actual cascading hierarchy in the backend. By leveraging front-end visualization, frequently used or interesting information can be moved to higher-level positions, making it easier for users to locate their desired information more quickly. For example, front-end technology can be used to prominently display frequently used, interesting, and important elements in menus or navigation bars, thus flattening the traditional, fixed cascading display method.

[0045] S140: Render a cascading custom list by matching styles based on the unique hierarchical identifier of the subordinate node, and distinguish the hierarchy of the subordinate node by style.

[0046] In this embodiment, the arrangement of descendant nodes after promotion to grandchild nodes, grandchild nodes after promotion to child nodes, and descendant nodes after promotion to sibling nodes follows certain rules. The rules are as follows: the current node's position remains unchanged, and descendant nodes are arranged sequentially to the right of the current node from left to right; at the same time, the current node and the merged descendant nodes are marked with a special style. This ensures that after the hierarchy is promoted, users can still distinguish the hierarchical relationship without changing the original data structure of the database.

[0047] Furthermore, the method may also include S150.

[0048] S150 responds to the user changing the position of one of the nodes in the front-end cascade structure by dragging and dropping, and updates the cascade array representing the front-end cascade structure.

[0049] In this embodiment, drag-and-drop functionality can be implemented using native JavaScript technology. The JavaScript drag-and-drop functionality relies primarily on three events: `onousedown` (mouse down), `onmousemove` (mouse move), and `onmouseup` (mouse up). When the mouse is pressed (`onousedown`), the current x and y coordinates of the mouse are obtained (`eventclientX` and `event.clientY`). During mouse movement (`onmousemove`), the offsets representing the x and y coordinates of the node (`offsetX` and `offsetY`) are obtained. When the mouse is released (`onmouseup`), the final absolute position of the node (`left` and `top` values) is calculated. Node hierarchy is determined and drawn: based on the absolute positions (`left` and `top` values) of the current node and its surrounding nodes, the `Filter` method is used to filter and select the node with the smallest absolute position difference, which is considered its parent node. Nodes are drawn using HTML methods, and connecting arrows are drawn using Canvas rendering (the angle and length of the connecting arrows are dynamically adjusted).

[0050] After adjusting the cascading relationships, the dragged tree structure is retrieved uniformly, generating a new JSON array. This array represents the user's front-end style preferences, is bound to the user's identity identifier, and stored in the "Front-end Preference Database." The cascading array is then bound to the user's identity identifier; specifically, when a user opens the front-end cascading structure based on their user identity identifier, the front-end cascading structure is generated based on the cascading array.

[0051] This step can be applied when maintaining a cascading visualization relationship is not required. Important or interesting information can be dragged to other parent nodes, thus solving the problem of information hierarchy redundancy. Without changing the actual cascading relationship in the backend, the node cascading relationship can be customized and displayed on the frontend in a format similar to a bookmarks list. This method uses a combination of HTML, CSS, and Canvas for dynamic and personalized rendering, forming a hierarchical tree structure that ensures both the backend cascading structure remains unchanged and the page rendering is visually appealing and interactive.

[0052] In this embodiment, users can build a user-defined theme style library on the front end. The theme style library defines various theme styles based on user roles. These styles include those defined at each level of the front-end cascading structure, and each level's style is bound to a unique hierarchical identifier. For example, the theme style library categorizes system pages into three themes: development, operations, and maintenance. Each theme has several pre-defined subcategories. From a storage perspective, a data structure of "array-category (subcategory)-style information" is constructed, representing personalized style information through key-value pairs. Style information includes, but is not limited to, font size, font color, background color, background image, line height, element arrangement, and element triggering methods. Users can customize themes according to their preferences and configure style attributes through a visual theme configuration page. Attributes include theme name, font size, font color, and background image. Background images can be provided on the theme page or uploaded via front-end events. By customizing themes for different user roles, the information system adaptively matches themes based on user roles; each role's theme also supports personalized configuration of style attributes.

[0053] Optionally, users can select one theme or pre-select multiple themes. When a user's unique identity information is bound to multiple theme styles, setting a theme style time listener and periodically switching the theme style of the front-end cascading structure can achieve the effect of automatic real-time theme changes.

[0054] The method provided in this disclosure also includes S160.

[0055] S160, Set user role information, bind user role information, user unique identity information, theme style and front-end cascading structure cascading array.

[0056] When a user logs into the front-end cascading structure, the system retrieves the cascading array and theme style corresponding to the user's role information based on the user's unique identity information, generating a front-end cascading structure and theme style that matches the user's preferences. Binding cascading customization preferences and theme style preferences to the unique user identity identifier enables automatic maintenance of the front-end style across different user accounts.

[0057] Figure 2 The illustration shows a schematic diagram of a front-end style preservation method for seat flow scenarios provided by an embodiment of the present disclosure.

[0058] like Figure 2As shown, the user's personalized configuration information, such as cascading structures and theme preferences, is transmitted to the server in JSON data form via a network request and stored in the "Front-end Preference Database." The "Front-end Preference Database" binds the user's unique identifier to the personalized configuration information. When a user roams to a new location, the system matches the current user's unique identifier to find their cascading structure and theme preferences, and returns this information to the front-end via a network request. The front-end then performs customized rendering based on the returned data, ensuring that users receive their previously customized styles regardless of where or what device they log in from, without affecting other users.

[0059] According to the embodiments of this disclosure, a front-end cascading customization and style maintenance method is provided. It enables flexible customization of the cascading relationship of complex business elements through front-end technology, and can support users to adaptively adjust the theme style based on changes in business roles. When users roam across domains, the consistency of the front-end style can be maintained, ensuring that users can use it without difference across seats.

[0060] Another embodiment of this disclosure provides a front-end cascaded customization and style retention device for achieving, for example... Figures 1-2 The method for front-end cascading customization and style maintenance is shown.

[0061] Figure 3 The diagram illustrates a structural block diagram of a front-end cascaded customization and style retention device provided in an embodiment of this disclosure.

[0062] like Figure 3 As shown, the front-end cascading customization and style retention device 300 includes an identifier binding module 310, a list generation module 320, a cascading customization module 330, and a list rendering module 340.

[0063] The identifier binding module 310 is used to construct the front-end cascade structure and generate a unique hierarchical identifier to bind each node in the front-end cascade structure.

[0064] The list generation module 320 is used to respond to user clicks on DOM nodes in the front-end cascading structure. Based on the unique hierarchical identifier of the DOM node, it filters the set of subordinate nodes of the DOM node in the front-end cascading structure and generates a cascading custom list of subordinate node sets.

[0065] The cascading customization module 330 is used to respond to the user's cascading customization operation, flatten the set of subordinate nodes in the cascading customization list, and compress the hierarchy between subordinate nodes in the cascading customization list.

[0066] The list rendering module 340 is used to render cascading custom lists based on the unique hierarchical identifier of the subordinate nodes and to distinguish the hierarchy of the subordinate nodes by style.

[0067] It is understood that the identifier binding module 310, list generation module 320, cascade customization module 330, and list rendering module 340 can be implemented in a single module, or any one of these modules can be split into multiple modules. Alternatively, at least some of the functionality of one or more of these modules can be combined with at least some of the functionality of other modules and implemented in a single module. According to embodiments of the present invention, at least one of the identifier binding module 310, list generation module 320, cascade customization module 330, and list rendering module 340 can be at least partially implemented as hardware circuitry, such as a field-programmable gate array (FPGA), a programmable logic array (PLA), a system-on-a-chip, a system-on-a-substrate, a system-on-package, an application-specific integrated circuit (ASIC), or can be implemented in hardware or firmware in any other reasonable manner of integrating or packaging the circuitry, or in a suitable combination of software, hardware, and firmware implementations. Alternatively, at least one of the identifier binding module 310, list generation module 320, cascading customization module 330, and list rendering module 340 may be implemented at least partially as a computer program module, which can perform the functions of the corresponding module when the program is run by a computer.

[0068] Figure 4 The schematic diagram illustrates a structural block diagram of an electronic device provided in an embodiment of the present disclosure.

[0069] like Figure 4 As shown, the electronic device described in this embodiment includes: electronic device 400 including processor 410 and computer-readable storage medium 420. This electronic device 400 can perform the functions described above (see reference 410). Figure 1 The described method enables the detection of specific operations.

[0070] Specifically, processor 410 may include, for example, a general-purpose microprocessor, an instruction set processor and / or an associated chipset and / or a special-purpose microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. Processor 410 may also include onboard memory for caching purposes. Processor 410 may be used for executing reference... Figure 1 The method flow described according to embodiments of this disclosure refers to a single processing unit or multiple processing units performing different actions.

[0071] Computer-readable storage medium 420 may be any medium capable of containing, storing, transmitting, propagating, or transmitting instructions. For example, readable storage media may include, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, apparatuses, or propagation media. Specific examples of readable storage media include: magnetic storage devices such as magnetic tape or hard disk drives (HDDs); optical storage devices such as optical discs (CD-ROMs); memories such as random access memory (RAM) or flash memory; and / or wired / wireless communication links.

[0072] Computer-readable storage medium 420 may include computer program 421, which may include code / computer-executable instructions that, when executed by processor 410, cause processor 410 to perform, for example, the above-described combination. Figure 1 The described method and any variations thereof.

[0073] Computer program 421 can be configured to have computer program code, for example, including computer program modules. For example, in an exemplary embodiment, the code in computer program 421 may include one or more program modules, such as 421A, module 421B, ... It should be noted that the division and number of modules are not fixed. Those skilled in the art can use appropriate program modules or combinations of program modules according to the actual situation. When these combinations of program modules are executed by processor 410, processor 410 can perform, for example, the above-described combinations... Figures 1-2 The described method and any variations thereof.

[0074] According to an embodiment of the present invention, at least one of the identifier binding module 310, list generation module 320, cascading customization module 330, and list rendering module 340 can be implemented as a reference. Figure 4 The computer program module described herein, when executed by processor 410, can perform the corresponding operations described above.

[0075] This disclosure also provides a computer-readable medium, which may be included in the device / apparatus / system described in the above embodiments; or it may exist independently and not assembled into the device / apparatus / system. The computer-readable medium carries one or more programs that, when executed, implement the method according to the embodiments of this disclosure.

[0076] Those skilled in the art will understand that the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways, even if such combinations or combinations are not explicitly described in this disclosure. In particular, the features described in the various embodiments and / or claims of this disclosure can be combined or combined in various ways without departing from the spirit and teachings of this disclosure. All such combinations and / or combinations fall within the scope of this disclosure.

[0077] Although this disclosure has been shown and described with reference to specific exemplary embodiments thereof, those skilled in the art will understand that various changes in form and detail may be made to this disclosure without departing from the spirit and scope of the disclosure as defined by the appended claims and their equivalents. Therefore, the scope of this disclosure should not be limited to the above embodiments, but should be defined not only by the appended claims, but also by their equivalents.

Claims

1. A method for front-end cascading customization and style preservation, characterized in that, include: Construct a front-end cascade structure and generate a unique hierarchical identifier to bind each node in the front-end cascade structure; In response to a user's click on a DOM node in the front-end cascading structure, the system filters the set of subordinate nodes of the DOM node in the front-end cascading structure based on the unique hierarchical identifier of the DOM node, and generates a cascading custom list of the subordinate node set. In response to the user's cascading customization operation, the set of subordinate nodes in the cascading customization list is flattened, and the hierarchy between subordinate nodes in the cascading customization list is compressed. The cascading custom list is rendered by matching the style based on the unique hierarchical identifier of the subordinate node, and the hierarchy of the subordinate node is distinguished by the style; The process of responding to a user's cascading customization operation, flattening the set of subordinate nodes in the cascading customization list, and compressing the hierarchy between subordinate nodes in the cascading customization list includes: In response to the user's cascading customization operation, all descendant nodes of the grandchildren of the DOM node are made into grandchildren, and displayed flat in the cascading customization list, with the hierarchy of the cascading customization list compressed to a maximum of 3 levels; or In response to the user's cascading customization operation, all grandchild nodes and descendant nodes of the DOM node are converted into child nodes and displayed flat in the cascading customization list, with the hierarchy of the cascading customization list compressed to a maximum of two levels; or In response to the user's cascading customization operation, all descendant nodes of the DOM node are turned into sibling nodes and displayed in the cascading customization list in a flat manner, and the hierarchy of the cascading customization list is compressed to 1 level.

2. The method according to claim 1, characterized in that, The method includes: In response to the user's cascading customization operation, the customization list array representing the set of subordinate nodes in the cascading customization list is flattened; Obtain the cascading array representing the front-end cascading structure, find the corresponding position in the cascading array based on the unique hierarchical identifier of the DOM node clicked by the user, and replace the data after the position of the DOM node in the cascading array with the custom list array; The front-end cascade structure is reconstructed based on the cascade array after data replacement, so that the subordinate nodes in the cascade custom list are displayed in a flattened manner.

3. The method according to claim 1, characterized in that, The method further includes: In response to a user changing the position of one of the nodes in the front-end cascade structure by dragging, update the cascade array representing the front-end cascade structure; Bind the cascaded array to the user identity identifier; Specifically, when a user opens the front-end cascade structure based on the user identity identifier, the front-end cascade structure is generated based on the cascade array.

4. The method according to claim 1, characterized in that, The method further includes: A user-defined theme style library is constructed. The theme style library defines a variety of theme styles according to user roles. The theme styles include the styles defined by each level of the front-end cascading structure, and the styles defined by each level of the node are bound to a unique level identifier.

5. The method according to claim 4, characterized in that, The method further includes: Set user role information, and bind the user role information, user unique identity information, theme style and the cascaded array of the front-end cascaded structure; When a user logs into the front-end cascading structure, the cascading array and theme style corresponding to the user's role information are obtained based on the user's unique identity information, and a front-end cascading structure and theme style that conform to the user's preferences are generated.

6. The method according to claim 5, characterized in that, The method further includes: When a user's unique identity information is bound to multiple theme styles, a theme style time listener is set to periodically switch the theme styles of the front-end cascading structure.

7. A front-end cascaded customization and style retention device, characterized in that, include: The identifier binding module is used to construct the front-end cascade structure and generate a unique hierarchical identifier to bind each node in the front-end cascade structure; The list generation module is used to respond to user clicks on DOM nodes in the front-end cascading structure, filter the set of subordinate nodes of the DOM nodes in the front-end cascading structure based on the unique hierarchical identifier of the DOM nodes, and generate a cascading customized list of the subordinate node sets. The cascading customization module is used to respond to the user's cascading customization operation, flatten the set of subordinate nodes in the cascading customization list, and compress the hierarchy between subordinate nodes in the cascading customization list; The list rendering module is used to render the cascading customized list based on the unique hierarchical identifier of the subordinate node and to distinguish the hierarchy of the subordinate node by the style. The process of responding to a user's cascading customization operation, flattening the set of subordinate nodes in the cascading customization list, and compressing the hierarchy between subordinate nodes in the cascading customization list includes: In response to the user's cascading customization operation, all descendant nodes of the grandchildren of the DOM node are made into grandchildren, and displayed flat in the cascading customization list, with the hierarchy of the cascading customization list compressed to a maximum of 3 levels; or In response to the user's cascading customization operation, all grandchild nodes and descendant nodes of the DOM node are converted into child nodes and displayed flat in the cascading customization list, with the hierarchy of the cascading customization list compressed to a maximum of two levels; or In response to the user's cascading customization operation, all descendant nodes of the DOM node are turned into sibling nodes and displayed in the cascading customization list in a flat manner, and the hierarchy of the cascading customization list is compressed to 1 level.

8. An electronic device, comprising: A memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, when the processor executes the computer program, it implements each step of the front-end cascaded customization and style preservation method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements each step of the front-end cascade customization and style preservation method according to any one of claims 1 to 6.

Images