An interaction method of a resource interface and a related device

Abstract

This application discloses an interactive method and related apparatus for a resource interface, comprising: displaying a first area of ​​the resource interface within a display window, the first area including information related to at least one resource object; in response to a drag operation on a target resource object in the first area, generating a floating container for the target resource object and controlling the floating container to move following the drag operation; when the movement of the floating container meets preset conditions, controlling the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window; when the floating container and the second area at least partially overlap, adding the information related to the target resource object carried by the floating container to the second area for display. This application controls the translation of the resource interface based on the drag operation on the floating container of the resource object, thereby enabling users to maintain visual continuity during resource scheduling.

Description

Technical Field

[0001] This application relates to the field of resource scheduling technology, and in particular to an interactive method and related apparatus for a resource interface. Background Technology

[0002] With the rapid development of scheduling technology, various business systems such as logistics scheduling, resource management, and task orchestration are becoming increasingly complex. To improve business processing efficiency, visual interaction has become the mainstream interaction method in the field of resource scheduling.

[0003] However, existing resource scheduling schemes trigger page navigation when adding resource objects (e.g., business requirements) to a specific location (e.g., product version or project iteration) in the navigation area of ​​the resource interface, leading to the details view corresponding to that specific location. This page navigation method can easily cause visual discontinuity, thereby reducing interaction efficiency and user experience. Summary of the Invention

[0004] In view of the above problems, this application provides an interaction method and related apparatus for a resource interface, so as to maintain visual continuity for users during resource scheduling and improve interaction efficiency and user experience. The specific solution is as follows:

[0005] The first aspect of this application provides an interactive method for a resource interface, comprising:

[0006] A first area of ​​the resource interface is displayed within the display window, the first area including information related to at least one resource object whose processing state is a first state;

[0007] In response to a drag operation targeting a target resource object in the first area, a floating container for the target resource object is generated and the floating container is controlled to move following the drag operation; the target resource object is any one or more of the at least one resource object displayed in the first area;

[0008] When the movement of the floating container meets preset conditions, the first area of ​​the resource interface is controlled to gradually slide out of the display window and the second area of ​​the resource interface is controlled to gradually slide into the display window; the second area includes relevant information of at least one resource object whose processing state is the second state;

[0009] When the floating container at least partially overlaps with the second area, the relevant information of the target resource object carried by the floating container is added to the second area for display, and the processing status of the target resource object is adjusted to the second status.

[0010] In one possible implementation, the method further includes:

[0011] A third area of ​​the resource interface is displayed within the display window, the third area being adjacent to the first area and located on the first side of the display window;

[0012] While controlling the first region to slide out and the second region to slide in, the third region is controlled to move following the first region, such that the third region moves from the first side to between the first region and the second region; and

[0013] When the first region slides completely out of the display window, the third region is fixed to the second side of the display window and adjacent to the second region.

[0014] In one possible implementation, if the floating container at least partially overlaps with the second area, the relevant information of the target resource object carried by the floating container is added to the second area for display, including:

[0015] When the floating container at least partially overlaps with the second region, the first dwell time of the floating container is obtained;

[0016] If the first dwell time exceeds the first preset duration, the relevant information of the target resource object carried by the floating container will be added to the second area for display.

[0017] In one possible implementation, the method further includes:

[0018] When the floating container at least partially overlaps with the first region, the second dwell time of the floating container is obtained;

[0019] If the second dwell time exceeds the second preset duration, then the first area of ​​the resource interface is controlled to gradually slide into the display window and the second area of ​​the resource interface is controlled to gradually slide out of the display window; and

[0020] The relevant information of the target resource object carried by the floating container is added to the first area for display.

[0021] In one possible implementation, when the movement of the floating container satisfies a preset condition, controlling the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window includes:

[0022] Obtain the current displacement vector of the floating container;

[0023] If the displacement component of the current displacement vector in the first predetermined direction exceeds the target threshold, then the first area of ​​the resource interface is controlled to gradually slide out of the display window along the second predetermined direction and the second area of ​​the resource interface is controlled to gradually slide into the display window along the second predetermined direction; wherein, the first predetermined direction and the second predetermined direction are opposite.

[0024] In one possible implementation, controlling the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window includes:

[0025] Based on the current displacement vector, determine the target translation parameters of the resource interface layout container of the resource interface;

[0026] Based on the target translation parameters, multiple displacement steps are determined;

[0027] According to the displacement step size, the coordinate transformation attribute of the resource interface layout container is updated frame by frame to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window.

[0028] In one possible implementation, the method further includes:

[0029] Obtain the display width and scaling factor of the resource interface;

[0030] The target threshold is determined based on a preset scaling factor, the display width, and the display scaling factor.

[0031] In one possible implementation, the relevant information of the target resource object carried by the floating container is added to the second area for display, including:

[0032] Obtain the attribute information of the target resource object;

[0033] The target resource object is determined in the second area based on the attribute information, and the relevant information of the target resource object is added to the second area for display based on the sorting position.

[0034] A second aspect of this application provides an interactive device for a resource interface, comprising:

[0035] The display module is used to display a first area of ​​the resource interface within a display window, the first area including information related to at least one resource object whose processing state is a first state;

