An extended screen creation method and a multi-screen workbench system

Abstract

The application relates to an extended screen creation method and a multi-screen workbench system. The method comprises the following steps: responding to a triggering operation on an extended control; creating and displaying a first extended screen window of a first contact person in response to the triggering operation; loading at least two types of information of the first contact person in the first extended screen window, and determining an identification state of the first extended screen window as a first identification state; sending a notification message including the first identification state to a first main screen window by the first extended screen window; and determining the identification state of the first extended screen window as a second identification state after the first main screen window receives the notification message. The method can create the first extended screen window including at least two types of information of the first contact person, and can ensure that the first extended screen window and the first main screen window have a linkage synchronization state.

Description

Technical Field

[0001] This application relates to the field of information processing technology, and in particular to an extended screen creation method and a multi-screen workbench system. Background Technology

[0002] With the continuous development of computer technology, collaborative office software has been widely used in various industries. Based on the convenience of collaborative office software, more and more customer service personnel in various industries are starting to use it to resolve the needs of a large number of customers.

[0003] However, in some industries, such as insurance services, each customer has a large amount of personal data. If customer service staff need to constantly open multiple different types of files in different locations on their terminals while using collaborative office software, it will obviously be detrimental to their work efficiency. Summary of the Invention

[0004] Based on this, it is necessary to provide an extended screen creation method, a multi-screen workbench system, a computer device, a computer-readable storage medium, and a computer program product that can ensure a synchronized state between the first extended screen window and the first main screen window, addressing the aforementioned technical problems.

[0005] On the one hand, this application provides a method for creating an extended screen, applied to a multi-screen workbench system, the method comprising:

[0006] In response to a trigger operation on the extended control; the extended control is located in the first main screen window of the first contact, which is a contact in the display interface of the target application;

[0007] In response to a triggered action, create and display the first extended screen window of the first contact;

[0008] Load at least two types of information of the first contact in the first extended screen window, and determine the identification state of the first extended screen window as the first identification state;

[0009] The first extended screen window will send a notification message, including the first identifier status, to the first main screen window;

[0010] After receiving the notification message in the first main screen window, the identifier state of the first extended screen window is determined to be the second identifier state;

[0011] The first main screen window and the first extended screen window are different windows of the same target application, and the first extended screen window includes at least two types of information of the first contact.

[0012] On the other hand, this application also provides a multi-screen workbench system, which includes a first main screen window, a communication layer, and a first extended screen window; the first main screen window and the first extended screen window communicate through a cross-window bidirectional event communication protocol.

[0013] The first main screen window is used to respond to the triggering operation of the extended control; the extended control is set in the first main screen window of the first contact, which is the contact in the display interface of the target application;

[0014] The communication layer is used to create and display a first extended screen window of the first contact in response to a triggered operation; load at least two types of information of the first contact into the first extended screen window, and determine the identification state of the first extended screen window as a first identification state;

[0015] The first extended screen window is used to send a notification message, including the first identifier status, to the first main screen window through the communication layer;

[0016] The communication layer is used to determine the identifier state of the first extended screen window as the second identifier state after the first main screen window receives a notification message;

[0017] The first main screen window and the first extended screen window are different windows of the same target application, and the first extended screen window includes at least two types of information of the first contact.

[0018] On the other hand, this application also provides a computer device. The computer device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement some or all of the steps described in the methods of the embodiments of this application.

[0019] On the other hand, this application also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program thereon, which, when executed by a processor, implements some or all of the steps described in any method of the embodiments of this application.

[0020] On the other hand, this application also provides a computer program product. The computer program product includes a computer program that, when executed by a processor, implements some or all of the steps described in any method of the embodiments of this application.

[0021] The aforementioned extended screen creation method, system, computer device, computer-readable storage medium, and computer program product are capable of creating a first extended screen window for a target application for a first contact. Furthermore, after creating the first extended screen window, which includes at least two types of information about the first contact, the first extended screen window can send a notification message containing a first identifier of the first extended screen window to the first main screen window. This allows the first main screen window to confirm and synchronize the identifier state of the first extended screen window based on the notification message, thereby ensuring a synchronized state between the first extended screen window and the first main screen window. Attached Figure Description

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

[0023] Figure 1 A flowchart illustrating an extended screen creation method provided in an embodiment of this application;

[0024] Figure 2 This is a schematic diagram of the interface of the first main screen window in one embodiment;

[0025] Figure 3 This is a schematic diagram of the interface of the first extended screen window in another embodiment;

[0026] Figure 4 A schematic diagram of the architecture of an extended screen creation method provided in an embodiment of this application;

[0027] Figure 5 A flowchart illustrating another method for creating an extended screen provided in an embodiment of this application;

[0028] Figure 6 This is a schematic diagram of the structure of an extended screen creation system provided in an embodiment of this application;

[0029] Figure 7 An internal structural diagram of a computer device provided in an embodiment of this application;

[0030] Figure 8 This is an internal structural diagram of another computer device provided in an embodiment of this application. Detailed Implementation

[0031] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0032] In one exemplary embodiment, such as Figure 1 As shown, an extended screen creation method is provided, applicable to a multi-screen workbench system. This method includes steps 102 to 110. Wherein:

[0033] Step 102, in response to the triggering operation of the extended control; the extended control is set in the first main screen window of the first contact, the first contact being the contact in the display interface of the target application.

[0034] Among them, the multi-screen workbench system can be installed in the terminal.

[0035] The first contact refers to the contact selected by the customer service personnel in the target application's display interface at the current time and displayed in the first main screen window.

[0036] The primary main window refers to the sidebar window displayed on the screen during the target application's operation. This primary main window showcases the interaction history between the customer service representative using the target application and the primary contact person.

[0037] Extended controls in the first main screen window refer to interactive controls located within the first main screen window, used to trigger the creation of the first extended screen window for the first contact. For example, a customer service representative triggers the extended controls in the first main screen window by clicking, swiping, or touching, and the communication layer triggers the creation of the first extended screen window for the first contact based on these actions.

[0038] Step 104: In response to the triggered operation, create and display the first extended screen window of the first contact.

[0039] The first extended screen window refers to a secondary window created for the first contact, which is independent of the first main screen window but has a synchronized state with it.

[0040] It should be noted that the first main screen window, the second main screen window, or other main screen windows are the native support windows of the target application, while the first extended screen window, the second extended screen window, or other extended screen windows are auxiliary working windows provided in this embodiment that are independent of the target application but can establish a linkage mechanism with the corresponding main screen window.

[0041] Step 106: Load at least two types of information of the first contact in the first extended screen window, and determine the identification state of the first extended screen window as the first identification state.

[0042] Because the first extended screen window can load at least two types of information about the first contact, the communication layer does not need to search for different information about the first contact at different addresses on the terminal during customer service personnel's interaction with the first contact through the first main screen window. In other words, by integrating at least two types of information about the first contact into the first extended screen window, customer service personnel can intuitively and simultaneously view different information about the first contact, significantly improving their work efficiency.

[0043] Optionally, at least two pieces of information about the first contact person can be determined by the type of the first contact person. Optionally, if the first contact person is an insurance customer, then the at least two pieces of information about the first contact person may include the first contact person's user information, policy information, claims information, or other information.

[0044] For example, the user information of the first contact person may include the basic information of the first contact person (e.g., name, gender, age, etc.); the policy information of the first contact person may include the policy, premium payment records, etc.; and the claims information of the first contact person may include the claim application, medical records, etc. Since different information of the first contact person can be displayed in the first extended screen window, customer service personnel can efficiently query different contents such as the claim conclusion and the reason for the rejection for the first contact person.

[0045] For example, in a traditional solution, when a customer service representative views the claims information of the first contact person through the target application, the representative's operation path is: open the workbench from the main screen window → open the user's basic information → switch to "Other" → claims list → claims information. It can be seen that in the traditional solution, the customer service representative needs to go through five levels of menus to view the claims information of the first contact person. However, since at least two types of information about the first contact person are integrated into the first extended screen window in this embodiment, the customer service representative only needs to directly click on the tab in the first extended screen window to view the claims information of the first contact person.

[0046] In an exemplary embodiment, the creation and display of a first extended screen window for the first contact in response to a trigger operation includes:

[0047] Create the first extended screen window corresponding to the first contact by creating a new page window;

[0048] The unique user identifier corresponding to the first contact is passed to the first extended screen window, and an embedded page container matching it is created inside the first extended screen window. The embedded page container is used to store the cached content of the first extended screen window.

[0049] Among them, the unique user identifier can be the user ID.

[0050] Optionally, the new page window can be created using the window.open() method. For example, the communication layer can define information such as the size and name of the first extended screen window in the window.open() method to create the first extended screen window for the first contact.

[0051] Optionally, the embedded page container can be an iframe container.

[0052] Optionally, the cached content of the first extended screen window may include page structure nodes, business information such as at least two types of information of the first contact person, page identifiers, etc.

[0053] The target application refers to an application installed and running on the terminal that has contact interaction functions and interaction functions between the main window and the secondary window. Optionally, the target application can be collaborative office software; for example, collaborative office software can be WeChat for Business or other software.

[0054] In a straightforward manner, the main window of the target application is the first main screen window (and the second main screen window or other main screen windows mentioned below), and the secondary window of the target application is the first extended screen window (and the second extended screen window or other extended screen windows mentioned below). The first main screen window and the second main screen window are the main windows corresponding to different contacts, while the first extended screen window and the second extended screen window are windows opened through the main window to display the user information of different contacts.

[0055] The target application's display interface refers to the visual interface displayed on the terminal's display screen. Optionally, in addition to displaying the first main screen window and the first extended screen window, the target application's display interface may also display a contact list, including the first contact.

