A multi-tab behavior management method, platform, electronic device and storage medium

Abstract

The application discloses a multi-tab behavior management method and platform, an electronic device and a storage medium, and belongs to the technical field of front-end interaction design. The method comprises the following steps: in response to a page jump request triggered by user interaction, generating jump state data, wherein the jump state data comprises a unique identifier of a target page; determining whether a tab page corresponding to the target page exists in a current tab page array based on the unique identifier in the jump state data; performing an update operation on the current tab page array according to the determination result, and controlling a page content display module to load and display the content of the target page. The scheme can avoid the creation of repeated tab pages of the same target page, thereby ensuring the consistency of the tab page state and the page content display.

Description

Technical Field

[0001] This application relates to the field of front-end interaction design technology, specifically to a multi-tab behavior management method, platform, electronic device, and storage medium. Background Technology

[0002] In the field of front-end page development, in order to improve user operation efficiency and multi-task parallel processing capabilities, the interaction mode that simulates the multi-tab behavior of browsers has been widely used in various platform applications.

[0003] In related technologies, most front-end multi-tab interaction solutions can achieve basic tab creation and page navigation functions. However, in complex real-world application scenarios, standardized processing mechanisms have not yet been established for the logical control of tab activation and switching. For example, in different scenarios such as users repeatedly opening the same tab or triggering page navigation, the content of the current tab is often overwritten when the same tab is repeatedly created or when a page navigation occurs, instead of automatically opening in a new tab. This prevents users from going back or operating multiple task pages in parallel, resulting in inconsistencies between the page state and page content display of multiple tabs on the front-end platform. Summary of the Invention

[0004] This invention provides a method, platform, electronic device, and storage medium for managing multi-tab behavior, aiming to solve the problem of inconsistency between the page state and page content display of multiple tabs in related front-end page interaction technologies.

[0005] Firstly, a multi-tab behavior management method is provided, applied to a platform corresponding to a front-end framework, which includes a page content display module; the multi-tab behavior management method includes the following steps: In response to a page navigation request triggered by user interaction, navigation status data is generated, which includes a unique identifier for the target page; Based on the unique identifier in the jump status data, determine whether there is a tab in the current tab array that corresponds to the target page; Based on the judgment result, perform an update operation on the current tab array, and control the page content display module to load and display the content of the target page.

[0006] In some embodiments, prior to a page redirection request triggered by user interaction, the process includes: Intercept redirect events sent by internal page components of the platform, or page redirect information sent by external pages of the platform through cross-document communication; Convert the redirection event or page redirection information into the redirection status data format corresponding to the page redirection request. The redirection status data format shall include at least the unique identifier of the target page.

[0007] In some embodiments, intercepting redirection events emitted by internal page components of the platform, or page redirection information emitted by external pages of the platform through cross-document communication, includes: Intercept redirection events emitted by internal page components of the platform through the event emitter; Intercept page redirection information sent by external pages of the platform through cross-document communication by using a cross-document communication monitoring mechanism.

[0008] In some embodiments, determining whether a tab corresponding to the target page exists in the current tab array based on a unique identifier in the jump state data includes: The unique identifier and business parameters in the jump status data are compared with the identification information of the existing tabs in the current tab array to determine the comparison result; Based on the comparison results, determine whether there is a tab in the current tab array that corresponds to the target page.

[0009] In some embodiments, based on the determination result, an update operation is performed on the current tab array, including: If the comparison result indicates that there is no target tab corresponding to the target page, perform the operation of adding a new target tab to the current tab array; If the comparison result shows that a target tab corresponding to the target page exists, the operation of activating the target tab is performed on the current tab array.

[0010] In some embodiments, if the comparison result indicates the existence of a target tab corresponding to the target page, an activation operation is performed on the current tab array, including: If the comparison result indicates that a target tab exists and the target tab is within the visible tab range, then the operation of activating the target tab is performed. If the comparison result indicates that a target tab exists and the target tab is within the range of invisible tabs, then the operation of adjusting the position of the target tab and activating the target tab is performed.

[0011] In some embodiments, controlling the page content display module to load and display the content of the target page includes: Determine the page type of the target page based on its unique identifier; When the page type is an internal page, a programmatic navigation method is used to load and display the content of the target page; When the page type is an external page, the content of the target page is loaded and displayed using an iframe nested container.

[0012] In some embodiments, the front-end framework further includes a tab template module, and the methods for requesting page jumps include, but are not limited to, triggering menu items in the tab template module and triggering interactive elements with page jump functionality in the platform.

[0013] In some embodiments, after loading and displaying the content of the target page, the method further includes: In response to operation commands on the tab navigation bar in the tab template module, execute the corresponding tab management operation; the operation command includes at least one of closing the current tab, closing other tabs, and switching tabs.

[0014] Secondly, a multi-tab behavior management platform is also provided, including a front-end framework. The front-end framework includes a page content display module, including: The jump request module is used to respond to page jump requests triggered by user interaction and generate jump status data, which includes a unique identifier for the target page. The tab query module is used to determine whether there is a tab in the current tab array that corresponds to the target page, based on the unique identifier in the jump status data. The loading and display module is used to perform update operations on the current tab array based on the judgment result, and to control the page content display module to load and display the content of the target page.

[0015] In some embodiments, the front-end framework in the platform also includes a tab template module, and the methods for requesting page jumps include, but are not limited to, triggering menu items in the tab template module and triggering interactive elements in the platform that have page jump functionality.