[0036] A generation module is configured to, in response to a drag operation on a target resource object in the first area, generate a floating container for the target resource object and control the floating container to move following the drag operation; the target resource object is any one or more of the at least one resource object displayed in the first area;

[0037] The control module is configured to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window when the movement of the floating container meets preset conditions; the second area includes relevant information of at least one resource object whose processing state is a second state.

[0038] The first adding module is used to add relevant information of the target resource object carried by the floating container to the second area for display when the floating container at least partially overlaps with the second area, and to adjust the processing status of the target resource object to the second state.

[0039] A third aspect of this application provides a computer program product including computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the resource interface interaction method of the first aspect or any implementation thereof.

[0040] A fourth aspect of this application provides an electronic device, including at least one processor and a memory connected to the processor, wherein:

[0041] The memory is used to store computer programs;

[0042] The processor is used to execute the computer program so that the electronic device can implement the resource interface interaction method of the first aspect or any implementation thereof.

[0043] The fifth aspect of this application provides a computer storage medium carrying one or more computer programs, which, when executed by an electronic device, enable the electronic device to use the resource interface interaction method described in the first aspect or any implementation thereof.

[0044] This application provides an interactive method for resource scheduling, utilizing the aforementioned technical solution. Due to the size limitation of the display window, it is not possible to simultaneously display the first and second areas of the resource interface within the display window. When a user first accesses the display window, the first area of ​​the resource interface is displayed within the display window. The first area includes information about several resource objects whose processing state is a first state (e.g., unprocessed state). When the user performs a drag operation on a target resource object in the first area, a floating container for the target resource object is generated, and the floating container moves following the user's drag operation. The target resource object is any one or more of the at least one resource object displayed in the first area. If the movement of the floating container meets preset conditions, the first area of ​​the resource interface is controlled to gradually slide out of the display window, while the second area of ​​the resource interface gradually slides into the display window. The second area includes information about at least one resource object whose processing state is a second state (e.g., processing state). When the floating container at least partially overlaps with the second area, the information about the target resource object carried by the floating container is added to the second area for display, and the processing state of the target resource object is adjusted to the second state. In this embodiment, when the user is in the planning stage, they can select a target resource object from the first area and drag it. Subsequently, the first area will gradually slide out of the display window, while the second area, where the user intends to allocate the target resource object, will simultaneously slide into the display window. This approach effectively avoids the instantaneous switching of visual context caused by directly jumping from the first area to the second, allowing users to maintain visual continuity during resource allocation, thereby improving interaction efficiency and user experience. Attached Figure Description

[0045] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale.

[0046] Figure 1 A schematic diagram of the architecture of an interactive system for a resource interface provided in this application;

[0047] Figure 2 A flowchart illustrating an interaction method for a resource interface provided in this application;

[0048] Figure 3A A schematic diagram of the structure of an interaction method for a resource interface provided in this application;

[0049] Figure 3B A schematic diagram of the structure of an interaction method for a resource interface provided in this application;

[0050] Figure 3CA schematic diagram of the structure of an interaction method for a resource interface provided in this application;

[0051] Figure 3D A schematic diagram of the structure of an interaction method for a resource interface provided in this application;

[0052] Figure 4 A timing diagram illustrating an interaction method for a resource interface provided in this application;

[0053] Figure 5 This is a schematic diagram of the structure of an identifier resolution device provided in an embodiment of this application;

[0054] Figure 6 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0055] The embodiments of this application are described below with reference to the accompanying drawings. The terminology used in the implementation section of this application is for explaining specific embodiments only and is not intended to limit the scope of this application.

[0056] The embodiments of this application will now be described with reference to the accompanying drawings. Those skilled in the art will recognize that, with technological advancements and the emergence of new scenarios, the technical solutions provided in the embodiments of this application are equally applicable to similar technical problems.

[0057] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such terms are interchangeable where appropriate; this is merely a way of distinguishing objects with the same attributes in the embodiments of this application. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion, so that a process, method, system, product, or apparatus that comprises a series of elements is not necessarily limited to those elements but may include other elements not explicitly listed or inherent to those processes, methods, products, or apparatuses.

[0058] See Figure 1 , Figure 1 A schematic diagram of a system architecture is shown. The system may include a terminal 100 and a server 200. The server 200 can provide the methods provided in the embodiments of this application to one or more terminals.

[0059] The terminal 100 may have a resource management application installed. The application and webpage can provide a resource interface. The terminal 100 can receive relevant parameters input by the user on the resource interface and send the parameters to the server 200. The server 200 can obtain the processing result based on the received parameters and return the processing result to the terminal 100.

[0060] It should be understood that in some optional implementations, the terminal 100 can also complete the action of obtaining the processing result based on the received parameters on its own, without the need for the server to cooperate. This application embodiment is not limited to this.

[0061] The following description Figure 1 The product form of the mid-terminal 100;

[0062] The terminal 100 in this application embodiment can be a mobile phone, tablet computer, wearable device, vehicle device, augmented reality (AR) / virtual reality (VR) device, laptop computer, ultra-mobile personal computer (UMPC), netbook, personal digital assistant (PDA), etc., and this application embodiment does not impose any restrictions on it.