[0056] For example, such as Figure 2 As shown, the target application's display interface includes a first main screen window 202 and an interactive content input box. The first main screen window 202 includes an extended control 204. When a customer service representative initiates a trigger operation on the extended control 204 in the first main screen window 202, the screen will jump to the following... Figure 3 The first extended screen window 302 shown.

[0057] Optionally, the communication layer can employ an iframe caching method, displaying a first extended screen window of the first contact through visual visibility control methods such as v-show, and displaying at least two types of information about the first contact within the first extended screen window. Based on this, the visibility state of the first extended screen window can also be controlled to be visible or invisible through visual visibility control methods such as v-show, thereby preserving the page state of the first extended screen window after its creation.

[0058] For example, in response to the triggering operation of the extended control, the communication layer creates a first extended screen window for the first contact using the `window.open()` method. A unique user identifier corresponding to the first contact is then passed to the first extended screen window. Based on this, the communication layer creates a corresponding embedded page container within the first extended screen window. This embedded page container obtains at least two pieces of information about the first contact based on the unique user identifier and displays them in the first extended screen window. The visibility of the embedded page container corresponding to the first extended screen window can be controlled to be visible or invisible through visual visibility control, thereby controlling and changing the visibility state of the first extended screen window. Furthermore, when the visibility state of the first extended screen window is invisible, its corresponding embedded page container is not destroyed. Therefore, by caching and retaining the embedded page container, it is possible to avoid destroying the first extended screen window when switching extended screen windows.

[0059] Alternatively, the communication layer can use Web Components + Shadow DOM to replace the iframe caching method, thereby achieving component-level isolation of the first extended screen window.

[0060] For example, the communication layer creates an independent Web Components custom component based on the unique user ID of the first contact, and provides this Web Components custom component with independent DOM scope and style isolation through the Shadow DOM structure, so that the extended screen windows of different contacts are independent of each other, thereby achieving component-level isolation of the first extended screen window. Similarly, the visibility control method such as v-show can be used to control whether the Web Components custom component corresponding to the first extended screen window is visible or invisible, thereby controlling and changing the visibility state of the first extended screen window. Furthermore, when the visibility state of the first extended screen window is invisible, its corresponding Web Components custom component and Shadow DOM structure will not be destroyed. Based on this, by caching and retaining the Web Components custom component and Shadow DOM structure, it is achieved that the first extended screen window being switched does not need to be destroyed when switching extended screen windows.

[0061] Step 108: The first extended screen window sends a notification message including the first identifier status to the first main screen window;

[0062] The purpose of sending a notification message including the first identifier status to the first main screen window is to enable the first main screen window to know at the communication level that the first extended screen window is in a loading state of "opening", that is, to lay the foundation for realizing the communication connection between the first main screen window and the first extended screen window.

[0063] Step 110: After receiving the notification message in the first main screen window, determine the identifier state of the first extended screen window as the second identifier state.

[0064] The first main screen window and the first extended screen window are different windows of the same target application, and the first extended screen window includes at least two types of information of the first contact.

[0065] After the first extended screen window is loaded, the communication layer needs to establish a communication connection between the first extended screen window and the first main screen window. Therefore, in order to ensure that the first extended screen window and the first main screen window have a synchronized linkage, the identification state of the first extended screen window needs to be determined as the first identification state. This will enable the communication layer to determine that the first extended screen window and the first main screen window have been successfully linked and synchronized by sending a notification message including the first identification state to the first main screen window.

[0066] When the first extended screen window is in the first identifier state, it indicates that the first extended screen window is in a loading state, which can be understood as the first extended screen window being in the "opening" state.

[0067] The first main screen window and the first extended screen window are different windows of the same target application. The first extended screen window includes at least two types of information of the first contact.

[0068] When the first extended screen window is in the second flag state, it indicates that the first extended screen window is open, which can be understood as the first extended screen window being in the "open" state.

[0069] When the first main screen window receives a notification message, it indicates that the first extended screen window has sensed at the communication layer that it is ready to establish a communication connection with the first main screen window. Therefore, at this time, the communication layer determines the identification state of the first extended screen window as the second identification state. Thus, the first extended screen window and the first main screen window have a synchronized state, that is, a valid communication connection has been established between the first extended screen window and the first main screen window.

[0070] Optionally, the communication connection between the main window and the extended window can be implemented based on the BroadcastChannel cross-window bidirectional event communication protocol. The BroadcastChannel-based cross-window bidirectional event communication protocol eliminates the need for a server as an intermediary in the communication connection between the main window and the extended window. Furthermore, the Application Programming Interface (API) is concise, requiring only a few lines of code, and the fact that this communication protocol is natively supported by the browser further enhances the applicability of this embodiment. For example, the API requires only the following few lines of code:

[0071] / / Creates an instance that accepts a string as its name to identify this channel. On other pages, the same name can be passed to use the same broadcast channel, ensuring communication occurs within the same channel.

[0072] const bc = new BroadcastChannel('MainScreen');

[0073] Once the Broadcast Channel is created, you can listen for broadcast messages on the page.

[0074] bc.onmessage = function(e) {

[0075] console.log('receive:', e.data);

[0076] };

[0077] / / A Broadcast Channel instance also has a corresponding postMessage for sending messages:

[0078] bc.postMessage('hello')

[0079] Optionally, BroadcastChannel can adopt a three-channel classification design: an operation channel for extended screen windows, a component operation channel, and an API proxy channel. This separation of responsibilities among the three channels further improves the performance of the communication protocol. Optionally, the extended screen window operation channel can be used to handle operations related to the identifier state of the extended screen window, such as determining changes to the identifier state of different extended screen windows; the component operation channel can be used to handle operations related to the visual visibility of the extended screen window, such as hiding or showing different extended screen windows through visual visibility controls; and the API proxy channel can be used to transmit messages that call the target application's API.

[0080] Alternatively, MessageChannel can be used instead of BroadcastChannel, and the communication layer establishes a point-to-point communication channel between the first extended screen window and the first main screen window through the postMessage API.

[0081] For example, the communication layer can create a MessageChannel instance for the first main screen window and generate two communication ports. One of the ports is passed to the first extended screen window through the postMessage API. The first main screen window and the first extended screen window are respectively bound to their respective ports to establish a point-to-point communication channel between the first extended screen window and the first main screen window.

[0082] For example, the communication layer can define a unified storage key-value pair between the first main screen window and the first extended screen window. The first extended screen window serializes the message and writes it to localStorage. The first main screen window listens to localStorage events to obtain the messages sent by the first extended screen window in real time. At the same time, it reads the latest message data of localStorage events in combination with a timed polling mechanism to establish a point-to-point communication channel between the first extended screen window and the first main screen window.

[0083] Optionally, in this embodiment, after the first extended screen window is created, messages between the first extended screen window and the first main screen window, or between other extended screen windows and their corresponding main screen windows, can follow the standard message format of JSON (JavaScript Object Notation). The message may include a unique message identifier, a unique user identifier, the sender's role, the component ID, and other information. For example, the standard message format can be represented by the following code:

[0084] {

[0085] id: string, / / Unique message ID (used for deduplication)

[0086] type: string, / / Action type (e.g., EXPAN_SWITCH_USER)

[0087] userId: string, / / Unique user identifier (key field for routing)

[0088] screenRole: string, / / Sender role (mainWorkbench / expanWin)

[0089] timestamp: number, / / Time point

[0090] data: { / / Business data

[0091] componentId?: string, / / Component ID (required for component operation channels)

[0092] userInfo?: object, / / User information (carried when switching contacts)

[0093] }

[0094] }

[0095] In the code above, `id` represents a unique message identifier, composed of `type`, `timestamp`, and a random number, used for message deduplication in subsequent steps; `userId` represents a unique user identifier and is the core routing field for messages, ensuring that messages are only processed by the target contact's workspace; `screenRole` represents the sender's role and is used for message source identification in multi-screen window scenarios; `data.componentId` represents the component ID, which is required in the component operation channel and is used to accurately locate the target component.

[0096] Optionally, both the first main screen window and the first extended screen window are H5 pages.

[0097] In a multi-screen workbench system comprising a first main screen window, a first extended screen window, and a communication layer, step 102 can be implemented by either the first main screen window or the communication layer; steps 104 and 110 can be implemented by the communication layer. The first main screen window and the first extended screen window communicate via a cross-window bidirectional event communication protocol.

[0098] Optionally, the cross-window bidirectional event communication protocol may include, but is not limited to, the following: it may be agreed that there is a bidirectional communication mechanism between the first extended screen window and the first main screen window; it may be agreed that the standard message format involved in the communication interaction between the first extended screen window and the first main screen window (e.g., the unique user identification format, timestamp format, etc. in the message); and it may be agreed how the communication layer will respond to the event triggering mechanism between the first extended screen window and the first main screen window (e.g., the listening mechanism for page visibility state switching events, etc.).

[0099] In the above extended screen creation method, a first extended screen window of the target application can be created for the first contact. After creating the first extended screen window which includes at least two types of information of the first contact, the first extended screen window can send a notification message including the first identifier of the first extended screen window to the first main screen window through the communication layer, so that the first main screen window can confirm and synchronize the identifier state of the first extended screen window based on the notification message, thereby ensuring that the first extended screen window and the first main screen window have a linked synchronized state.

[0100] For example, such as Figure 4 As shown, this embodiment can adopt a dual-workbench mode of "main screen window (right sidebar of the target application) + extended screen window (an additional independent window created in this embodiment)". The two can achieve linkage and collaborative operation between the main and secondary screens through the cross-window event communication protocol based on BroadcastChannel. In the technical architecture of this embodiment, there are the following key features: 1. Separation of main and secondary screens: The right sidebar serves as the main screen window, used to carry the contact list and quick access; the extended screen window serves as the secondary screen, carrying detailed business information; 2. Operational equivalence: The extended screen window can proxy calls to the API of the target application (such as sending messages) through the CH_JSAPI channel, without requiring customer service personnel to switch back to the right sidebar; 3. Workspace isolation: The content of each contact's extended screen window is independently cached, and the workspace is automatically switched when switching contacts; 4. Persistent storage: Key information such as heartbeat signal data and tab status are stored in IndexedDB, and can be partially restored after refreshing the page (based on session verification).