[0016] Thirdly, an electronic device is also provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, it implements the steps of any of the above methods.

[0017] Fourthly, a computer-readable storage medium is also provided, on which a computer program is stored, the computer program being loaded by a processor to perform the steps of any of the methods described above.

[0018] Beneficial effects: This application generates standardized jump status data, accurately determines the existence of target tabs, updates the tab array based on the determination results, and loads the target page content. This enables standardized control of page jump requests triggered by user interaction, effectively solving the problem of no unified logic for tab activation and switching in related technologies. It can also avoid the creation of duplicate tabs for the same target page, thereby ensuring the consistency between tab status and page content display. Attached Figure Description

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

[0020] Figure 1 This is a flowchart illustrating the multi-tab behavior management method provided in an exemplary embodiment of this disclosure; Figure 2 This is a schematic diagram of the basic framework interface of the platform page provided in the exemplary embodiments of this disclosure; Figure 3 This is a schematic diagram of the interception and processing flow of front-end page redirection behavior provided by the exemplary embodiments of this disclosure; Figure 4 This is a schematic diagram of the functional modules of the front-end page interaction platform provided in the exemplary embodiments of this disclosure; Figure 5 This is a schematic diagram of the structure of an electronic device provided by an exemplary embodiment of this disclosure. Detailed Implementation

[0021] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0022] In the description of this application, it should be understood that the terms "center," "longitudinal," "lateral," "length," "width," "thickness," "upper," "lower," "front," "rear," "left," "right," "vertical," "horizontal," "top," "bottom," "inner," and "outer," etc., indicating orientation or positional relationships based on the orientation or positional relationships shown in the accompanying drawings, are used only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this application. Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, features defined with "first" and "second" may explicitly or implicitly include one or more features. In the description of this application, "a plurality of" means two or more, unless otherwise explicitly specified.

[0023] "A and / or B" includes the following three combinations: A only, B only, and a combination of A and B.

[0024] The use of "applies to" or "configured to" in this application implies open and inclusive language, which does not preclude applicability to or configuration to devices performing additional tasks or steps. Furthermore, the use of "based on" implies openness and inclusivity, because processes, steps, calculations, or other actions "based on" one or more conditions or values ​​may in practice be based on additional conditions or values ​​beyond those conditions.

[0025] In this application, the term "exemplary" is used to mean "used as an example, illustration, or description." Any embodiment described as "exemplary" in this application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is provided to enable any person skilled in the art to make and use this application. Details are set forth in the following description for purposes of explanation. It should be understood that those skilled in the art will recognize that this application can be made without using these specific details. In other instances, well-known structures and processes are not described in detail to avoid obscuring the description of this application with unnecessary detail. Therefore, this application is not intended to be limited to the embodiments shown, but is consistent with the broadest scope of the principles and features disclosed in this application.

[0026] In the design of relevant web systems, multi-tab interfaces have become an important interaction method to improve user experience, enhance information organization capabilities, and support multi-task parallel processing. For example, the tab mechanism in browsers allows users to open multiple web pages in the same window, supporting operations such as switching, closing, refreshing, and dragging, effectively improving efficiency and operational flexibility.

[0027] Inspired by browser tab interaction patterns, an increasing number of web management systems, enterprise backend platforms, and low-code platforms are incorporating tabbed navigation into their front-end page structures to replace traditional single-page navigation or pop-up window modes. This tabbed navigation method displays multiple business modules in parallel within the same page frame, allowing users to freely switch between different functional views, thus achieving a more natural and fluid interactive experience.

[0028] With the widespread adoption of Single Page Application (SPA) architecture, front-end page structures are trending towards componentization and modularization, and page switching typically relies on front-end routing mechanisms (such as Vue Router, React Router, etc.). Therefore, current mainstream multi-tab simulation solutions are generally based on Tab components from front-end UI component libraries, using dynamic rendering to add / delete tabs and switch content areas. However, these technologies still have the following shortcomings in practical applications: First, there is a lack of uniqueness management for tabs. Most tab systems rely on page routing paths as unique identifiers, which cannot effectively distinguish multiple instances of the same business page under different parameters or contexts, leading to duplicate tab stacking or state overlap. For example, accessing two customer detail pages, / user?id=1 and / user?id=2, will be identified as the same tab, causing data confusion or abnormal page refreshes, seriously affecting user experience and system robustness.

[0029] Secondly, the scope of page navigation is limited, supporting only navigation within the project's internal pages. Related tab navigation methods typically trigger page navigation via methods like `router.push`, a mechanism that relies on a predefined routing table in the front-end project. Therefore, if the target is an external link or a non-pre-registered route page, it will not be parsed correctly, potentially leading to navigation failure or a blank page. This approach limits the system's compatibility with external systems or pages, reducing scalability and flexibility.

[0030] Third, the navigation behavior is not uniformly managed, and the tab generation mechanism is inadequate. The related multi-tab implementation only supports adding tabs via the main navigation bar; navigation within page content still uses traditional methods (such as router.push or anchor point navigation), bypassing the tab management shell's scheduling mechanism. When a navigation occurs within a business page, it often overwrites the current tab's content instead of automatically opening in a new tab, disrupting the consistency of multi-tab interaction and preventing users from going back or operating multiple task pages in parallel.