[0063] Terminal 100 may include a radio frequency unit, memory, input unit, display unit, camera (optional), audio circuitry (optional), speaker (optional), microphone (optional), headphone jack (optional), processor, external interface, power supply, and other components. Those skilled in the art will understand that the above-mentioned components are merely examples and do not constitute a limitation on the terminal or multifunctional device; it may include more or fewer components, or a combination of certain components, or different components.

[0064] The input unit can be used to receive input numeric or character information, and to generate key signal inputs related to user settings and function control of the portable multi-functional device. Specifically, the input unit may include a touchscreen (optional) and / or other input devices. Other input devices may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0065] Among them, the input device can receive input data, etc.

[0066] The display unit can be used to display information input by the user or information provided to the user, various menus of the terminal, interactive resource interfaces, file display, and / or playback of any multimedia file. In the embodiments of this application, the display unit can be used to display the resource interface and processing results of the interactive method for resource management.

[0067] The memory can be used to store software code related to the interaction methods of the resource interface, the processor can execute the steps of the interaction methods of the resource interface, and can also schedule other units (such as the above-mentioned input unit and display unit) to achieve the corresponding functions.

[0068] This radio frequency unit (optional) can be used to receive and send signals during information transmission or calls.

[0069] In this embodiment, the radio frequency unit can send data to the server 200 and receive processing results from the server 200. Terminal 100 also includes a power supply (such as a battery) for powering various components.

[0070] Terminal 100 also includes an external interface, which can be a standard Micro USB interface or a multi-pin connector, which can be used to connect terminal 100 to other devices for communication or to connect a charger to charge terminal 100.

[0071] Server 200 includes a bus, a processor, a communication interface, and memory. The processor, memory, and communication interface communicate with each other via the bus.

[0072] The memory can be used to store software code related to the interaction methods of the resource interface, and the processor can execute the steps of the interaction methods of the chip's resource interface, and can also schedule other units to achieve the corresponding functions.

[0073] It should be understood that this radio frequency unit is optional and can be replaced with other communication interfaces, such as a network port.

[0074] First, to facilitate understanding of this plan, some names need to be explained.

[0075] JavaScript: A scripting programming language used for web page and application development. It can run directly on the user's browser to enable dynamic interaction and content updates on web pages.

[0076] HTML (Hypertext Markup Language): A basic markup language used to define the structure and content of web pages. It uses tags to organize elements such as text, images, and links to build the semantic skeleton of web pages.

[0077] CSS (Cascading Style Sheets): A style language used to define and describe how web page content (such as HTML elements) is presented, controlling its layout, colors, fonts, animations, and other visual appearance.

[0078] TranslateX: The Transform property in CSS, used to control the movement of HTML elements along the horizontal X-axis in a two-dimensional plane.

[0079] Translate3d: A 3D transformation function of the Transform property in CSS, used to precisely displace HTML elements in 3D space.

[0080] Secondly, to facilitate those skilled in the art to understand the technical solutions provided in the embodiments of this application, the relevant technologies are described below: The inventors have discovered that there are two existing interaction methods for resource interfaces: (1) Users can use the copy and move functions in the operation menu, or perform batch operations after checking the boxes, to schedule the selected resource items to other categories or target containers. (2) Users can drag the currently selected resource items from the source area to the navigation area to jump to other categories or target containers.

[0081] The interaction methods of these resource interfaces have the following defects: (1) They only support dragging resource items into the navigation area and cannot accurately locate specific sequence positions within the navigation area. If the arrangement order of resource items needs to be adjusted, a second operation is required. (2) In widescreen or multi-module interface layouts, the distance between the source area and the navigation area is far, and the user's drag operation path is too long. It is easy to release the operation midway due to operation jitter, resulting in poor operation fault tolerance. (3) In order to complete the functional area within the same view, the display width of each functional area needs to be compressed, resulting in incomplete display of key information of resource items and reduced user recognition efficiency. (4) When the user's visual focus is concentrated on the source area on one side of the interface, if it is necessary to dispatch resource items to a specific target container in the navigation area on the other side, the view needs to be manually adjusted frequently, interrupting the operation process.

[0082] To address the aforementioned problems, embodiments of this application provide an interaction method for a resource interface. The interaction method for the resource interface of this application will be described in detail below with reference to the accompanying drawings.

[0083] Reference Figure 2 , Figure 2 The flowchart of an interaction method for a resource interface provided in this application embodiment may include steps 201 to 203, which are described in detail below.

[0084] 201. Display a first area of ​​the resource interface within the display window. The first area includes information about at least one resource object whose processing status is in the first state.

[0085] Information about at least one resource object in its first state can be retrieved from local storage or a server and displayed in a list, card, or grid format within the first area. The display window can refer to an application window, browser viewport, or mobile application interface on a user device screen, used to display a graphical user interface. The resource interface can be the underlying graphical interface layout that hosts and organizes multiple functional areas (such as the first area and the second area). The first area may include a to-do list, an unallocated resource pool, or a pool of planned requirements. Resource objects can be manipulable data entities within the resource interface, such as business requirements, task items, and files. The first state describes the current business state of the resource object, such as pending processing or new construction. Information about the resource object can be image elements, text elements, etc., that present the resource object on the resource interface.

[0086] 202. In response to a drag operation targeting a target resource object in the first area, generate a floating container for the target resource object and control the floating container to move following the drag operation. The target resource object is any one or more resource objects from at least one resource object displayed in the first area.