[0101] Based on this, such as Figure 4 As shown, this embodiment enables reliable bidirectional communication between the workbench container layer and the communication and cache management layer. The main screen window can integrate basic contact information, service summaries, target application API calls, and queuing information. The extended screen window is implemented based on the BroadcastChannel cross-window communication mechanism and the IndexedDB cache management mechanism. The communication and window integration includes multi-contact iframe management, basic contact user information, knowledge base query function, and SOP process. The BroadcastChannel cross-window communication mechanism includes a three-channel communication mechanism, including the EXPANWIN channel for implementing extended screen window operations (e.g., opening / closing / switching), the COMPS channel for implementing component operations (e.g., refresh / visibility status control), and the JSAPI channel for implementing target application API proxy (e.g., sending messages). The IndexedDB cache management mechanism can manage heartbeat signal data, contact information, tab status, and main screen window status.

[0102] In one exemplary embodiment, the method further includes:

[0103] Associate the tab information corresponding to the second contact with the unique user identifier corresponding to the second contact to obtain the tab-identity association relationship of the second contact; store the tab-identity association relationship of the second contact in the cache database; determine the cache validity period of the tab-identity association relationship of the second contact based on the timestamp of the current interaction session of the second contact; the cache validity period is used to characterize the cache validity period of the tab-identity association relationship of the second contact relative to the timestamp of the current interaction session;

[0104] The above methods also include:

[0105] Upon detecting a user switching event on the extended screen, the system responds to the selection of a second contact in the display interface and determines whether the current time is within the cache validity period by using the association between the second contact's tab and identifier. If the current time is within the cache validity period, the system reads the tab information corresponding to the second contact by using the association between the second contact's tab and identifier, and hides the first extended screen window using visual visibility control, displays the second extended screen window of the second contact, and displays the tab information corresponding to the second contact in the second extended screen window.

[0106] Optionally, the communication layer can associate the tab information corresponding to the second contact with the unique user identifier corresponding to the second contact; correspondingly, the listening for the extended screen user switching event can also be implemented by the communication layer.

[0107] Optionally, the cache database can be a cache database in the terminal or a cache database in the server.

[0108] A tab is a single-function subpage presented in the form of a tab page; it can also be understood as a subpage containing a single type of information. Tabs are also called "Tab".

[0109] In an easy-to-understand manner, different tabs cover different information for the corresponding contact, and in addition to the different information for the first or second contact, a knowledge base may also be included. Optionally, the tabs may include different pages such as the corresponding contact's basic user information and a knowledge base.

[0110] Tab information can include a list of tabs and the currently active tab.

[0111] A second contact person is another contact person who is different from the first contact person.

[0112] The association between the second contact's tab and identifier refers to the association established between the second contact's tab information and the second contact's unique user identifier. Based on this association, the communication layer can determine the second contact's tab information through the second contact's unique user identifier.

[0113] Optionally, the selected action can be an action initiated by the customer service representative for a second contact in the contact list displayed on the interface.

[0114] Optionally, the communication layer can hide the first extended screen window and display the second extended screen window of the second contact through a visual display control method such as v-show, and retrieve at least two types of information of the second contact through iframe caching and display at least two types of information of the second contact in the second extended screen window.

[0115] Optionally, the cache validity period can be 3 hours, 6 hours, 12 hours, or other durations. During the cache validity period, the association between the second contact's tab and identifier will not be deleted. Based on this, the communication layer can quickly locate and read the second contact's tab information based on this association.

[0116] It should be noted that while the first extended screen window is hidden, at least two pieces of information about the first contact remain within that window and are not lost. This allows customer service personnel to quickly display at least two pieces of information about the first contact when switching back from the second contact. In other words, the extended screen window and the corresponding contact's information contained within it coexist; the data loss of these two pieces of information is not caused by the extended screen window being hidden.

[0117] As can be seen, in this embodiment, the main screen window, the extended screen window, and the contact are linked and switched. That is to say, in the display interface of the target application, if the main screen window is the first main screen window for the first contact, the displayed extended screen window must also be the first extended screen window for the first contact. Similarly, if the customer service personnel switch to the second main screen window for the second contact, the displayed extended screen window is also the second extended screen window for the second contact.

[0118] For example, when a customer service representative switches the first main screen window of the first contact to the second main screen window of the second contact, the EXPAN_SWITCH_USER event will be automatically triggered. Based on this, the communication layer will display the second extended screen window of the second contact after listening to the event.

[0119] In this embodiment, in response to the selection operation of the second contact in the display interface, the first extended screen window is hidden and the second extended screen window of the second contact is displayed using a visual display control method. Based on this, since a caching method is used to control the visibility state of different extended screen windows, even if it is necessary to switch from the first extended screen window of the first contact to the second extended screen window of the second contact, it is not necessary to destroy the first extended screen window of the first contact. Instead, the visibility state of the first extended screen window is changed from visible to invisible, i.e., the first extended screen window is hidden. Furthermore, it is only necessary to change the visibility state of the second extended screen window from invisible to visible. There is no need to refresh the content of the second extended screen window. Thus, customer service personnel do not need to wait for the refresh time of the second extended screen window and can display the second extended screen window of the second contact with a millisecond-level response speed. Even if customer service personnel need to frequently switch between different contacts, they can achieve a fast response, which significantly improves the response speed of the extended screen window and, consequently, significantly improves the work efficiency of customer service personnel.

[0120] Optionally, in this embodiment, the first contact, the second contact, and other contacts can each correspond to a unique user identifier. Therefore, based on the user dimensions of IndexedDB and the unique user identifiers of each contact, different dimensions of data from different contacts can be isolated to avoid data conflicts between different contacts. IndexedDB is a cache database located locally on the terminal and capable of communicating with the communication layer in the system.

[0121] Optionally, the communication layer can use Web Worker + SharedArrayBuffer to implement cross-window memory sharing between the extended screen window and the main screen window, replacing IndexedDB for persistent storage; alternatively, a hybrid caching strategy of sessionStorage + server backup can be used to replace IndexedDB to ensure data security.

[0122] For example, the communication layer can use SharedArrayBuffer as the memory carrier for cross-window data sharing between the first extended screen window and the first main screen window. Web Worker is responsible for the unified management of shared memory read and write and thread synchronization, thereby replacing IndexedDB as the storage medium for cross-window data sharing between the first extended screen window and the first main screen window.

[0123] In an exemplary embodiment, the above-described method of using visual display control to hide the first extended screen window and display the second extended screen window of the second contact includes...

[0124] If the cached content of the extended screen window of the second contact exists in the cache database, and the second contact exists in the contact list, the visibility state of the first extended screen window is changed to invisible, and the second extended screen window of the second contact is displayed; the cached content of the second extended screen window corresponds to the extended screen window of the second contact.

[0125] If the cached content of the extended screen window of the second contact does not exist in the cache database, the visibility state of the first extended screen window is changed to invisible, and a second extended screen window of the second contact is created and displayed.

[0126] Optionally, modifying the visibility state of the first extended screen window to invisible can be achieved by the communication layer through a visual visibility control method, such as v-show. For example, when using v-show as the visual visibility control method, the communication layer can establish a relationship between v-show and the visibility state of the first extended screen window. If the communication layer needs to modify the visibility state of the first extended screen window to invisible, it can do so by changing the visibility state to false using v-show to hide the first extended screen window. Conversely, if the communication layer needs to modify the visibility state of the first extended screen window to visible, it can do so by changing the visibility state to true using v-show to display the first extended screen window. In essence, modifying the visibility state of the first extended screen window to invisible means hiding the first extended screen window in the display interface.

[0127] The method for creating a second extended window for the second contact can be the same as the method for creating the first extended window for the first contact. Optionally, the communication layer can use the window.open() method to create the second extended window for the second contact.

[0128] In a straightforward manner, if you need to switch back from the second contact to the first contact later, you only need to use the visual visibility control method to change the visibility of the second extended screen window from visible to invisible, and change the visibility of the first extended screen window from invisible to visible, that is, to redisplay the first extended screen window of the first contact.

[0129] Similarly, when a second extended screen window needs to be created to represent a second contact, after the second extended screen window is loaded, the communication layer determines the identifier state of the second extended screen window as the first identifier state; the communication layer sends a notification message including the first identifier state of the second extended screen window to the second main screen window; after the second main screen window receives the notification message, the communication layer determines the identifier state of the second extended screen window as the second identifier state. Thus, it can be ensured that the second extended screen window and the second main screen window have a synchronized state.

[0130] For example, this embodiment can be implemented using the following code:

[0131] <template>

[0132]

[0133] <!-- v-show retains the DOM and simply shows or hides the extended screen window -->

[0134] <div

[0135] v-for="user in users"

[0136] :key="user.userId"

[0137] v-show="user.userId === currentUserId"

[0138] class="expan-win-iframe"

[0139] >

[0140] <iframe :src="getWorkbenchSrc(user)">< / iframe>

[0141]

[0142]

[0143] < / template>

[0144] <script>

[0145] export default {

[0146] data() {

[0147] return {

[0148] users: [], / / Contact list

[0149] currentUserId: "", / / Current contact

[0150] };

[0151] },

[0152] methods: {

[0153] subscribe() {

[0154] this.expanChannel.subscribe("EXPAN_SWITCH_USER", (data) => {

[0155] const { userInfo} = data;

[0156] this.currentUserId = userInfo.userId;

[0157] const existUser = this.users.some((u) => u.userId === userInfo.userId);

[0158] if (!existUser) {

[0159] / / In the case where there is no cached content of the second expansion screen window for the second contact, create the second expansion screen window for the second contact

[0160] if (this.users.length >=MAX_USERS_COUNT) {

[0161] / / In the event that the number of contacts exceeds the limit, a first-in-first-out contact replacement mechanism is adopted.

[0162] this.$set(this.users, 0, userInfo);

[0163] } else {

[0164] this.users.push(userInfo);

[0165] }

[0166] }

[0167] / / If cached content of the extended screen window of the second contact exists, display the second extended screen window of the second contact.

[0168] });

[0169] },

[0170] },

[0171] };