[0031] Based on this, on the one hand, this embodiment provides a multi-tab behavior management method applied to a platform corresponding to a front-end framework. This front-end framework includes, but is not limited to, tab template modules and page content display modules. Examples include web management system platforms, enterprise back-end platforms, and low-code platforms. Figure 1 As shown, this multi-tab behavior management method includes the following steps: Step 100: In response to a page redirection request triggered by user interaction, generate redirection status data, which includes a unique identifier for the target page.

[0032] Specifically, a page jump request is triggered when a menu item or interactive element (such as a button or link) with page jump functionality in the platform's tab template module is triggered by program logic or user clicks. The platform captures the page jump request according to its source and the corresponding receiving mechanism; then, it parses the captured request to extract the unique identifier of the target page (such as the page ID); finally, it combines this with business parameters such as page group and monitor ID to assemble standardized jump status data containing the unique identifier and associated business parameters, thus simultaneously meeting the dual requirements of tab display and status management.

[0033] Step 200: Based on the unique identifier in the jump status data, determine whether there is a tab in the current tab array that corresponds to the target page.

[0034] Specifically, the platform first retrieves the currently loaded array of tabs. Each tab in this array is associated with a unique identifier and business parameters (such as page grouping, test point number, etc.). Then, it compares the unique identifier in the jump status data with the unique identifiers of all tabs in the current tab array one by one. If the unique identifiers match, it further verifies whether the business parameters of the two match, thereby distinguishing different business instances under the same unique identifier. If there is no matching item for the unique identifier, or if the unique identifier matches but the business parameters do not match, it is determined that there is no tab for the target page in the current tab array. If the unique identifier and business parameters match completely, it is determined that the tab for the target page already exists in the current tab array.

[0035] Step 300: Based on the judgment result, perform an update operation on the current tab array, and control the page content display module to load and display the content of the target page.

[0036] Specifically, if the determination result is that there is no tab corresponding to the target page in the current tab array, then a new tab operation is performed, the jump status data of the target page is converted into tab display information, and the tab is set to the active state. At the same time, the number of tabs in the current tab array is limited to no more than the preset maximum number that can be displayed. If the determination result is that there is already a tab corresponding to the target page in the current tab array and it is within the visible tab range, then the tab is directly set to the active state without adding a new one. If the determination result is that there is already a tab corresponding to the target page in the current tab array but it is outside the visible tab range, then the tab is adjusted to a visible position and activated by switching the tab position.

[0037] After completing update operations such as adding, adjusting, and activating tabs in the current tab array, the platform synchronously updates the front-end routing parameters, injects tab-related fields into the routing query parameters, and clears irrelevant parameters; finally, it controls the page content display module to load and display the complete content of the target page.

[0038] It should be pointed out that, such as Figure 2 As shown, the tab template module includes, but is not limited to, user interface elements such as the left-side menu bar, the top alert bar, and the tab navigation bar. Each menu item in the left-side menu bar supports custom configuration on the platform's backend page. Configuration items include, but are not limited to, menu name, menu icon, and unique identifier for the page. Related configuration data is stored in the database to support dynamic loading and persistent management. The page content display module is used to present the page content corresponding to the currently active tab. When the tab is empty (i.e., the current tab count is 0), the platform displays a blank background page by default. It should be noted that... Figure 2 This is only used to display elements such as the left menu bar, top alert bar, and tab navigation bar within the user interface, and is not used to limit the specific content displayed within the local user interface of each module.

[0039] These two modules interact and link together via an event-driven mechanism. When a user clicks a menu item in the tab template module or other interactive elements with page navigation functionality, the page content display module immediately switches to display the corresponding page content. To ensure the stability of the interface structure and tab state during page switching, the platform abstracts and encapsulates this module as an independent Vue component. Simultaneously, the page content display module is nested as a default slot within the tab template component, enabling flexible replacement of content areas and component-based management.

[0040] In this embodiment, by generating standardized jump status data, accurately determining the existence of the target tab, updating the tab array based on the determination result, and loading the target page content, the standardized management of page jump requests triggered by user interaction can be achieved. This effectively solves the problem of the lack of unified logic for tab activation and switching in related technologies, avoids the creation of duplicate tabs for the same target page, and ensures the consistency between tab status and page content display, thereby improving the reliability of multi-tab page display.

[0041] In some embodiments, before the page redirection request triggered by user interaction in step 100, step 400 is included, specifically including: Step 410: Intercept redirect events sent by internal page components of the platform, or page redirect information sent by external pages of the platform through cross-document communication.

[0042] Specifically, during the front-end framework initialization phase, the platform creates globally unique event emitter instances based on the event bus library and defines jump events (such as the new tab event) for page navigation scenarios. Jump events refer to behavioral events within page components developed internally on the platform, triggered by user interaction (such as clicking external links or internal platform buttons) or program logic, that intend to navigate to another page.

[0043] Beforehand, each platform's internal page components (such as buttons, menus, and functional modules) are encapsulated with information such as the target page's identifier and business parameters according to preset rules. This allows the jump event to be triggered by calling the send method of an event emitter (such as mitt). Then, the event emitter continuously listens for this jump event. Once any platform's internal page component (such as a button, menu, or functional module) triggers a jump event, the event and all jump-related data it carries are immediately captured, completing the full interception of internal page component jump behavior and ensuring that internal jump behavior does not escape the control scope of the tab management process.