[0087] Pointer input events can be bound to resource objects using front-end programming languages ​​such as JavaScript and TypeScript to establish drag-and-drop sessions and listen for drag-and-drop operations. A drag-and-drop operation refers to a continuous interactive action where a user clicks and holds a resource object using a pointer device (such as a mouse) or touch gestures, and then moves the pointer. Drag-and-drop operations can include drag initiation, drag movement, and drag release. Pointer input events are user interaction events triggered by a pointer device (such as a mouse, stylus, or finger touch). Pointer input events can include event types used to detect different stages of user interaction. For example, drag initiation can be detected by listening for pointer press events (such as Mousedown or Touchstart). The continuous trajectory of drag movement can be captured by listening for pointer movement events (such as Mousemove or Touchmove). Drag release can be detected by listening for pointer release events (such as Mouseup or Touchend). After listening for pointer input events, the target resource object to be dragged can be determined based on the pointer input events, and a floating container can be created for the target resource object. A floating container can be a graphical element (e.g., a semi-transparent thumbnail or copy) generated based on the target resource object when the user drags it in the first area. It then moves with the pointer, following the drag operation, by continuously listening for pointer input events and updating the floating container's position coordinates. In some embodiments, visual effects such as semi-transparency and offset shadows can be added to the floating container. By listening for pointer input events and updating the floating container's CSS `left` and `top` properties when the event is triggered, the floating container's position is kept offset from the pointer position, thus achieving the effect of the floating container moving with the drag operation.

[0088] 203. When the movement of the floating container meets preset conditions, the first area of ​​the resource interface gradually slides out of the display window while the second area of ​​the resource interface gradually slides into the display window. The second area includes information related to at least one resource object whose processing state is the second state.

[0089] The trajectory of the floating container can be calculated in real time and preset conditions can be determined. Preset conditions can refer to logical rules used to determine whether to trigger interface changes. Preset conditions can be related to the drag's displacement, direction, time, or position. The first and second areas can be two functional areas on the resource interface. For example, in a project management system, the first area could be a to-do list, and the second area could be a version planning list.

[0090] 204. If the floating container at least partially overlaps with the second area, add the relevant information of the target resource object carried by the floating container to the second area for display, and adjust the processing status of the target resource object to the second state.

[0091] It can acquire the location information of the floating container and the second area in real time. It determines whether the floating container and the second area overlap at least partially. If they overlap, the relevant information of the target resource object is added to the second area for display, and the processing status of the target resource object is adjusted from the first state to the second state. The relevant information of the target resource object carried by the floating container may include a unique identifier, attribute data, display configuration information, etc. Figure 4 As shown, when the drag and release of the target resource object is detected, the coordinates of the release position can be compared with the position information of the second area in the display window to determine whether the target resource object has been released into the second area (i.e., hit the target area). When the target resource object is released into the second area, the resource interface submits a resource scheduling request to the server (backend service).

[0092] To maintain the continuous visibility of navigation elements (such as the version selection area) during interaction, thereby improving user efficiency, one possible implementation of the resource interface interaction method may further include: displaying a third area of ​​the resource interface within a display window, the third area being adjacent to the first area and located on the first side of the display window; controlling the third area to move along with the first area as the first area slides out and the second area slides in, so that the third area moves from the first side to between the first and second areas; and fixing the third area to the second side of the display window and adjacent to the second area when the first area has completely slid out of the display window.

[0093] like Figure 3A As shown, when a user first accesses the display window, a first area and a third area of ​​the resource interface can be displayed. At this time, the third area is located on the first side of the display window, and the first area is located on the second side. The third area can refer to a functional area within the resource interface used to provide navigation or auxiliary operation functions. For example, the third area could be a version selection area, a category navigation bar, or a tool panel. The first and second sides can refer to the relative positions of the display window. For example, the first side could be the left side of the display window, and the second side could be the right side. Figure 3B As shown, when a user drags a target resource object in the first area, a floating container for the target resource object can be generated, and the floating container can be controlled to move following the drag operation. Figure 3CAs shown, when the movement of the floating container meets preset conditions, the third region adjacent to the first region will also move along with the first region, so that the third region is located between the edge of the first region and the edge of the second region. Figure 3D As shown, when the first region slides completely out of the display window, the third region is fixed to the second side of the display window and adjacent to the second region, and the second region is fixed to the first side of the display window.

[0094] In this embodiment, by controlling the third region to move in coordination with the first and second regions during the translation of the resource interface, the third region is always displayed in the display window during the translation of the resource interface. Users can view and select the target identifier (e.g., iteration version) at any time without interrupting the current drag operation, thus ensuring the continuity and efficiency of the operation process.

[0095] To reduce the possibility of resource objects being incorrectly scheduled due to accidental touches or unintentional hovering, in one possible implementation, the specific operation process of step S204 may include: when the floating container at least partially overlaps with the second area, obtaining the first dwell time of the floating container; if the first dwell time exceeds a first preset duration, adding the relevant information of the target resource object carried by the floating container to the second area for display.