[0172] < / script>

[0173] In this embodiment, when there is cached content of the extended screen window of the second contact, it indicates that the extended screen window of the second contact has been created. Therefore, it is only necessary to modify the visibility state of the first and second extended screen windows using a visual visibility control method, that is, to hide the first extended screen window and display the second extended screen window. However, when there is no cached content of the extended screen window of the second contact, it indicates that the extended screen window of the second contact has not yet been created. Therefore, while hiding the first extended screen window, it is necessary to create the second extended screen window of the second contact and display it after creation. Based on this, it can be seen that since this embodiment does not need to destroy the first extended screen window being switched when switching extended screen windows, the second extended screen window of the second contact can be displayed more quickly. Furthermore, when it is necessary to switch back to the first extended screen window of the first contact later, it can also respond at a millisecond speed, thereby significantly improving the response speed of the extended screen window.

[0174] In an exemplary embodiment, the above method further includes: <b

[0175] When a page visibility state switching event is detected, the tab switching behavior is identified in real time based on the page visibility state switching event to determine the main screen page that is currently active.

[0176] Determine the active home screen page identifier for the currently active home screen page;

[0177] Store the active home screen page identifier in the cache database;

[0178] The above method further includes:

[0179] When at least two main screen windows receive extended screen messages from extended screen windows, read the active main screen page identifier stored in the cache database;

[0180] If the page identifier of the current tab matches the active main screen page identifier, and the active main screen page identifier corresponds to the first main screen window, then control the first main screen window to process the extended screen message.

[0181] Optionally, the page visibility state switching event can be implemented by the communication layer; correspondingly, reading the active home screen page identifier stored in the cache database can also be implemented by the communication layer.

[0182] Reasons that cause at least two main screen windows to receive extended screen messages from extended screen windows include situations where the target application has a delay.

[0183] The page visibility state switching event refers to the event in which the visibility state of a page in the main screen window changes (from visible to invisible, or from invisible to visible). The page visibility state switching event is initiated by customer service personnel in the main screen window.

[0184] The active home screen page identifier is used to represent the home screen window that is currently being displayed and is visible at the current time. Based on this, the communication layer stores the active home screen page identifier in the cache database, which can be understood as recording and storing which home screen window is currently active.

[0185] When the main screen page identifier in the current active state indicates that the first main screen window is in an active state, it indicates that the visibility state of the first main screen window at the current time node is visible, that is, the first main screen window is the main screen window at the current time node, and the main screen window that the customer service personnel are currently operating is the first main screen window. <b

[0186] In at least two main screen windows, only one main screen window is active, meaning only one main screen window is visible. All other main screen windows are invisible. This means that two main screen windows will not be displayed simultaneously at the same time. Similarly, at the same time, only one extended screen window is visible, meaning that two extended screen windows will not be displayed simultaneously at the same time.

[0187] A tab refers to a page-carrying unit in the main screen window; that is, a main screen window is composed of multiple tabs. The page identifier of a tab represents the main screen window to which the tab belongs. Based on this, matching the page identifier of the current tab with the active main screen page identifier is to determine whether the main screen window to which the tab belongs is the current active main screen.

[0188] Optionally, the communication layer can identify tab switching behavior in real time through the document.visibilitychange event, i.e., the page visibility state switching event. That is, after the visibility state of the corresponding main screen window changes from invisible to visible, the main screen page identifier of the main screen window will be recorded and saved to IndexedDB. In other words, the communication layer will record the active main screen.

[0189] It is easy to understand that at the same time point, there will only be one active main screen, and other main screen windows are background main screens.

[0190] For example, the real-time detection of the main screen window switching event through the document.visibilitychange event can be implemented through the following code:

[0191] / / Listen for page visibility state switching events

[0192] document.addEventListener('visibilitychange', () => {

[0193] const isVisible = document.visibilityState === 'visible';

[0194] this.updatePageState(this.pageId, isVisible, this.screenRole);

[0195] }); <b

[0196] For example, the main screen page identifier of the main screen window can be recorded and saved to IndexedDB, which can be achieved through the following code:

[0197] class BroadcastChannelEvent {

[0198] constructor() {

[0199] this.mainScreens = new Map(); / / Visibility status of all main screen windows

[0200] this.activeMainScreen = null; / / The currently active main screen page

[0201] this.pageId = window.location.pathname;

[0202] }

[0203] / / Update the visibility state of the main screen window

[0204] async updatePageState(pageId, isVisible, role) {

[0205] if (role !== "mainWorkbench") return;

[0206] / / Update the visibility state of the main screen window

[0207] this.mainScreens.set(pageId, {

[0208] isVisible,

[0209] lastActiveTime: Date.now(),

[0210] });

[0211] / / Update the currently active home screen page identifier

[0212] if (isVisible) {

[0213] this.activeMainScreen = pageId; <b

[0214]

[0215] / / Persistently save to IndexedDB

[0216] await this.saveStateToDB();

[0217] }

[0218] }

[0219] Optionally, in addition to matching the main screen page identifier of the active main screen with the main screen page identifier of the first main screen window, the communication layer can also match the unique user identity identifier corresponding to the active main screen with the unique user identity identifier of the first main screen window. If the visibility state of the first main screen window is visible, the main screen page identifier currently in an active state matches the main screen page identifier of the first main screen window, and the unique user identity identifier corresponding to the active main screen matches the unique user identity identifier of the first main screen window, then the first main screen window is controlled to process the extended screen message. It is easy to understand that for other main screen windows besides the first main screen window, since neither the unique user identity identifier can match the unique user identity identifier corresponding to the active main screen, nor the main screen page identifier can match the currently active main screen page identifier, other main screen windows will not process the extended screen message. Based on this, repeated execution of the extended screen message can be avoided.

[0220] For example, when the visibility state of the first main screen window is visible, the main screen page identifier currently in an active state matches the main screen page identifier of the first main screen window, and the unique user identity identifier corresponding to the active main screen matches the unique user identity identifier of the first main screen window, the communication layer controls the first main screen window to process the extended screen message from the first extended screen window, which can be implemented by the following code:

[0221] async handleMessage(event) {

[0222] const { userId, screenRole} = event.data;

[0223] / / 1. Verify whether the unique user identifier corresponding to the active home screen matches the unique user identifier of the first home screen window.

[0224] if (this.userInfo.userId !== userId) return; <b

[0225] / / 2. Scenarios with at least two main screen windows: Only the currently active main screen window processes messages.

[0226] if (this.screenRole === 'mainWorkbench') {

[0227] / / Read active home screen

[0228] const activeScreen = await this.cacheDB.getCacheData('activeMainScreen');

[0229] / / Match the main screen page identifier of the active main screen with the main screen page identifier of the first main screen window.

[0230] if (activeScreen?.response !== this.getCurrentPageId()) {

[0231] return; / / The first main screen window is not the currently active main screen window, ignore the message.

[0232] }

[0233] }

[0234] / / 3. Control the first main screen window to process extended screen messages.

[0235] this.processMessage(event);

[0236] }

[0237] For example, the first main screen window processes the extended screen message from the first extended screen window, which may be that the first main screen window sends the extended screen message from the first extended screen window to the interactive session of the first contact.

[0238] It is easy to understand that when the page identifier of the current tab matches the active main screen page identifier and the active main screen page identifier corresponds to the second main screen window, the communication layer controls the second main screen window to process the extended screen message. That is to say, the processing of the extended screen message must be handled by the main screen window that is currently in an active state. <b

[0239] In this embodiment, when at least two main screen windows receive extended screen messages from extended screen windows, the active main screen page identifier stored in the cache database is read; if the page identifier of the current tab matches the active main screen page identifier, and the active main screen page identifier corresponds to the first main screen window, then the first main screen window is controlled to process the extended screen message, thereby ensuring that only the first main screen window, which is the main screen window at the current time node, processes the extended screen message. Based on this, the adverse situation of the same extended screen message being processed by at least two main screen windows at the same time can be avoided, that is, the reliability of the communication connection between the first main screen window and the first extended screen window is ensured.

[0240] In an exemplary embodiment, the message sent from the extended screen window to the main screen window and the message sent from the main screen window to the extended screen window each carry a unique user identity identifier of the corresponding contact. Based on this, the main screen window or the extended screen window, as the receiving party, will perform verification processing after receiving the message to ensure that the message is not routed to the wrong contact and causes context errors.

[0241] In an exemplary embodiment, the above method further includes:

[0242] The first main screen window and the first extended screen window write heartbeat timestamps to the cache database at preset time intervals;

[0243] The interval time for the first extended screen window to send heartbeat signals is detected based on the heartbeat timestamp;

[0244] Determine the identifier status of the first extended screen window based on the interval time;

[0245] In response to the trigger operation, creating and displaying the first extended screen window of the first contact includes:

[0246] In response to an extended screen creation command initiated on the first main screen window for the first contact, when the identifier state of the first extended screen window is the third identifier state, a first extended screen window for the first contact is created; wherein, the third identifier state means that the first extended screen window is offline.

[0247] Optionally, the communication layer may detect the interval time at which the first extended screen window sends a heartbeat signal based on the heartbeat timestamp. <b

[0248] The heartbeat signal refers to the signal generated at preset intervals after the first extended screen window is created. It can be understood that a heartbeat timestamp is written to the cache database at the same time the heartbeat signal is generated. The heartbeat signal is used to characterize the current running state of the first extended screen window. Therefore, by detecting the interval at which the first extended screen window sends the heartbeat signal, the identification state of the first extended screen window can be determined, and the identification state can characterize whether the first extended screen window is alive.

[0249] Optionally, the heartbeat signal can be detected by the communication layer after it is generated, or it can be sent from the first extended screen window to the first main screen window and detected by the communication layer.

[0250] The interval time refers to the time difference between the continuous generation and transmission of heartbeat signals by the first extended screen window. Based on the comparison between the interval time and the preset interval time, it can be determined whether the first extended screen window is still alive.

[0251] For example, if the interval time is greater than the preset interval time, it indicates that the first extended screen window can no longer generate a heartbeat signal normally. At this time, it indicates that the first extended screen window may no longer be alive, that is, the first extended screen window is offline. Therefore, the identification state of the first extended screen window is the third identification state.

[0252] Optionally, when the first extended screen window is alive, it can generate a heartbeat signal every 1 second, that is, the preset interval time can be 1 second.

[0253] Optionally, the communication layer may determine the identification status of the first extended screen window based on the comparison result between the interval time and the time threshold.

[0254] Optionally, the first extended screen window sends a heartbeat signal to IndexedDB at a preset time interval, so that IndexedDB can update the heartbeat signal data of the first extended screen window.

[0255] Optionally, the communication layer can use Service Worker to manage the identifier status of the first extended screen window and obtain the status of all source windows in real time through the clients API; it can also use Navigator.sendBeacon API to send a heartbeat signal when the page is unloaded to ensure that the identifier status of the first extended screen window is updated. <b

[0256] In this embodiment, the communication layer detects the interval between the heartbeat signals sent by the first extended screen window based on the heartbeat timestamp. Based on the interval, it determines the identification state of the first extended screen window. Thus, in response to the extended screen creation command initiated on the first main screen window for the first contact, the first extended screen window for the first contact is created when the identification state of the first extended screen window is the third identification state. It can be seen that this embodiment, through the heartbeat detection mechanism of the first extended screen window, ensures that the first extended screen window is only created when it is no longer in a normal living state. Based on this, it can avoid the same first extended screen window being created repeatedly, thereby avoiding resource conflicts and improving the resource utilization of the system. It also improves the reliability and stability of the communication connection between the first extended screen window and the first main screen window.

[0257] In an exemplary embodiment, determining the identifier state of the first extended screen window based on the interval time includes:

[0258] When the interval time is greater than or equal to the time threshold, the identification state of the first extended screen window is determined to be the third identification state;

[0259] When the interval time is less than the time threshold, the identification state of the first extended screen window is determined to be either the first identification state or the second identification state; wherein, the first identification state refers to the first extended screen window being in the loading state; the second identification state refers to the first extended screen window being opened.

[0260] The above method also includes:

[0261] In response to an extended screen creation command initiated on the first main screen window for the first contact, when the identifier state of the first extended screen window is the first identifier state, the first information for indicating that the first extended screen window is being created is displayed in the first main screen window;

[0262] When the identifier state of the first extended screen window is the second identifier state, the first main screen window displays second information to indicate that the first extended screen window has been created.

[0263] Wherein, when the identification state of the first extended screen window is the third identification state, it indicates that the first extended screen window is offline. At this time, it indicates that the first extended screen window is not in a normal living state. <b

[0264] Optionally, the time threshold can be 1.5 seconds or 2 seconds, that is, the time threshold can be greater than the preset time interval, so as to avoid the first extended screen window being mistakenly judged as not being in a normal living state due to delay.

[0265] The first information and the second information can be displayed in the form of a prompt box on the display interface of the target application so that customer service personnel can intuitively determine the status of the first extended screen window from the display interface.

[0266] Optionally, the first information may include a text prompt such as "The first extended screen window is opening, please wait..."; the second information may include a text prompt such as "The first extended screen window is open". In a way that is easy to understand, based on the first or second information directly displayed to the customer service representative, the representative can intuitively confirm the status of the first extended screen window, and will no longer need to repeatedly initiate extended control triggering operations on the first main screen window of the first contact person because the first extended screen window is not yet displayed, thus avoiding the undesirable situation of the first extended screen window being repeatedly created.

[0267] For example, detecting the interval time at which the first extended screen window sends a heartbeat signal and updating the heartbeat signal data of the first extended screen window can be achieved through the following code:

[0268] class HeartbeatManager {

[0269] constructor(cacheDB) {

[0270] this.cacheDB = cacheDB;

[0271] this.maxTimeout = 2000; / / Time threshold: 2 seconds

[0272] this.intervalTime = 1000; / / Preset interval time: 1 second

[0273] }

[0274] / / The first extended screen window generates a heartbeat signal

[0275] startHeartBeat(data = {}) {

[0276] const sendHeartbeat = async () => { <bclass="d_n">

[0277] await this.updateHeartbeat({

[0278] type: "heartbeat",

[0279] ...data,

[0280] });

[0281] };

[0282] this.heartbeatTimer = setInterval(sendHeartbeat, this.intervalTime);

[0283] sendHeartbeat(); / / The first extended screen window writes the heartbeat timestamp to the cache database.

[0284] }

[0285] / / Update the interval of the heartbeat signal of the first extended screen window.

[0286] async updateHeartbeat(data) {

[0287] const { source, status} = data;

[0288] const result = {

[0289] [source]: {

[0290] name: source,

[0291] isAlive: true,

[0292] lastBeat: Date.now(),

[0293] openStatus: status, / / opening / opened

[0294] },

[0295] };

[0296] await this.cacheDB.updateContain(result, { <bclass="d_n">

[0297] cacheKey: "channel_heartbeat",

[0298] });

[0299] }

[0300] }

[0301] For example, when the identifier state of the first extended screen window is the first identifier state, the first main screen window displays first information to indicate that the first extended screen window is being created; when the identifier state of the first extended screen window is the second identifier state, the first main screen window displays second information to indicate that the first extended screen window has been created. This can be achieved through the following code:

[0302] async openExpanWindow(url) {

[0303] / / Check the status of the first extended screen window

[0304] const { expanWinIsOpening, expanWinOffline, expanWinNotOpen} =

[0305] await this.heartBeatInstance.checkInstanceOnline();

[0306] / / When the identifier state of the first extended screen window is the first identifier state, the first main screen window displays first information to indicate that the first extended screen window is being created.

[0307] if (expanWinIsOpening) {

[0308] this.enqueueMessage('Extended screen is opening, please wait...');

[0309] return;

[0310] }

[0311] / / When the identifier state of the first extended screen window is the second identifier state, the first main screen window displays second information to indicate that the first extended screen window has been created.

[0312] if (!(expanWinOffline ||expanWinNotOpen)) {

[0313] this.enqueueMessage('The extended window is open');

[0314] return;

[0315] }

[0316] / / Set the identifier status of the first extended screen window

[0317] await this.handleExpanWinOpening();

[0318] / / Display the first main screen window

[0319] window.open(url, '_blank');

[0320] }

[0321] In this embodiment, the heartbeat detection mechanism of the first extended screen window accurately determines the identification status of the first extended screen window. Thus, under different identification statuses of the first extended screen window, different information will be displayed in the first main screen window in response to the extended screen creation command initiated by the first contact person. This allows customer service personnel to intuitively determine the status of the first extended screen window, avoiding the undesirable situation where customer service personnel do not understand the status of the first extended screen window and repeatedly initiate the trigger operation to create the first extended screen window. It also avoids the same first extended screen window being repeatedly created to avoid resource conflicts, thereby improving the system's resource utilization rate and enhancing the reliability and stability of the communication connection between the first extended screen window and the first main screen window.

[0322] In an exemplary embodiment, the above method further includes:

[0323] In response to a request operation initiated on the first extended screen window on the first main screen window, the identification status of the first extended screen window is determined through the cache database;

[0324] When the identifier state of the first extended screen window is the third identifier state, the request operation is inserted into the first position of the message queue;

[0325] When the identifier state of the first extended screen window is determined by the cache database to be switched from the third identifier state to the first identifier state or the second identifier state, the first extended screen window is controlled to process the request operation in the message queue. <b

[0326] Optionally, the request operation initiated on the first extended screen window on the first main screen window can be responded to by the communication layer.

[0327] A request operation refers to an operation initiated by a customer service representative in the first main screen window to the first extended screen, which is used to request the first extended screen window to execute a corresponding instruction.

[0328] Optionally, the request operation may be to open a tab in the first extended screen window or to view the user basic information of the first contact.

[0329] A message queue is a queue structure used to cache request operations initiated by the first main screen window to the first extended screen window in sequence. The request operations in the message queue have a sequential execution order, that is, the request operations in the message queue adopt a last-in-first-out strategy. Based on this, the message queue can be used to cache request operations when the first extended screen window has not been created or is not in a normal living state, such as being offline.

[0330] The first extended screen window’s identifier state changes from the third identifier state to the first identifier state or the second identifier state, which can be understood as the first extended screen window changing from an offline state to a loading state or an open state.

[0331] When the identifier state of the first extended screen window is determined to be changed from the third identifier state to the first identifier state or the second identifier state through the cache database, the first extended screen window is controlled to process the request operation located at the first position in the message queue.

[0332] In this embodiment, in response to a request operation initiated on the first extended screen window from the first main screen window, when the identifier state of the first extended screen window is the third identifier state, the request operation is inserted into the first position of the message queue. Based on this, when it is determined through the cache database that the identifier state of the first extended screen window has switched from the third identifier state to the first identifier state or the second identifier state, the first extended screen window is controlled to process the request operation in the message queue. Thus, based on the message queue that adopts the last-in-first-out strategy, the reliability of the communication connection between the first extended screen window and the first main screen window is ensured.

[0333] In an exemplary embodiment, the above method further includes: <b

[0334] When the identifier state of the first extended screen window is the third identifier state and the request operation is to open the tab of the first extended screen window, the first extended screen window of the first contact is created or the first main screen window is displayed using a visual display control method.

[0335] Optionally, the first extended screen window of the first contact can be created by the communication layer or the first main screen window can be displayed using a visual display control method.

[0336] Optionally, the tabs of the first extended screen window and the tabs of the second extended screen window each have independent storage space, so that when customer service personnel switch between the first contact person and the second contact person, they can quickly read the tab information data of the corresponding contact person. At the same time, this isolation guarantee can also ensure the accuracy of reading the tab information data of the corresponding contact person.

[0337] Optionally, the tab information data in the tabs corresponding to each extended screen window can be cached in a cache database.

[0338] Optionally, the tabs of the first extended screen window and the tabs of the second extended screen window will always exist after the creation of the corresponding extended screen window. For example, after the first extended screen window is created, the tab content of the first contact person in the first extended screen window will not be lost. It is only in a visible or invisible state due to the different visibility states. Thus, when the customer service personnel switch contacts, the tab information data of the corresponding contact person can also be displayed quickly.

[0339] That is to say, the tab of the first contact has the same liveness and visibility state as the first extended screen window, and similarly, the tab of the second contact has the same liveness and visibility state as the second extended screen window.

[0340] Optionally, the History API + popstate event can be used to manage the tab state, and the browser's forward and back buttons can be used to implement the tab history; or the URL Fragment can be used to store the tab state and automatically restore it after the page is refreshed.

[0341] For example, when using HistoryWhen using API and the popstate event to manage tab states, and combining this with the browser's forward and back buttons to implement tab history, the communication layer can use the pushState method to store tab information data in the browser's history each time the extended window tabs are switched. Simultaneously, the communication layer can listen for the popstate event on the page. If a customer service representative clicks the browser's forward or back button, the communication layer can retrieve the tab information data of the tab the representative is currently viewing from the browser to restore the tab content display in the extended window.

[0342] For example, when using URL Fragments to store tab states and automatically restoring them after page refresh, the communication layer can store tab information data in the URL Fragment. Based on this, each time a customer service representative switches tabs in the extended screen window, only the hash value of the URL needs to be modified, without triggering a refresh of the tab content. When the customer service representative refreshes the tabs or reopens the extended screen window, the tab information data can be read from the hash value of the URL to automatically restore the tabs before the refresh.

[0343] For example, controlling the first extended screen window to process request operations in the message queue can be achieved through the following code:

[0344] class BroadcastChannelEvent {

[0345] constructor() {

[0346] this.messageQueue = []; / / Message queue

[0347] }

[0348] async postMessage(data) {

[0349] const { type} = data;

[0350] / / Determine the identifier status of the first extended screen window through the cache database.

[0351] const { mainWinOffline, expanWinOffline, expanWinNotOpen} =

[0352] await this.heartBeatInstance.checkInstanceOnline(); <b

[0353] / / When the first extended screen window's flag state is the third flag state, insert the request operation into the first position of the message queue.

[0354] if (expanWinOffline || expanWinNotOpen) {

[0355] this.messageQueue.unshift(data); / / Insert at the head of the queue (LIFO)

[0356] / / The request operation is used to open the tab of the first extended screen window, and the communication layer creates the first extended screen window of the first contact.

[0357] if (type === "EXPAN_PAGETAP_SWITCH") {

[0358] this.openExpanWindow();

[0359] }

[0360] return;

[0361] }

[0362] / / Normal request sending operation

[0363] this.channel.postMessage({

[0364] ...data,

[0365] userId: this.userInfo.userId,

[0366] screenRole: this.screenRole,

[0367] });

[0368] }

[0369] / / Control the first extended screen window to process the request operations in the message queue.

[0370] async processMessageQueue() {

[0371] if (this.messageQueue.length === 0) return; <b

[0372] / / Deduplication: Keep the last message of each type in the message queue.

[0373] this.messageQueue = this.messageQueue.filter((item, index, arr) => {

[0374] return arr.findIndex((t) => t.type === item.type) === index;

[0375] });

[0376] / / Batch send request operation

[0377] for (const message of this.messageQueue) {

[0378] await this.postMessage(message);

[0379] }

[0380] this.messageQueue = [];

[0381] }

[0382] }

[0383] / / When switching from the second extended screen window to the first extended screen window, the message queue processing of the first extended screen window is triggered.

[0384] this.subscribe("EXPAN_STATUS_USER_SWITCHED", () => {

[0385] this.processMessageQueue();

[0386] }); <b

[0387] In this embodiment, when the first extended screen window is offline and the request operation is used to open the tab of the first extended screen window, the first extended screen window of the first contact person is created or the visibility state of the first main screen window is determined to be visible by using a visual visibility control method, that is, the first extended screen window is used as the secondary window of the current time node, so that the first extended screen window can accurately execute the request operation to meet the needs of customer service personnel, and ensure the timeliness and accuracy of the response of the first extended screen window to the request operation of opening the tab.

[0388] Optionally, the communication layer can persistently store the tab status through the contact data manager. When a customer service representative operates on the workbench of a contact's main screen window, the communication layer will capture all tab information of the corresponding contact in real time (including the tab list and the currently active tab), and store this tab information in the cache database after associating it with the unique identifier of the corresponding contact. At the same time, the communication layer will record the time node of the current interaction session as the basis for verifying the cache validity of the tab information, and can set a maximum cache validity period of 12 hours.

[0389] Optionally, when a customer service representative switches back to a contact, the communication layer first obtains the current time node identifier from the interaction session storage, and then reads the tab information data corresponding to that contact from the cache database. The communication layer compares the time node stored in the cache data corresponding to the tab information data with the current interaction session time node. If the two match, it indicates that the cache data is valid, and the tab information data is directly returned and the contact's working state is restored; if the two time nodes do not match (for example, the interaction session is reset due to a tab refresh), the cache data is determined to be invalid, the expired cache data is cleared and an empty result is returned. At this time, the contact's workbench will be loaded in the initial state.

[0390] Optionally, the tab information data of each contact can be stored independently using a unique user identifier as the key value to ensure that the working status of different contacts does not interfere with each other. This independent storage design mechanism enables customer service personnel operating the target application to quickly switch between multiple contacts, and the tab status of each contact can be completely preserved and accurately restored.

[0391] For example, the management process of the contact tab can be implemented by the following code:

[0392] class UserDataManager {

[0393] / / Cache contact tab

[0394] asynccacheUserPageTab(data) {

[0395] const { allTabs, activeName} = data;

[0396] const cacheTab = {

[0397] [this.userInfo.userId]: {

[0398] allTabs, / / All tabs

[0399] activeName, / / Tab of the current extended screen window

[0400] cacheTime: sessionStorage.getItem("cache_time"), / / Interactive session time node

[0401] },

[0402] };

[0403] await this.cacheDB.updateContain(cacheTab, {

[0404] cacheKey: "channel_current_user_tabs",

[0405] cacheExpire: 12 * 60 * 60 * 1000, / / 12 hours

[0406] });

[0407] }

[0408] / / Restore the Contacts tab

[0409] async getUserCachePageTab() {

[0410] const cacheTime = sessionStorage.getItem("cache_time");

[0411] const cacheTab = await this.cacheDB.getCacheData( <bclass="d_n">

[0412] "channel_current_user_tabs" );

[0414] const tabData = cacheTab?.[this.userInfo.userId] || {};

[0415] / / Verify cache validity (session level)

[0416] if (tabData.cacheTime === cacheTime) {

[0417] return tabData; / / If the cache is valid, return directly.

[0418] }

[0419] / / Cache invalidated, clear and return null.

[0420] this.clearCacheData();

[0421] return {};

[0422] }

[0423] }

[0424] In an exemplary embodiment, the above method further includes:

[0425] In the communication layer, when the target application receives the first message, the first message is matched with messages in the stored historical messages of the target application;

[0426] If the first message matches the second message in the historical messages, the identifier of the second message is assigned to the first message, and the identifier of the second message is deleted.

[0427] The first message refers to the message newly received by the target application at the current time node.

[0428] The second message refers to one of the messages received at multiple historical time nodes included in the historical messages.

[0429] Optionally, after assigning the identifier of the second message to the first message and deleting the identifier of the second message, the communication layer may also delete the second message. <b

[0430] Optionally, the communication layer matches the first message with messages in the stored historical messages of the target application, which may be matching the unique ID of the first message with the unique ID of messages in the historical messages.

[0431] Optionally, the unique ID can be generated based on the message type, the receiving time node and the random number, and has global uniqueness. That is, the unique ID of the first message is generated by the message type, the generation time node and the random number of the first message. The same applies to the messages in the historical messages, so it will not be described again.

[0432] Further optionally, the communication layer can utilize the characteristics of the Set data structure to perform a repeatability check with O(1) time complexity between the unique ID of the first message and the unique ID of the message in the historical messages.

[0433] For example, this embodiment can be implemented by the following code:

[0434] class BroadcastChannelEvent {

[0435] constructor() {

[0436] this.messageProcessedSet = new Set(); / / Messages in the history

[0437] }

[0438] / / Generate a unique ID for the first message

[0439] generateMessageId(message) {

[0440] const {type} = message;

[0441] const randomDigits = Math.floor(1000 + Math.random() * 9000);

[0442] return `${type}_${Date.now()}_${randomDigits}`;

[0443] }

[0444] / / Process the first message <bclass="d_n">

[0445] handleMessage(event) {

[0446] const messageId = this.generateMessageId(event.data);

[0447] / / Match the first message with messages in the stored historical messages of the target application.

[0448] if (this.messageProcessedSet.has(messageId)) {

[0449] return; / / First message has been processed, skip.

[0450] }

[0451] / / Process the first message...

[0452] this.processMessage(event);

[0453] / / Assign the identifier of the second message to the first message

[0454] this.messageProcessedSet.add(messageId);

[0455] In this embodiment, when the target application receives the first message and the first message matches the second message in the historical messages, the identifier of the second message is assigned to the first message and the identifier of the second message is deleted. Thus, when there are duplicate messages in the cache database, an excessive number of message identifiers will not be stored. By avoiding the duplication and redundancy of message identifiers, the reduction in resource utilization is avoided. Based on this, the reliability of the communication connection between the first extended screen window and the first main screen window can be improved.

[0456] In an exemplary embodiment, the above method further includes:

[0457] The communication layer determines the number of messages included in the historical messages;

[0458] When the number is greater than or equal to the message number threshold, messages in the historical messages are deleted in the order of message reception time so that the number of messages included in the historical messages is less than the message number threshold. <b

[0459] Optionally, the message quantity threshold can be 1000, 1500, 2000 or other values.

[0460] For example, this embodiment can be implemented by the following code:

[0461] / / Set message quantity threshold

[0462] if (this.messageProcessedSet.size > 1000) { / / Determine the number of messages included in the historical messages; if the number is greater than or equal to the message count threshold, delete the messages in the historical messages according to the order of message reception time.

[0463] const firstItem = this.messageProcessedSet.values().next().value;

[0464] this.messageProcessedSet.delete(firstItem);

[0465] }

[0466] }

[0467] }

[0468] In the iframe caching method used for extended screen windows, since v-show is used instead of v-if, the communication layer creates an independent embedded page container for each contact's extended screen window, and switches between different contacts are achieved by controlling the visibility state of the corresponding extended screen window instead of destroying and recreating it. The specific mechanism is as follows:

[0469] 1. This embodiment has a multi-embedded page container coexistence mechanism: the terminal can simultaneously maintain embedded page containers corresponding to the extended screen windows of multiple contacts, and each embedded page container corresponds to the extended screen window of one contact. The DOM structure of all embedded pages is preserved in the H5 page so as to switch the extended screen window visible to the current customer service personnel through the display / hide control of the visibility state.

[0470] 2. Contact switching response process: The terminal listens for the contact switching event in the extended screen window. When it receives a message to switch contacts, it first updates the current contact identifier and then checks whether the contact already exists in the contact list. <b

[0471] 3. New Contact Processing Strategy: If the contact being switched is being loaded for the first time, meaning there is no cached content for that contact in the cache database, the communication layer will determine whether the number of currently cached contacts is greater than or equal to the contact number threshold. If the contact number threshold is not reached, the new contact will be added directly to the contact list and a corresponding embedded page container for the extended screen window will be created for it; if the contact number threshold has been reached, a first-in-first-out (FIFO) queue strategy will be adopted to remove the earliest cached historical contact and replace it with the new contact.

[0472] 4. Quick switching of contacts with existing cached content: If the contact to be switched to already has corresponding cached content, the communication layer only needs to update the current contact identifier. Since the visibility state of the extended screen window is controlled by a visual visibility control method, the embedded page container corresponding to the extended screen window of the contact and its internal state (including extended screen window data, tabs, form filling content, etc.) are completely preserved, achieving millisecond-level switching.

[0473] In this embodiment, based on the setting of the message quantity threshold, the quantity of historical messages can be effectively controlled, and the number of messages included in the historical messages stored in the cache database can be avoided. On the one hand, the adverse situation of memory leakage can be avoided, and on the other hand, the adverse situation of excessive resource consumption leading to reduced processing efficiency of new messages can be avoided.

[0474] First, it can be seen that the above-mentioned extended screen creation method, on the one hand, hides the first extended screen window and displays the second extended screen window of the second contact in response to the selection operation of the second contact in the display interface. That is, the whole process does not involve the destruction of the extended screen window. With the cached content of the extended screen window of the corresponding contact, it is not necessary to repeatedly recreate the extended screen window of the corresponding contact when switching contacts. On the other hand, the survival state and visibility state between the extended screen window and the tab of the corresponding contact are corresponding. That is to say, the tab of each contact will not be lost after the extended screen window of the corresponding contact is created. Therefore, in the application scenario where customer service personnel need to frequently switch contacts in the target application, it can save customer service personnel a lot of waiting time.

[0475] For example, in the application scenario where customer service personnel need to frequently switch contacts in the target application, the technical effects of the traditional solution and the solution of this embodiment are compared as shown in Table 1 below.

[0476] <b

[0477] Table 1

[0478] As can be seen from Table 1, the embodiments of this application solve the time-consuming problem caused by frequent page refreshes in traditional solutions.

[0479] Secondly, it can be seen that in this embodiment, since at least two types of information of the first contact person are integrated in the first extended screen window, and different information of the first contact person can be viewed by switching different tabs in the first extended screen window, customer service personnel do not need to open a large number of address or file windows when searching for at least two types of information of the corresponding contact person. Through the main screen and sub-screen linkage mechanism between the first main screen window and the first extended screen window, customer service personnel can clearly and intuitively view at least two types of information of the first contact person.

[0480] For example, in the application scenario where customer service personnel are looking for at least two types of information about the corresponding contact person, the technical effects of the traditional solution and this solution are compared as shown in Table 2 below.

[0481]

[0482] Table 2

[0483] As can be seen from Table 2, this embodiment solves the problem of numerous addresses or file windows and chaotic management in traditional solutions.

[0484] Again, it can be seen that in this embodiment, since at least two types of information of the first contact person are integrated in the first extended screen window, this embodiment avoids the technical defects of traditional solutions that require multiple levels of menus to view the claims information or other information of the first contact person, and significantly improves the efficiency of customer service personnel in finding at least two types of information of the first contact person.

[0485] For example, in the application scenario where customer service personnel are looking up the corresponding contact person's claims information and policy information, the technical effects of the traditional solution and this solution are compared as shown in Table 3 below.

[0486]

[0487] Table 3

[0488] As can be seen from Table 3, this embodiment solves the technical defect of the traditional solution that the operation path for different information of the contact person is too deep. <b

[0489] As described above, it can be seen that this embodiment is a technical solution围绕 "独立的扩展屏窗口”+"主副屏联动机制”+"扩展屏窗口的独立缓存空间”+"扩展屏窗口与主屏窗口之间的跨窗口通信”等特定机制的技术方案,基于此,不仅确保第一扩展屏窗口与第一主屏窗口之间具有联动的同步状态,还能够确保使用目标应用的客服人员能够具有较高的工作效率。

[0490] Optionally, this embodiment can adopt a five-layer architecture design, covering the complete link from the main and secondary screen configuration to multi-terminal rendering. Each layer has clear responsibilities and distinct boundaries, achieving the separation of configuration and execution and the decoupling of logic and presentation. The five-layer architecture is specifically as follows: 1. The main and secondary screen configuration layer: provides a visual configuration interface for product operators, supporting the declarative definition of the workbench layout and tools for the main and secondary screens; 2. The business application layer: hosts specific business application scenarios (such as the right sidebar workbench of the main screen window, the extended screen workbench, and the SOP process tool); 3. The event center layer: is responsible for event synchronization and operation coordination between the main and secondary screens (BroadcastChannel three-channel design); 4. The cache management layer: realizes the persistent storage and rapid recovery of the work space (IndexedDB + iframe cache); 5. The container rendering layer: is responsible for the actual rendering and display of tools (ComponentRender, ToolViewerRender, SOPRender, DSLRender).

[0491] Exemplarily, as shown in Figure 5, in an exemplary embodiment, it includes three stages, and the three stages are specifically as follows:

[0492] Stage 1: Page active state recognition and persistence

[0493] 1. The customer service staff switches the Tab page of the main screen window in the browser, triggering a change in the page visibility state;

[0494] 2. Accurately identify the page state through the browser-native "Page Visibility API": the currently operated Tab (main screen window tab1) is "active (visible)", and the remaining opened main screen window Tabs (main screen window tab2, main screen window tab3) automatically become "background (hidden)";<b

[0495] 3. The status manager receives the status reports of each main screen window tab, updates the globally unique "active main screen window page identifier" in memory, and persists the identifier to the cache database (IndexedDB) to ensure that the data is not lost and the status of multiple pages is consistent.

[0496] Phase Two: Cross-Page Message Broadcast Distribution

[0497] 1. When a customer service representative initiates a business operation on the extended screen page, the system constructs a standard message body containing "user identity, message content, page role, and time node" according to the specifications;

[0498] 2. The message is broadcast and pushed through the "BroadcastChannel cross-tab communication capability". This capability can realize real-time message push between pages of the same origin. The message will reach all open main screen window tab pages (main screen window tab1, main screen window tab2 and main screen window tab3) simultaneously.

[0499] Phase 3: Message Verification and Unique Consumption

[0500] 1. All main screen window tabs can receive broadcast messages, and each page synchronously executes the same message verification rules;

[0501] 2. The verification is divided into three core logic layers: ① Verify the consistency of the unique user identity to ensure data isolation; ② Verify the page role to clarify the scope of message consumption; ③ Read the "global active home screen page identifier" from the cache database and match it with its own home screen page ID;

[0502] 3. Only the currently active main screen window Tab can pass all checks, execute business logic normally, process messages, and provide feedback to customer service personnel;

[0503] 4. All main screen tabs in the background will automatically terminate the process and ignore this message because the page ID does not match the activity identifier. No business processing will be performed.

[0504] Result: After the above-mentioned stages one, two and three, it is finally ensured that only the active main screen window Tab1 processes messages, while the main screen windows tab2 and tab3 in the background will not repeat the message processing. Based on this, even if there is a situation where the extended screen window sends extended screen messages to multiple main screen windows, it can be ensured that only the active main screen window processes them, thus ensuring the reliability of the communication connection between the extended screen window and the main screen window. <bIt should be understood that although the steps in the flowcharts involved in the above-described embodiments are sequentially shown in the direction of the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless there is a clear indication in this article, the execution of these steps has no strict order limit, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-described embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily executed at the same moment, but can be executed at different moments. The execution order of these steps or stages is not necessarily sequential, but can be executed alternately or in turn with at least a part of other steps or steps or stages in other steps.

[0506] In an exemplary embodiment, as shown in Figure 6, a multi-screen workbench system is further provided. The system includes a first main screen window 602, a communication layer 604, and a first extended screen window 606; the first main screen window 602 communicates with the first extended screen window 606 through a cross-window two-way event communication protocol;

[0507] The first main screen window 602 is configured to respond to a trigger operation on an extended control; the extended control is disposed in the first main screen window 602 of the first contact, and the first contact is a contact in the display interface of the target application;

[0508] The communication layer 604 is configured to create and display the first extended screen window 606 of the first contact in response to the trigger operation; load at least two types of information of the first contact in the first extended screen window 606, and determine the identification state of the first extended screen window 606 as the first identification state;

[0509] The first extended screen window 606 is configured to send a notification message including the first identification state to the first main screen window 602 through the communication layer 604;

[0510] The communication layer 604 is configured to determine the identification state of the first extended screen window 606 as the second identification state after the first main screen window 602 receives the notification message;

[0511] Among them, the first main screen window 602 and the first extended screen window 606 are different windows of the same target application, and the first extended screen window 606 includes at least two types of information of the first contact.<b

[0512] In an exemplary embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as shown in Figure 7. The computer device includes a processor, a memory, an input / output interface (Input / Output, abbreviated as I / O), and a communication interface. Among them, the processor, the memory, and the input / output interface are connected through a system bus, and the communication interface is connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store data related to the extended screen creation method. The input / output interface of the computer device is used to exchange information between the processor and external devices. The communication interface of the computer device is used to communicate with external terminals through a network connection. The computer program, when executed by the processor, implements an extended screen creation method.

[0513] In an exemplary embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as shown in Figure 8. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit, and an input device. Among them, the processor, the memory, and the input / output interface are connected through a system bus, and the communication interface, the display unit, and the input device are connected to the system bus through the input / output interface. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and external devices. The communication interface of the computer device is used to communicate with external terminals in a wired or wireless manner. The wireless manner can be through WIFI, a mobile cellular network, near fieldCommunication, NFC), or other technologies. When the computer program is executed by a processor, it implements an extended screen creation method. The display unit of the computer device is used to form a visually visible picture, which can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covered on the display screen, or a button, a trackball, or a touchpad provided on the computer device housing, or an external keyboard, touchpad, or mouse, etc.