[0044] Because external pages are integrated into the platform using nested iframes, the platform pre-configures a cross-document communication (CPC) listening mechanism on the parent page of the iframe container. This mechanism sends page navigation information from child pages to the parent platform page, explicitly listening for CPC messages from nested external pages. The parent page refers to the main page within the platform's front-end framework, i.e., the parent container page of the nested iframes. This page is responsible for pre-configuring the CPC listening mechanism and receiving navigation information from the nested external pages.

[0045] When an external page initiates a redirection operation, a message containing the redirection intent is sent to the parent page via a cross-document communication interface. This message carries the target page link, business parameters, and other information. After the parent page detects the message containing the redirection intent through a message listening mechanism, it first verifies the legitimacy of the message source to ensure that the message comes from an authorized external page. It then filters out irrelevant messages that are not related to redirection and extracts only the valid message content related to page redirection. Ultimately, this completes the accurate interception of page redirection information sent by external pages through cross-document communication, so that the redirection behavior of external pages is also included in the platform's unified tab management process.

[0046] As an exemplary example, to achieve unified management of page navigation behavior within and outside the platform, this example employs two communication mechanisms working collaboratively, such as... Figure 3As shown. For internal pages developed on the platform, a lightweight event bus, mitt, is introduced. An event bus instance, emitter, is created, and the event type onAddNewTab is defined. The message data structure carried by the emitter event sender is the tab state type TabJumpInfo. In the internal component or module that triggers the page jump, the emitter event sender calls emitter.emit to send a TabJumpInfo object containing jump information. The tab template module listens for the emitter.on event and calls the aforementioned tab addition handling function handleNewTab to complete the interception and unified processing of the jump request.

[0047] For external pages outside the platform, the browser's cross-document communication listening mechanism, postMessage, is used to facilitate message passing between parent and child pages. External pages send a redirect message containing TabJumpInfo data to the parent page via window.parent.postMessage. The platform's page preview container listens for message events using window.addEventListener('message', handler), and in the mitt event bus's emitter instance, calls emitter.emit to forward the received redirect information to the tab template module. The emitter event listener in the tab template module listens to the mitt event bus via emitter.on, and then uniformly calls handleNewTab to complete the redirect processing.

[0048] As can be seen, this embodiment can effectively achieve seamless integration between internal component event-driven communication and external cross-domain message communication, ensuring that all page navigation behaviors on the platform can be centrally controlled and synchronized through a unified tab management logic.

[0049] Step 420: Convert the jump event or page jump information into the jump status data format corresponding to the page jump request. The jump status data format shall include at least the unique identifier of the target page.

[0050] Specifically, the platform first uses the unique identifier of the target page as the key parameter, while also being compatible with business extension parameters such as page grouping and test point numbering, to pre-build a standardized jump status data format. For intercepted internal page jump events, the platform parses the initial interaction data carried by the jump event, extracts the target page's identification information, and matches it with the platform's pre-generated unique identifier. For intercepted external page jump information, the platform first verifies the legality of the message content transmitted across document communication, parses out the target page link and related business parameters, encodes the external URL and adds a specific prefix to generate a unique identifier, and then integrates the unique identifier and business parameters according to a preset format. Then, according to the pre-built standardized jump status data format, the internal events or external messages corresponding to the jump requests are uniformly converted into standardized jump status data to eliminate format differences between internal jump events and external page jump information. Clearly, this standardized jump status data includes the target page's unique identifier and business parameters.

[0051] In some embodiments, in step 100, in response to a page navigation request triggered by user interaction, navigation status data is generated. This navigation status data includes a unique identifier for the target page, comprising: Step 110: In response to a page redirection request triggered by user interaction, parse out the page redirection instruction of the target page.

[0052] Specifically, when a user triggers a page jump request by clicking on a menu item in the tab template module or an interactive element within the page, the platform first receives the jump event of the internal page or the jump message of the external page corresponding to the page jump request, and extracts the instruction that clearly points to the target page, i.e., the page jump instruction, in order to extract the precise jump intent from the jump request triggered by the user interaction.

[0053] Step 120: Determine a unique identifier based on the page redirection instruction.

[0054] Specifically, the platform first determines whether the target page is an internal or external page based on the page redirection instruction. For internal pages, the redirection instruction includes unique identifiers such as the page's unique identifier and component identifiers. The platform matches these internal page identifiers with pre-generated and stored unique identifiers, directly retrieving the corresponding unique identifier and using it as the database primary key to bind the page content. For external pages, the redirection instruction includes the external URL. The platform first performs Base64 encoding on the URL and then adds a fixed prefix (such as "url:") to the encoded content to generate the unique identifier for the external page. Ultimately, regardless of whether the target page is internal or external, a unique and distinguishable identifier can be generated based on the redirection instruction.

[0055] Step 130: Encapsulate the unique identifier with the preset business parameters to generate redirection status data, which includes the unique identifier of the target page.

[0056] Specifically, the platform first retrieves a preset set of business parameters, which includes parameters strongly related to the business scenario, such as page grouping, measurement point number, and alarm level. These business parameters are used to distinguish different business instances under the same unique identifier. Then, the unique identifier is used as a key field and integrated with the filtered preset business parameters that match the current jump scenario. The data is then encapsulated according to the jump status data structure uniformly defined by the platform to generate structured jump status data. This allows the jump status data to simultaneously meet the dual requirements of tab display and status management (such as activation status and location coordinate information). It contains both a unique identifier that uniquely identifies the target page and preset business parameters that can accurately locate the business scenario.