[0096] It should be noted that when the resource interface begins to pan, the floating container does not overlap with either the first or second area, and the floating container will not overlap with both areas simultaneously. In some embodiments, before triggering the panning of the resource interface, the floating container can be shrunk to effectively avoid overlapping with either the first or second area during the panning process. The positional relationship between the floating container and the second area can be detected in real time. When the first overlap between the floating container and the second area is detected, a timer can be started to obtain the first dwell time of the floating container. The first dwell time can refer to the cumulative duration during which the floating container remains within the overlapping area of ​​the second area. The first preset duration can be set to 300 milliseconds or 500 milliseconds, etc. If the first dwell time exceeds the first preset duration, the relevant information of the target resource object carried by the floating container is added to the second area for display. In some embodiments, after the relevant information of the target resource object is added to the second area for display, the floating container can be automatically deleted to release resources in a timely manner and eliminate redundant elements in the resource interface, thereby improving the user experience.

[0097] In this embodiment, by detecting the first dwell time of the floating container in the second area, the relevant information of the target resource object carried by the floating container is added to the second area for display only when the first dwell time exceeds the first preset duration, thereby improving the accuracy and fault tolerance of human-computer interaction.

[0098] In one possible implementation, the interaction method of the resource interface may further include: obtaining a second dwell time of the floating container when the floating container at least partially overlaps with the first area; if the second dwell time exceeds a second preset duration, controlling the first area of ​​the resource interface to gradually slide into the display window and the second area of ​​the resource interface to gradually slide out of the display window; and adding relevant information of the target resource object carried by the floating container to the first area for display.

[0099] When the first overlap between the floating container and the second area is detected, a timer can be started to obtain the second dwell time of the floating container. The second dwell time can refer to the cumulative duration during which the floating container remains within the area overlapping with the first area. If the second dwell time exceeds a second preset duration, the first area of ​​the resource interface is gradually slid into the display window while the second area of ​​the resource interface gradually slid out of the display window. Then, the relevant information of the target resource object carried by the floating container is returned to the first area for display. In some embodiments, the relevant information of the target resource object can be returned to its original position within the first area for display. In some embodiments, it can also be randomly added to the first area for display, thereby simplifying the logic processing of data rollback and improving response efficiency. The second preset duration can be the same as or different from the first preset duration. In some embodiments, to reduce accidental operation, the second preset duration can be set to be shorter than the first preset duration.

[0100] In this embodiment, when the floating container moves back to the first area, the hovering time (second dwell time) in the first area is detected. If it exceeds the second preset time, the resource interface is triggered to shift and the target resource object is returned to the first area for display. This effectively prevents accidental operation and enhances the security and recoverability of the interaction.

[0101] In one possible implementation, the specific operation process of step S203 may include: obtaining the current displacement vector of the floating container; if the displacement component of the current displacement vector in the first predetermined direction exceeds the target threshold, then controlling the first area of ​​the resource interface to gradually slide out of the display window along the second predetermined direction and the second area of ​​the resource interface to gradually slide into the display window along the second predetermined direction; wherein, the first predetermined direction and the second predetermined direction are opposite.

[0102] like Figure 4As shown, when a user drags a floating container corresponding to a target resource object in the resource interface (front-end interface), the starting position coordinates of the pointer can be recorded. During the dragging process, the current position coordinates of the pointer can be obtained in real time. The difference between the current position coordinates and the starting position coordinates can be calculated to obtain the current displacement vector. The current displacement vector (displacement vector) of the target resource object is reported to the displacement analysis module through the resource interface. Then, the displacement component of the current displacement vector in the first predetermined direction is compared with a target threshold. If it is determined that the displacement component exceeds the target threshold, the resource interface (viewport) is triggered to translate through the viewport control module, so that the first area of ​​the resource interface gradually slides out of the display window along the second predetermined direction and the second area of ​​the resource interface gradually slides into the display window along the second predetermined direction (i.e., the position of the resource interface is updated). The current displacement vector can refer to the vector from the starting point of the drag operation to the current point. The current displacement vector can include horizontal and vertical components. The first predetermined direction can refer to a preset direction used to identify the user's operation intention. For example, the layout of the resource interface can be that the first area is on the right and the second area is on the left. If the user's intention is to move the resource object to the second area on the left, then the first predetermined direction is left. The first predetermined direction aligns with the user's intended operation. The displacement component can refer to the projected length of the current displacement vector in the first predetermined direction. The second predetermined direction can refer to the direction of translation of the resource interface. To significantly shorten the user's operation path, the second predetermined direction can be set to be opposite to the first predetermined direction of the user's drag. For example, when the user drags to the left (the first predetermined direction is left), the resource interface translates to the right (the second predetermined direction is right). In some embodiments, the resource interface can display the relationship between the user's operation direction and the interface movement. In some embodiments, the first predetermined direction can also be the same as the second predetermined direction, or it can be another direction with a fixed angle.

[0103] In this embodiment, by obtaining the current displacement vector of the floating container, and when the displacement component of the floating container in the first predetermined direction exceeds the target threshold, the resource interface as a whole is controlled to translate along the opposite second predetermined direction, thereby realizing the sliding out of the first area of ​​the display window and the synchronous sliding in of the second area, thereby reducing operational fatigue and the risk of accidental touch. At the same time, the reverse translation animation provides visual guidance, improving the accuracy and smoothness of the interaction.