[0514] Those skilled in the art can understand that the structures shown in Figure 7 or 8 are only block diagrams of some structures related to the solution of this application, and do not constitute a limitation on the computer device to which the solution of this application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0515] In an exemplary embodiment, a computer device is further provided, including a memory and a processor. A computer program is stored in the memory. When the processor executes the computer program, it implements the steps in the above method embodiments.

[0516] In an exemplary embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, it implements the steps in the above method embodiments.

[0517] In an exemplary embodiment, a computer program product is provided, including a computer program. When the computer program is executed by a processor, it implements the steps in the above method embodiments.

[0518] Those of ordinary skill in the art can understand that all or part of the processes of implementing the above method embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the above method embodiments. Among them, any reference to a memory, database, or other medium used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random accessMemory, such as ReRAM, magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), and graphene memory, are used. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM can take many forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0519] The technical features of the above embodiments can be combined in any way. In order to make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0520] The embodiments described above are merely examples of several implementation methods of this application, and their descriptions are relatively specific and detailed, but they should not be construed as limiting the scope of this application. It should be noted that, for those skilled in the art, several modifications and improvements can be made without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims. < / template>

Claims

1. A method for creating an extended screen, characterized in that, The method, applied to a multi-screen workbench system, includes: Responding to a trigger operation on the extended control; The extended control is located in the first main screen window of the first contact, where the first contact is a contact in the display interface of the target application; In response to the triggering operation, a first extended screen window of the first contact is created and displayed; Load at least two types of information of the first contact into the first extended screen window, and determine the identification state of the first extended screen window as the first identification state; The first extended screen window sends a notification message including the first identifier status to the first main screen window; After the first main screen window receives the notification message, the identification status of the first extended screen window is determined to be the second identification status; The first main screen window and the first extended screen window are different windows of the same target application, and the first extended screen window includes at least two types of information of the first contact.