[0057] As an exemplary example, in order to meet the platform's needs for displaying and managing tab information in multi-tab browsing mode, this example designs two core data structure types for the platform: TabItem and TabJumpInfo, which are used for tab display information and jump status management, respectively.

[0058] The TabItem is used to support the display of information on the interface, including basic attributes such as the tab name (name), the page's unique identifier (pageId), the icon, and the parent menu name (parentName). Furthermore, business-related fields are added to the TabItem, such as the number of alarms (count) and the maximum alarm level (maxLevel), to enhance the tab's business expression capabilities. Basic information fields can be obtained from the menu configuration via the pageId, while business fields are obtained through a backend interface and dynamically associated.

[0059] TabJumpInfo manages the states related to tab navigation, such as tab activation, position coordinate adjustment, addition, closing, and switching. Designed with a lightweight approach, it retains only essential navigation identification information. Its core field is `pageId`, and it also supports configuring business parameters such as `group` and `mimicName` to distinguish the tab status of the same page under different filtering or view conditions. It's worth noting that in industrial control, a mimic diagram is a graphical interface used to display and monitor the status of equipment, systems, or processes. Here, `mimicName` is a business parameter representing the name of the mimic diagram, used as part of the tag name in the measurement point list corresponding to the navigation measurement point number. Furthermore, to support navigation and embedding of external pages, TabJumpInfo inherits from the DynamicJumpInfo type, adding optional fields such as `name` and `parentName`, allowing the caller to customize the tab display information during navigation, thus achieving a consistent tab display effect with internal pages.

[0060] As can be seen, through the structural design of this embodiment, the platform decouples the display of tab information from the state control, which can significantly improve the scalability and flexibility of the platform system.

[0061] In some embodiments, step 200, based on the unique identifier in the jump state data, determines whether there is a tab in the current tab array corresponding to the target page, including: Step 210: Compare the unique identifier and business parameters in the jump status data with the identification information of the existing tabs in the current tab array to determine the comparison result.

[0062] Specifically, the platform first retrieves the array of currently loaded tabs. Each existing tab in the array is associated with complete identification information, including a unique identifier and bound business parameters. Then, it extracts the unique identifier from the jump status data and compares it precisely with the unique identifiers of all existing tabs in the array to determine the comparison result.

[0063] Step 220: Based on the comparison results, determine whether there is a tab in the current tab array that corresponds to the target page.

[0064] Specifically, if the comparison result shows no matching of any existing tabs, it is determined that there is no matching target tab. If the comparison result shows a matching of at least one existing tab, the business parameters in the jump status data are further verified item by item with the business parameters of the matching tab. Only if the unique identifier and business parameters are completely identical is it determined that a matching target tab exists. If the comparison result shows a matching of at least one existing tab, but the business parameters are different, it is still determined that there is no matching target tab. Therefore, this embodiment uses a combination of unique identifiers and business parameters to determine the comparison result, thereby distinguishing different business instances with the same unique identifier and determining whether there is a tab in the current tab array corresponding to the target page, ensuring that the comparison result accurately points to a unique target tab.

[0065] In some embodiments, step 300, based on the determination result, performs an update operation on the current tab array, including: Step 310: If the comparison result shows that there is no target tab corresponding to the target page, perform the operation of adding a target tab to the current tab array.

[0066] Specifically, if the comparison results show that there is no tab in the current tab array that matches the unique identifier of the jump status data, or if the unique identifier matches but the business parameters do not match, the platform determines that there is no target tab in the current tab array corresponding to the target page. The platform calls the encapsulated tab behavior processing function (useTabHandler), which first converts the standardized jump status data into structured data that meets the requirements for tab display and management. The structured data includes information such as tab name, icon, and associated route. Then, the structured data is added to the priority display position of the visible tab range of the current tab array, while verifying whether the number of tabs in the current tab array exceeds the preset limit. The maximum number of tabs that can be displayed is determined. If the maximum number is not exceeded, the new tab function (handleNewTab) is used to directly add a new tab. If the maximum number of tabs is exceeded, the tab operation command handling function (handleTabChange) is used to clear or hide a known tab that is currently displayed according to preset rules. Then, the new tab function is used to add a new tab. After the new tab is added, the tab behavior handling function sets the currently active tab in the current tab array to the newly added tab, updates the query parameters of the front-end route, and triggers the page content display module to load the corresponding content based on the unique identifier of the newly added tab.

[0067] Step 320: If the comparison result shows that a target tab corresponding to the target page exists, perform the operation of activating the target tab on the current tab array.

[0068] Specifically, if the comparison results show that there is a target tab in the current tab array that has a unique identifier and business parameters that match perfectly, the platform first locates the known tab in the current tab array that corresponds to the target page. At the same time, it performs an additional check to see if the target tab is within the range of currently visible tabs. The range of visible tabs is defined by the maximum number of tabs that can be displayed as set by the platform. Only tabs that are directly displayed in the current tab array belong to this range.