[0104] In one possible implementation, the specific operation process of step S203 may include: determining the target translation parameters of the resource interface layout container of the resource interface according to the current displacement vector; determining multiple displacement steps based on the target translation parameters; and updating the coordinate transformation attributes of the resource interface layout container frame by frame according to the displacement steps, so as to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window.

[0105] A resource interface layout container refers to a layout element within a resource interface that houses all functional areas, such as the first, second, and third regions. Target translation parameters can include the translation direction and distance. Specifically, the resource interface layout container can be obtained through DOM selectors, and its coordinate transformation properties can be modified to apply translation transformations in the form of TranslateX or Translate3d. During resource interface translation, the required target translation parameters for the resource interface layout container can be calculated based on the current displacement vector, and a smooth transition effect can be achieved by combining this with the browser's animation mechanisms. For example, when the offset generated by mouse movement (the current displacement vector) is 100 pixels, it can be decomposed into multiple displacement steps, such as moving 15 pixels each time, and the coordinate transformation properties of the resource interface layout container can be gradually updated in each frame to control the first region of the resource interface to gradually slide out of the display window and the second region of the resource interface to gradually slide into the display window.

[0106] In one possible implementation, the interaction method of the resource interface may further include: obtaining the display width and display scaling factor of the resource interface; and determining a target threshold based on a preset scaling factor, display width, and display scaling factor.

[0107] The visible width of the document root element can be obtained using `document.documentElement.clientWidth`, which serves as the display width. In some embodiments, the display width can also be obtained using the `window.innerWidth` property. The display width can refer to the width of the visible area of ​​the application window or browser viewport hosting the resource interface. The display scaling factor can refer to the visual magnification ratio of the displayed content by the operating system or browser. The pixel ratio of the current device (i.e., the ratio of physical pixels to CSS pixels) can be obtained using the `window.devicePixelRatio` property, which serves as the display scaling factor. Then, the target threshold is calculated based on the preset scaling factor, display width, and display scaling factor. The formula for calculating the target threshold can be:

[0108] Target threshold = DRAG_INTENT_RATIO × W × S

[0109] Where DRAG_INTENT_RATIO can be a preset scaling factor, W can be the display width, and S can be the display scaling factor.

[0110] In this embodiment, the target threshold is calculated by obtaining the display width and display scaling factor and combining them with a preset scaling factor, thereby effectively improving the applicability and consistency of operation on different devices.

[0111] In one possible implementation, the specific operation process of step S204 may include: obtaining the attribute information of the target resource object; determining the sorting position of the target resource object in the second area based on the attribute information; and adding the relevant information of the target resource object to the second area for display based on the sorting position.

[0112] Attribute information can include priority, identifier, creation date, due date, status label, project type, estimated working hours, and associated version number. This attribute information can also include metadata such as priority, identifier, creation date, due date, status label, project type, estimated working hours, and associated version number. The sorting position of the target resource object in the second area can be determined based on the attribute information and predefined sorting rules. For example, the sorting rule could be sorting by priority field from high to low. Then, based on the sorting position, the relevant information of the target resource object is added to the second area for display.

[0113] In this embodiment, the sorting position of the target resource object in the second region is dynamically determined based on the attribute information of the target resource object, thereby effectively reducing the need to adjust the position of the target resource object.

[0114] The above describes an interaction method for a resource interface provided by an embodiment of this application. The following will describe the apparatus for performing the above-described interaction method for a resource interface.

[0115] Please see Figure 5 , Figure 5 This is a schematic diagram of the structure of an interactive device for a resource interface provided in an embodiment of this application. (See attached diagram.) Figure 5 As shown, the interactive device 500 of the resource interface includes:

[0116] Display module 501 is used to display a first area of ​​the resource interface within a display window, the first area including relevant information of at least one resource object whose processing state is a first state;

[0117] The generation module 502 is configured to generate a floating container of the target resource object in response to a drag operation on the target resource object in the first area and control the floating container to move following the drag operation; the target resource object is any one or more of the at least one resource object displayed in the first area;

[0118] Control module 503 is configured to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window when the movement of the floating container meets preset conditions; the second area includes relevant information of at least one resource object whose processing state is a second state.

[0119] The first adding module 504 is used to add the relevant information of the target resource object carried by the floating container to the second area for display when the floating container at least partially overlaps with the second area, and to adjust the processing status of the target resource object to the second state.

[0120] In one possible implementation, the interactive device of the resource interface further includes a fixing module, which is specifically used for:

[0121] A third area of ​​the resource interface is displayed within the display window, the third area being adjacent to the first area and located on the first side of the display window;

[0122] While controlling the first region to slide out and the second region to slide in, the third region is controlled to move along with the first region, so that the third region moves from the first side to between the first region and the second region; and when the first region completely slides out of the display window, the third region is fixed to the second side of the display window and adjacent to the second region.

[0123] In one possible implementation, the first adding module 504 is specifically used for:

[0124] When the floating container at least partially overlaps with the second region, the first dwell time of the floating container is obtained;

[0125] If the first dwell time exceeds the first preset duration, the relevant information of the target resource object carried by the floating container will be added to the second area for display.

[0126] In one possible implementation, the interactive device of the resource interface further includes a second adding module, which is specifically used for:

[0127] When the floating container at least partially overlaps with the first region, the second dwell time of the floating container is obtained;

[0128] If the second dwell time exceeds the second preset duration, then the first area of ​​the resource interface is controlled to gradually slide into the display window and the second area of ​​the resource interface is controlled to gradually slide out of the display window; and

[0129] The relevant information of the target resource object carried by the floating container is added to the first area for display.

[0130] In one possible implementation, control module 503 is specifically used for:

[0131] Obtain the current displacement vector of the floating container;

[0132] If the displacement component of the current displacement vector in the first predetermined direction exceeds the target threshold, then the first area of ​​the resource interface is controlled to gradually slide out of the display window along the second predetermined direction and the second area of ​​the resource interface is controlled to gradually slide into the display window along the second predetermined direction; wherein, the first predetermined direction and the second predetermined direction are opposite.

[0133] In one possible implementation, control module 503 is specifically used for:

[0134] Based on the current displacement vector, determine the target translation parameters of the resource interface layout container of the resource interface;

[0135] Based on the target translation parameters, multiple displacement steps are determined;

[0136] According to the displacement step size, the coordinate transformation attribute of the resource interface layout container is updated frame by frame to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window.

[0137] In one possible implementation, the interactive device of the resource interface further includes a determining module, which is specifically used for:

[0138] Obtain the display width and display scaling factor of the resource interface; determine the target threshold based on the preset scaling factor, the display width, and the display scaling factor.

[0139] In one possible implementation, the interactive device of the resource interface further includes a third adding module, which is specifically used for:

[0140] Obtain the attribute information of the target resource object;

[0141] The target resource object is determined in the second area based on the attribute information, and the relevant information of the target resource object is added to the second area for display based on the sorting position.

[0142] Based on the hardware implementation of the above-mentioned program modules, and in order to implement the resource interface interaction method provided in this application embodiment, this application embodiment also provides a computer device, such as... Figure 6 As shown, the computer device 600 includes:

[0143] Central processing unit 601, memory 602, and input / output interface 603;

[0144] The memory 602 is a short-term storage memory or a persistent storage memory;

[0145] The central processing unit 601 is configured to communicate with the memory 602 and execute instructions in the memory 602 to perform any of the above-described identifier resolution methods.

[0146] Of course, in practical applications, the various components in the computer device 600 are coupled together through a bus system 604. It is understood that the bus system 604 is used to realize communication between these components. In addition to a data bus, the bus system 604 also includes a power bus, a control bus, and a status signal bus. However, for clarity, in... Figure 6 The general designated all buses as Bus System 604.

[0147] The memory 602 in this embodiment is used to store various types of data to support the operation of the computer device 600. Examples of such data include any computer program used to operate on the computer device 600.

[0148] It is understood that when the processor in the computer device described above executes the computer program, it can also realize the functions of each unit in the corresponding device embodiments described above, which will not be repeated here. Exemplarily, the computer program can be divided into one or more modules / units, one or more modules / units are stored in memory and executed by the processor to complete the various embodiments of this application. One or more modules / units can be a series of computer program instruction segments capable of performing a specific function, which describe the execution process of the computer program in the computer device. For example, the computer program can be divided into units in the aforementioned computer device, and each unit can implement the specific functions described in the corresponding computer device above.

[0149] Computer equipment can be desktop computers, laptops, handheld computers, and cloud servers, among other computing devices. Computer equipment may include, but is not limited to, processors and memory. Those skilled in the art will understand that processors and memory are merely examples of computer equipment and do not constitute a limitation on the computer equipment. It may include more or fewer components, or combinations of certain components, or different components. For example, computer equipment may also include input / output devices, network access devices, buses, etc.

[0150] A processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor. The processor is the control center of a computer device, connecting all parts of the computer device through various interfaces and lines.

[0151] Memory can be used to store computer programs and / or modules. The processor performs various functions of the computer device by running or executing the computer programs and / or modules stored in the memory, and by accessing data stored in the memory. Memory can primarily include a program storage area and a data storage area. The program storage area can store the operating system, at least one application program required for a function, etc.; the data storage area can store data created based on terminal usage, etc. Furthermore, memory can include high-speed random access memory, and can also include non-volatile memory, such as hard disks, RAM, plug-in hard disks, smart media cards (SMC), secure digital cards (SD), flash cards, at least one disk storage device, flash memory device, or other volatile solid-state storage devices.

[0152] This application also provides a computer program product including computer-readable instructions, which, when executed on an electronic device, cause the electronic device to implement any of the resource interface interaction methods provided in this application.

[0153] This application also provides a computer-readable storage medium that carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any of the resource interface interaction methods provided in this application.

[0154] It should also be noted that the device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. In addition, in the device embodiment drawings provided in this application, the connection relationship between modules indicates that they have a communication connection, which can be implemented as one or more communication buses or signal lines.

[0155] Through the above description of the embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus necessary general-purpose hardware, or it can be implemented by special-purpose hardware including application-specific integrated circuits, special-purpose CPUs, special-purpose memory, special-purpose components, etc. Generally, any function performed by a computer program can be easily implemented by corresponding hardware, and the specific hardware structure used to implement the same function can also be diverse, such as analog circuits, digital circuits, or special-purpose circuits. However, for this application, software program implementation is more often the preferred implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a readable storage medium, such as a computer floppy disk, USB flash drive, mobile hard disk, ROM, RAM, magnetic disk, or optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, training equipment, or network device, etc.) to execute the methods described in the various embodiments of this application.