2. The method according to claim 1, characterized in that, In response to the triggering operation, creating and displaying a first extended screen window for the first contact includes: Create the first extended screen window corresponding to the first contact by creating a new page window; The unique user identifier corresponding to the first contact is passed to the first extended screen window, and an embedded page container matching it is created inside the first extended screen window. The embedded page container is used to store the cached content of the first extended screen window.

3. The method according to claim 1, characterized in that, The method further includes: The tab information corresponding to the second contact is associated with the unique user identifier corresponding to the second contact to obtain the tab-identity association relationship of the second contact; the tab-identity association relationship of the second contact is stored in the cache database; based on the timestamp of the current interaction session of the second contact, the cache validity period of the tab-identity association relationship of the second contact is determined; the cache validity period is used to characterize the cache validity of the tab-identity association relationship of the second contact relative to the timestamp of the current interaction session; The method further includes: Upon detecting a user switching event on the extended screen, in response to the selection operation of the second contact in the display interface, the system determines whether the current time node is within the cache validity period through the association relationship between the tab and the identifier of the second contact; if the current time node is within the cache validity period, the system reads the tab information corresponding to the second contact through the association relationship between the tab and the identifier of the second contact, and hides the first extended screen window using a visual display control method, displays the second extended screen window of the second contact, and displays the tab information corresponding to the second contact in the second extended screen window.