[0069] If the target tab is within the visible tab range, the result is to directly mark the target tab as active and synchronously update the active tab index parameter in the front-end route. This triggers the page content display module to switch the currently active tab to the page content corresponding to the target tab, completing the activation operation and ensuring that the user can directly view the content of the tab. If the target tab exceeds the preset visible tab range, it means that the target tab is hidden in the scrolling area of ​​the tab bar. In this case, the tab operation command processing function is used to adjust its order in the current tab array by moving it left, right, or selecting drop-down list options. This moves the known tab to the priority display position within the visible tab range of the current tab array, while simultaneously adjusting the order of other tabs to ensure that it appears in the visible area of ​​the tab bar. After the order adjustment is completed, the tab behavior processing function marks the currently active tab as the known tab, synchronously updates the active tab index parameter in the route, and triggers the page content display module to switch to the page content corresponding to the known tab. The entire process only adjusts the order and activation status of the current tab array, without adding or deleting any tab data, ensuring the integrity of the opened tabs. This ensures that users can intuitively see and operate the active tabs while retaining all data of the opened tabs.

[0070] As an exemplary example, this example provides a tab behavior handling hook function, namely the tab behavior handling function `useTabHandler`, to manage the frequent tab addition, activation, and closing operations in a unified system. This function accepts three parameters: a tab state array `tabJumpInfoArray`, the index of the currently active tab `curDisplayIndex`, and the maximum number of tabs that can be displayed `maxDisplayTabNum`.

[0071] The new tab operation is implemented by the function `handleNewTab`. This function receives a tab jump information object `tabJumpInfo`, and first searches for a matching tab in `tabJumpInfoArray` based on `pageId` and business parameters (such as page group and monitoring point number `monitorId`). The details are as follows: When the label index parameter is -1, it indicates that there is no label page corresponding to the unique identifier of the target page in the current label page array. Then, the label page corresponding to the unique identifier of the target page is a new label page. Therefore, the new label page is inserted into the first position of the array in the unshift manner, and curDisplayIndex is set to 0. When the label index parameter is i, it indicates that there is already a label page corresponding to the unique identifier of the target page in the current label page array. Then, it is further determined whether the label page corresponding to the unique identifier of the target page is within the visible label range. If i < maxDisplayTabNum, it means the label is in the visible area, and only curDisplayIndex is set to i; if i ≥ maxDisplayTabNum, it means the label is in the dropdown area, then the label page is swapped with the first label page, and curDisplayIndex is set to 0. Here, the value range of i is [0, maxDisplayTabNum), that is, the natural numbers from 0 to the maximum number of displayable labels maxDisplayTabNum in the current label page array, including 0 but not including maxDisplayTabNum.

[0072] Meanwhile, the handleTabChange function is used to handle operations such as left shift, right shift, close, and clear, and the input parameter is the instruction enumeration cmd. Among them, for the forward or backward operations, the label page switching is achieved by increasing or decreasing curDisplayIndex, and the value range of curDisplayIndex is restricted within the range of 0 to maxDisplayTabNum to avoid switching the label page beyond the maximum number of displayable labels during the forward or backward operations; for the close operation, the label page item with the index of curDisplayIndex is removed from the tabJumpInfoArray; for the clear operation, only the current active page is retained in the tabJumpInfoArray, and the rest are cleared.

[0073] The useTabHandler can change the display of the label page for the label page status, and the above label page operations will trigger the synchronous update of the content area. To achieve page jump, the platform injects the fields of the current label page into the routing query through router.push. Since the fields not defined in tabJumpInfo cannot overwrite the existing URL parameters, to prevent the residual historical parameters from affecting, the business parameters in the query are actively cleared before the jump to ensure the consistency of the page state.

[0074] In some embodiments, in step 300, controlling the page content display module to load and display the content of the target page includes: Step 330: Determine the page type of the target page based on its unique identifier.

[0075] Specifically, assume the platform supports the creation of page types including widget pages, Vue pages, and internal iframe pages. Widget pages display component pages configured using low-code methods. First, platform developers create components and build a component library based on project requirements. Business users can select the required components from the library and add them to the page via drag-and-drop, forming the final page structure. After a widget page is created, the platform stores each component's unique identifier (id), position coordinates, size information, and custom configuration data in the database. Vue pages display the platform's pre-set Vue component content. Each page corresponds to a unique Vue component, identified by the platform's typeId. When creating such pages, business users select the target page from a dropdown menu; the selected typeId is written to the database as page configuration information. Iframe pages load external third-party pages. Users provide the target page's URL when creating the page, and the platform saves this URL as page configuration data in the database. It's important to note that for all page types, the platform automatically generates a unique identifier (pageId) during creation and uses it as the primary key in the page data table, binding it to the specific page content.

[0076] The platform first extracts the unique identifier from the redirect status data and verifies whether it contains a preset external page prefix. If the unique identifier starts with the prefix, the target page is directly determined to be an external page. If the unique identifier does not have the prefix, it is determined to be an internal page. At the same time, the platform performs a second verification on the identifier of the internal page to confirm whether it is a unique identifier pre-generated by the platform and bound to the content of the internal page in the database. For the external unique identifier, the platform verifies whether the content after the prefix is ​​a valid external URL to ensure the accuracy of the page type judgment.

[0077] Step 340: If the page type is an internal page, load and display the content of the target page using programmatic navigation.