[0156] In the above embodiments, the implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, in the form of a computer program product.

[0157] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are generated. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions may be transmitted from one website, computer, training device, or data center to another website, computer, training device, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium may be any available medium that a computer can store or a data storage device such as a training device or data center that integrates one or more available media. The available media may be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., DVDs), or semiconductor media (e.g., solid-state drives (SSDs)).

Claims

1. A method for interacting with a resource interface, characterized in that, include: A first area of ​​the resource interface is displayed within the display window, the first area including information related to at least one resource object whose processing state is a first state; In response to a drag operation targeting a target resource object in the first area, a floating container for the target resource object is generated and the floating container is controlled to move following the drag operation; the target resource object is any one or more of the at least one resource object displayed in the first area; When the movement of the floating container meets preset conditions, the first area of ​​the resource interface is controlled to gradually slide out of the display window and the second area of ​​the resource interface is controlled to gradually slide into the display window; the second area includes relevant information of at least one resource object whose processing state is the second state; When the floating container at least partially overlaps with the second area, the relevant information of the target resource object carried by the floating container is added to the second area for display, and the processing status of the target resource object is adjusted to the second status.

2. The method according to claim 1, characterized in that, The method further includes: A third area of ​​the resource interface is displayed within the display window, the third area being adjacent to the first area and located on the first side of the display window; While controlling the first region to slide out and the second region to slide in, the third region is controlled to move following the first region, such that the third region moves from the first side to between the first region and the second region; and When the first region slides completely out of the display window, the third region is fixed to the second side of the display window and adjacent to the second region.

3. The method according to claim 1, characterized in that, When the floating container at least partially overlaps with the second area, the relevant information of the target resource object carried by the floating container is added to the second area for display, including: When the floating container at least partially overlaps with the second region, the first dwell time of the floating container is obtained; If the first dwell time exceeds the first preset duration, the relevant information of the target resource object carried by the floating container will be added to the second area for display.

4. The method according to claim 1, characterized in that, The method further includes: When the floating container at least partially overlaps with the first region, the second dwell time of the floating container is obtained; If the second dwell time exceeds the second preset duration, then the first area of ​​the resource interface is controlled to gradually slide into the display window and the second area of ​​the resource interface is controlled to gradually slide out of the display window; and the relevant information of the target resource object carried by the floating container is added to the first area for display.

5. The method according to claim 1, characterized in that, When the movement of the floating container meets preset conditions, controlling the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window includes: Obtain the current displacement vector of the floating container; If the displacement component of the current displacement vector in the first predetermined direction exceeds the target threshold, then the first area of ​​the resource interface is controlled to gradually slide out of the display window along the second predetermined direction and the second area of ​​the resource interface is controlled to gradually slide into the display window along the second predetermined direction; wherein, the first predetermined direction and the second predetermined direction are opposite.

6. The method according to claim 5, characterized in that, Controlling the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window includes: Based on the current displacement vector, determine the target translation parameters of the resource interface layout container of the resource interface; Based on the target translation parameters, multiple displacement steps are determined; According to the displacement step size, the coordinate transformation attribute of the resource interface layout container is updated frame by frame to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window.

7. The method according to claim 5, characterized in that, The method further includes: Obtain the display width and scaling factor of the resource interface; The target threshold is determined based on a preset scaling factor, the display width, and the display scaling factor.

8. The method according to claim 1, characterized in that, The relevant information of the target resource object carried by the floating container is added to the second area for display, including: Obtain the attribute information of the target resource object; The target resource object is determined in the second area based on the attribute information, and the relevant information of the target resource object is added to the second area for display based on the sorting position.

9. An interactive device for a resource interface, characterized in that, include: The display module is used to display a first area of ​​the resource interface within a display window, the first area including information related to at least one resource object whose processing state is a first state; A generation module is configured to, in response to a drag operation on a target resource object in the first area, generate a floating container for the target resource object and control the floating container to move following the drag operation; the target resource object is any one or more of the at least one resource object displayed in the first area; The control module is configured to control the first area of ​​the resource interface to gradually slide out of the display window and the second area of ​​the resource interface to gradually slide into the display window when the movement of the floating container meets preset conditions; the second area includes relevant information of at least one resource object whose processing state is a second state. The first adding module is used to add relevant information of the target resource object carried by the floating container to the second area for display when the floating container at least partially overlaps with the second area, and to adjust the processing status of the target resource object to the second state.

10. A computer program product, characterized in that, It includes computer-readable instructions that, when executed on an electronic device, cause the electronic device to implement the interactive method of the resource interface as described in any one of claims 1 to 8.

11. An electronic device, characterized in that, It includes at least one processor and a memory connected to the processor, wherein: The memory is used to store computer programs; The processor is used to execute the computer program to enable the electronic device to implement the resource interface interaction method as described in any one of claims 1 to 8.

12. A computer storage medium, characterized in that, The storage medium carries one or more computer programs, which, when executed by an electronic device, enable the electronic device to implement the interactive method of the resource interface as described in any one of claims 1 to 8.

Images