4. The method according to claim 3, characterized in that, The second extended screen window, which hides the first extended screen window and displays the second contact using a visual display control method, includes: If the cached content of the extended screen window of the second contact exists in the cache database, and the second contact exists in the contact list, the visibility state of the first extended screen window is changed to invisible, and the second extended screen window of the second contact is displayed; the second extended screen window corresponds to the cached content of the extended screen window of the second contact. If the cached content of the extended screen window of the second contact does not exist in the cache database, the visibility state of the first extended screen window is changed to invisible, and a second extended screen window of the second contact is created to display the second extended screen window of the second contact.

5. The method according to claim 1, characterized in that, The method further includes: Upon detecting a page visibility state switching event, the tab switching behavior is identified in real time based on the page visibility state switching event to determine the currently active main screen page. For the currently active home screen page, determine the active home screen page identifier; Store the active home screen page identifier in the cache database; The method further includes: If at least two main screen windows receive extended screen messages from extended screen windows, read the active main screen page identifier stored in the cache database; If the page identifier of the current tab matches the active home screen page identifier, and the active home screen page identifier corresponds to the first home screen window, then the first home screen window is controlled to process the extended screen message.

6. The method according to claim 1, characterized in that, The method further includes: The first main screen window and the first extended screen window write heartbeat timestamps to the cache database at preset time intervals; The interval between the heartbeat signals sent by the first extended screen window is detected based on the heartbeat timestamp; Based on the interval time, determine the identification status of the first extended screen window; In response to the triggering operation, creating and displaying a first extended screen window for the first contact includes: In response to an extended screen creation command initiated on the first main screen window for the first contact, if the identifier state of the first extended screen window is a third identifier state, a first extended screen window for the first contact is created; wherein, the third identifier state means that the first extended screen window is offline.

7. The method according to claim 6, characterized in that, Determining the identifier status of the first extended screen window based on the interval time includes: If the interval time is greater than or equal to the time threshold, the identification state of the first extended screen window is determined to be the third identification state; If the interval is less than the time threshold, the identification state of the first extended screen window is determined to be either a first identification state or a second identification state; wherein, the first identification state refers to the first extended screen window being in a loading state; and the second identification state refers to the first extended screen window being open. The method further includes: In response to an extended screen creation command initiated on the first main screen window for the first contact, if the first extended screen window is in a first identification state, first information is displayed on the first main screen window to indicate that the first extended screen window is being created. When the identifier state of the first extended screen window is the second identifier state, the first main screen window displays second information to indicate that the first extended screen window has been created.

8. The method according to claim 1, characterized in that, The method further includes: In response to a request operation initiated on the first extended screen window from the first main screen window, the identification status of the first extended screen window is determined through the cache database; If the identifier state of the first extended screen window is the third identifier state, the request operation is inserted into the first position of the message queue; If the cache database determines that the identifier state of the first extended screen window has switched from the third identifier state to the first identifier state or the second identifier state, the first extended screen window is controlled to process the request operation in the message queue.

9. The method according to claim 8, characterized in that, The method further includes: When the first extended screen window is in the third identification state and the request operation is used to open the tab of the first extended screen window, a first extended screen window for the first contact is created or the first main screen window is displayed using a visual display control method.

10. A multi-screen workbench system, characterized in that, The system includes a first main screen window, a communication layer, and a first extended screen window; the first main screen window and the first extended screen window communicate with each other through a cross-window bidirectional event communication protocol. The first main screen window is used to respond to trigger operations on extended controls; The extended control is located in the first main screen window of the first contact, where the first contact is a contact in the display interface of the target application; The communication layer is configured to, in response to the triggering operation, create and display a first extended screen window of the first contact; load at least two types of information of the first contact into the first extended screen window; and determine the identification state of the first extended screen window as a first identification state. The first extended screen window is used to send a notification message, including the first identifier status, to the first main screen window through the communication layer; The communication layer is used to determine the identification state of the first extended screen window as the second identification state after the first main screen window receives the notification message; The first main screen window and the first extended screen window are different windows of the same target application, and the first extended screen window includes at least two types of information of the first contact.

Images