[0078] Specifically, after determining that the target page is an internal page, the platform first retrieves the corresponding configuration data for that internal page from the backend interface based on a unique identifier. This configuration data includes page type identification, component association information, and business data interface addresses. Then, the page preview container utilizes the Single Page Application (SPA) feature of a frontend framework (such as Vue) to inject the unique identifier `pageId` and associated business parameters into the route query parameter URL via a programmatic navigation method `router.push`, thus enabling page routing. Simultaneously, based on the page type (component page, Vue page, internal iframe page, etc.) in the configuration data, the platform retrieves the corresponding page data from the backend interface using the `pageId` and employs a differentiated rendering strategy based on the page type.

[0079] As an example, for component pages, the platform dynamically loads and mounts each component to complete page rendering based on information such as component position, size, and custom configuration in the page data, combined with the grid-layout-plus library and Vue's component dynamic component syntax. For Vue pages, the platform matches the corresponding Vue component based on the typeId and uses the component syntax to achieve dynamic loading and display. For iframe pages, the platform reads the URL address from the page data and dynamically sets the src attribute of the iframe tag to achieve the embedding and display of the external page.

[0080] Since external pages on the platform refer to dynamically configured pages that are not created through the platform's internal processes and whose structure is unpredictable, the platform automatically extracts the fourth character and subsequent substrings of the pageId when it detects that the pageId starts with "url:", decodes it using Base64 to restore the target URL, and then sets it as the src attribute of the iframe, thereby completing the embedding and display of the dynamic page.

[0081] Step 350: When the page type is an external page, load and display the content of the target page using an iframe nested container.

[0082] Specifically, after determining that the target page is an external page, the platform first extracts the Base64 encoded content after the prefix in the unique identifier, decodes it to obtain the decoded external URL, and then creates an Iframe nested container in the page content display module. The decoded external URL is assigned to the address attribute of the Iframe nested container, and the size of the Iframe nested container and cross-document communication related parameters are configured. The platform monitors the loading status of the Iframe. If loading fails, a preset error message page is displayed. If loading is successful, the Iframe nested container is embedded in the specified area of ​​the page content display module. At the same time, to ensure that the navigation behavior of external pages can still be controlled, the platform presets a cross-document communication monitoring mechanism at the Iframe nested container level to ensure that subsequent navigation operations of external pages are still included in the platform's tab management process, and finally completes the loading and display of external pages.

[0083] In some embodiments, after loading and displaying the content of the target page in step 300, the method further includes step 500, which specifically includes: In response to operation commands on the tab navigation bar in the tab template module, execute the corresponding tab management operation; the operation command includes at least one of closing the current tab, closing other tabs, and switching tabs.

[0084] Specifically, the platform first listens to all interactive operations in the tab navigation bar of the tab template module. Upon capturing a user-triggered operation command (closing the current tab, closing other tabs, or switching tabs, etc.), it first parses the command type and associated target tab information (such as the identifier of the currently active tab, the index of the tab to be switched, etc.). If the command is to close the current tab, the platform calls the tab behavior processing function to remove the structured data of that tab from the current tab array, synchronously updates the routing parameters, and switches the active tab to the next tab immediately preceding it in the current tab array. The page content display module then loads the content of the new active tab. If the command is to close other tabs, the function only retains the current tab. The system activates the tab's data, deletes all other tab data in the current tab array, updates the routing, and maintains the current tab's activation status and content display unchanged. If the instruction is to switch tabs, the function switches the currently active tab to the target tab based on the target tab index in the instruction, simultaneously checking if it is within the visible tab range. If not, it adjusts the position and triggers the page content display module to load the corresponding tab's content. After all operations are completed, the platform recalibrates the sorting and visible tab range of the current tab array to ensure that the tabs displayed in the navigation bar are consistent with the data of each tab in the current tab array. At the same time, it retains the status records of all operations to ensure the continuity and data consistency of tab management operations.

[0085] In summary, the multi-tab behavior management method proposed in this application can bring at least the following beneficial effects: First, this application divides the platform interface into a tab template module and a page content display module, achieving a clear and well-defined page layout that facilitates subsequent maintenance and functional expansion. Second, this application employs programmatic navigation loading for internal platform pages and manages external pages through Iframe nesting combined with Base64 encoding, designing a dual page loading mechanism that enables unified loading and identification management of different page types, thereby improving platform compatibility. Third, by constructing a tab state type TabJumpInfo and encapsulating the tab behavior handling function useTabHandler, this application unifies the management logic for tab uniqueness determination, duplicate handling strategies, and command navigation, significantly improving the consistency and flexibility of tab operations. Furthermore, this application utilizes the mitt event mechanism and PostMessage communication technology to achieve unified interception and conversion of page jump events inside and outside the platform, making tab jump behavior seamless and unified, effectively avoiding problems such as scattered jump logic and loss of state control. Finally, the tab state management system constructed in this application can be widely applied to multi-page integration platforms, thereby significantly improving page jump efficiency, user operation experience and overall system maintainability.

[0086] Compared to related technologies, this application solves problems such as repeated tab loading, fragmented jump logic, and chaotic state management. By using unified judgment standards and processing procedures, it ensures that tab addition, activation, and switching operations in various jump scenarios follow the same logic, which can greatly improve the continuity of multi-tab interaction and user experience. At the same time, it standardizes the state management of tab arrays, which can effectively reduce the system risks of tab state chaos and page loading anomalies, thereby enhancing the stability, reliability, and maintainability of the front-end multi-tab interaction mode. It has good practicality and promotion value.

[0087] On the other hand, this embodiment provides a multi-tab behavior management platform, including a front-end framework, which includes a page content display module, such as... Figure 4 As shown, the multi-tab behavior management platform also includes: The jump request module 401 is used to respond to a page jump request triggered by user interaction and generate jump status data, which includes a unique identifier of the target page. The tab query module 402 is used to determine whether there is a tab corresponding to the target page in the current tab array based on the unique identifier in the jump status data. The loading and display module 403 is used to perform an update operation on the current tab array based on the judgment result, and to control the page content display module to load and display the content of the target page.

[0088] This embodiment also provides an electronic device, such as... Figure 5 As shown, it includes a memory and a processor. In a specific example, the memory stores a computer program, which, when executed by the processor, implements the method of any of the above embodiments.

[0089] This embodiment also provides a computer-readable storage medium having a computer program stored thereon, the computer program being loaded by a processor to perform the steps of any of the methods in the above embodiments.

[0090] In the embodiments of this application, the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM), etc.

[0091] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0092] The foregoing has provided a detailed description of a multi-tab behavior management method, platform, electronic device, and storage medium provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for managing multi-tab behavior, characterized in that, It is applied to the platform corresponding to the front-end framework, which includes the page content display module; The multi-tab behavior management method includes the following steps: In response to a page redirection request triggered by user interaction, redirection status data is generated, which includes a unique identifier for the target page; Based on the unique identifier in the jump status data, determine whether there is a tab in the current tab array that corresponds to the target page; Based on the judgment result, perform an update operation on the current tab array, and control the page content display module to load and display the content of the target page.

2. The multi-tab behavior management method according to claim 1, characterized in that, Before responding to a page redirection request triggered by user interaction, including: Intercept redirect events sent by internal page components of the platform, or page redirect information sent by external pages of the platform through cross-document communication; Convert the redirection event or page redirection information into the redirection status data format corresponding to the page redirection request. The redirection status data format shall include at least the unique identifier of the target page.

3. The multi-tab behavior management method according to claim 2, characterized in that, Intercepting redirect events emitted by internal page components of the platform, or page redirection information emitted by external pages of the platform through cross-document communication, including: Intercept redirection events emitted by internal page components of the platform through the event emitter; Intercept page redirection information sent by external pages of the platform through cross-document communication by using a cross-document communication monitoring mechanism.

4. The multi-tab behavior management method according to claim 1, characterized in that, Based on the unique identifier in the jump status data, determine whether there is a tab in the current tab array that corresponds to the target page, including: The unique identifier and business parameters in the jump status data are compared with the identification information of the existing tabs in the current tab array to determine the comparison result; Based on the comparison results, determine whether there is a tab in the current tab array that corresponds to the target page.

5. The multi-tab behavior management method according to claim 1, characterized in that, Based on the judgment result, perform an update operation on the current tab array, including: If the comparison result indicates that there is no target tab corresponding to the target page, perform the operation of adding a new target tab to the current tab array; If the comparison result shows that a target tab corresponding to the target page exists, the operation of activating the target tab is performed on the current tab array.

6. The multi-tab behavior management method according to claim 5, characterized in that, If the comparison result indicates the existence of a target tab corresponding to the target page, perform an activation operation on the current tab array, including: If the comparison result indicates that a target tab exists and the target tab is within the visible tab range, then the operation of activating the target tab is performed. If the comparison result indicates that a target tab exists and the target tab is within the range of invisible tabs, then the operation of adjusting the position of the target tab and activating the target tab is performed.

7. The multi-tab behavior management method according to claim 2, characterized in that, The module that controls the page content display loads and displays the content of the target page, including: Determine the page type of the target page based on its unique identifier; When the page type is an internal page, a programmatic navigation method is used to load and display the content of the target page; When the page type is an external page, the content of the target page is loaded and displayed using an iframe nested container.

8. The multi-tab behavior management method according to claim 1, characterized in that, The front-end framework also includes a tab template module. The methods for requesting page jumps include, but are not limited to, triggering menu items in the tab template module and triggering interactive elements with page jump functionality in the platform.

9. The multi-tab behavior management method according to claim 8, characterized in that, After loading and displaying the content of the target page, the method also includes: In response to operation commands on the tab navigation bar in the tab template module, execute the corresponding tab management operation; the operation command includes at least one of closing the current tab, closing other tabs, and switching tabs.

10. A multi-tab behavior management platform, characterized in that, The platform includes a front-end framework, which includes a page content display module, and also includes: The jump request module is used to respond to page jump requests triggered by user interaction and generate jump status data, which includes a unique identifier for the target page. The tab query module is used to determine whether there is a tab in the current tab array that corresponds to the target page, based on the unique identifier in the jump status data. The loading and display module is used to perform update operations on the current tab array based on the judgment result, and to control the page content display module to load and display the content of the target page.

11. The multi-tab behavior management platform according to claim 10, characterized in that, The front-end framework also includes a tab template module. The methods for requesting page jumps include, but are not limited to, triggering menu items in the tab template module and triggering interactive elements with page jump functionality in the platform.

12. An electronic device, characterized in that, It includes a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, it implements the method as claimed in any one of claims 1-9.

13. A computer-readable storage medium, characterized in that, It stores a computer program, which is loaded by a processor to perform the steps of the method of any one of claims 1-9.

Images