Label management method and device, computer readable storage medium and electronic equipment

Abstract

The invention provides a label management method and device, a computer readable storage medium and electronic equipment. The method comprises the steps that the total label width and the label area width are determined, the total label width is the sum of the width of a plurality of current labels and the width of a label to be inserted, the label area width is the width of a label display area, and the current labels are one or more labels existing in the label display area; under the condition that the total label width is larger than the label area width, a current label is moved to the pull-down area; under the condition that the total label width is smaller than the label area width, the absolute value of the difference value between the total label width and the label area width is calculated, and under the condition that the absolute value of the difference value is larger than or equal to the width of the to-be-inserted label, the to-be-inserted label is inserted into the label display area. According to the invention, the problem that labels are distributed disorderly and are inconvenient to check in the prior art is solved.

Description

Technical Field

[0001] The present application relates to the technical field of tag management, and in particular to a tag management method, device, computer-readable storage medium and electronic device. Background Art

[0002] The servo drive remote monitoring system needs to monitor multiple servo drives. Each drive needs to provide multiple functions including axis data monitoring, parameter setting, fault handling, firmware upgrade and waveform acquisition. This means that a large number of tags will be generated when the system is in use, such as: Servo 1129-waveform acquisition, Servo 1128-fault handling, etc. The label area cannot accommodate so many tags, so the tags must be managed.

[0003] The commonly used multi-label management method in the prior art is to achieve label width adaptation, and reduce the label width as the number of labels increases. However, this method will hide the label information when there are too many labels, and the mouse must be moved to the label to view the label information, and only one label information can be viewed at a time, which is inconvenient to view. A multi-label processing method is also disclosed in the prior art. This method can only display one label when the number of labels exceeds the limit value. To select other labels, you must first enter the sliding control mode. After the sliding control mode input is terminated, the other labels will be hidden. Obviously, the switching of labels is not concise enough, and it is not intuitive for users to understand which labels are currently available.

[0004] It can be seen that the prior art at least has the problem that when there are too many tags, they are cluttered and difficult to view. Summary of the invention

[0005] The main purpose of the present application is to provide a tag management method, device, computer-readable storage medium and electronic device to at least solve the problem in the prior art that tags are distributed in a disorderly manner and are inconvenient to view.

[0006] In order to achieve the above-mentioned purpose, according to one aspect of the present application, a label management method is provided, comprising: a determination step: determining the total label width and the label area width, wherein the total label width is the sum of the widths of multiple current labels and the width of the label to be inserted, the label area width is the width of the label display area, and the current label is one or more labels already existing in the label display area; a first insertion step: when the total label width is greater than the label area width, moving one of the current labels to the drop-down area, and inserting the label to be inserted into the label display area; a second insertion step: when the total label width is less than the label area width, calculating the absolute value of the difference between the total label width and the label area width, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, inserting the label to be inserted into the label display area.

[0007] Optionally, determining the total width of the label and the width of the label area includes: monitoring the change in the number of labels in the label display area, and determining the existence of the label to be inserted when the number of labels changes; calculating the total width of the label by a change monitoring function, and calculating the width of the label area by a size monitoring function.

[0008] Optionally, moving the current tag to the drop-down area includes: when the last tag is not the tag corresponding to the currently displayed page, moving the last tag to the drop-down area, and inserting the tag to be inserted into the tag display area, wherein the drop-down area is hidden at the end of one side of the tag display area, and the last tag represents the tag closest to the position of the drop-down area; when the last tag is the tag corresponding to the currently displayed page, moving the previous tag of the last tag to the drop-down area.

[0009] Optionally, inserting the label to be inserted into the label display area includes: inserting the label to be inserted into the next label position of the first label in the label display area, wherein the drop-down area is hidden at the end of one side of the label display area, and the first label represents the label farthest from the position of the drop-down area.

[0010] Optionally, the method further includes: calculating the total width of the current label, wherein the total width of the current label is the sum of the widths of all the labels in the current label display area; when the total width of the current label is equal to the width of the label area and the labels in the label display area are deleted, moving the first label in the drop-down area to the label display area; when the total width of the current label is less than the width of the label area and the labels in the label display area are deleted, maintaining the current arrangement of the labels in the label display area.

[0011] Optionally, the method also includes: when a label in the drop-down area is clicked, moving one of the current labels to the drop-down area and inserting the clicked label into the label display area; when a label in the drop-down area is deleted, maintaining the current arrangement of the labels in the label display area.

[0012] Optionally, the method further includes: when the width of the label area changes, repeating the determining step, the first inserting step and the second inserting step at least once until the total width of the labels is smaller than the width of the label area, and the absolute value of the difference between the total width of the labels and the width of the label area is smaller than the width of each of the labels.

[0013] According to another aspect of the present application, a label management device is provided, including: a determination unit, used to determine the total label width and the label area width, wherein the total label width is the sum of the widths of multiple current labels and the width of a label to be inserted, the label area width is the width of a label display area, and the current label is one or more labels already existing in the label display area; a first insertion unit, used to move one of the current labels to a drop-down area and insert the label to be inserted into the label display area when the total label width is greater than the label area width; a second insertion unit, used to calculate the absolute value of the difference between the total label width and the label area width when the total label width is less than the label area width, and insert the label to be inserted into the label display area when the absolute value of the difference is greater than or equal to the width of the label to be inserted.

[0014] According to another aspect of the present application, a computer-readable storage medium is provided, wherein the computer-readable storage medium includes a stored program, wherein when the program is executed, the device where the computer-readable storage medium is located is controlled to execute any one of the label management methods.

[0015] According to another aspect of the present application, an electronic device is provided, comprising: one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and are configured to be executed by the one or more processors, and the one or more programs include means for executing any one of the tag management methods described.

[0016] Applying the technical solution of the present application, the total width of the label and the width of the label area are determined, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area; when the total width of the label is greater than the width of the label area, move a current label to the drop-down area, and insert the label to be inserted into the label display area; when the total width of the label is less than the width of the label area, calculate the absolute value of the difference between the total width of the label and the width of the label area, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, insert the label to be inserted into the label display area. Compared with the prior art where the number of labels is large and the distribution is messy, which is inconvenient to search and view, the present application uses the two parameters of the total width of the label and the width of the label area to move the labels according to the above rules when the number of labels is large, so as to ensure that the labels are neatly distributed and easy to view. Therefore, it can solve the problem of the prior art that the labels are messily distributed and inconvenient to view, and achieve the effect of arranging the labels in a regular manner. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The drawings constituting part of the present application are used to provide a further understanding of the present application. The exemplary embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0018] Figure 1 A flowchart of a tag management method provided by an embodiment of the present application is shown;

[0019] Figure 2 A schematic diagram of an application interface of a tag management method provided in an embodiment of the present application is shown;

[0020] Figure 3 A schematic diagram of an application interface of a label management method for displaying a drop-down area provided in an embodiment of the present application is shown;

[0021] Figure 4 A schematic diagram of an application interface of a tag management method when a drop-down area is expanded provided by an embodiment of the present application is shown;

[0022] Figure 5 A schematic diagram of an application interface of a tag management method when a tag in a drop-down area is clicked provided by an embodiment of the present application is shown;

[0023] Figure 6 A schematic diagram of an application interface of a label management method when the width increases provided by an embodiment of the present application is shown;

[0024] Figure 7 A schematic diagram of an application interface of a label management method when width is reduced provided by an embodiment of the present application is shown;

[0025] Figure 8 A flowchart of a specific tag management method provided in an embodiment of the present application is shown;

[0026] Fig. 9 A structural block diagram of a label management device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0027] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0028] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0029] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0030] For the convenience of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0031] Vue: is a progressive JavaScript framework for building user interfaces. Vue's core library focuses only on the view layer, making it easy to learn and integrate, and it can also be integrated with other libraries or existing projects. Vue is designed with flexibility and scalability in mind, making it adaptable to projects of all sizes.

[0032] As introduced in the background technology, in the prior art, labels are cluttered and difficult to view. To solve the problem of cluttered and difficult to view labels, the embodiments of the present application provide a label management method, device, computer-readable storage medium, and electronic device.

[0033] The technical solutions in the embodiments of the present invention will be described clearly and completely below in conjunction with the accompanying drawings in the embodiments of the present invention.

[0034] In this embodiment, a tag management method running on a mobile terminal, a computer terminal or a similar computing device is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0035] Figure 1 is a flow chart of a tag management method according to an embodiment of the present application. Figure 1 As shown, the method comprises the following steps:

[0036] Step S201, determination step: determining the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels already existing in the label display area;

[0037] Specifically, this solution proposes the "compareWidth" algorithm to automatically execute the above tag management method. The implementation logic of the algorithm is: real-time monitoring of the total width of the tag and the width of the tag area. When any change occurs, the algorithm "compareWidth" will be called to adjust the tags in the tag display area and the drop-down area. Therefore, the "compareWidth" method requires two parameters: the total width of the tag and the width of the tag area. In the specific implementation process, Figure 2 The following is a schematic diagram of the application interface of a tag management method. The left side is the menu area, and the right side is the tool area, tag area and content area from top to bottom. The tags in the tag area are assumed to have the following current tags: home page, tag five, tag four, tag three and tag two. The total tag width = home page + tag five + tag four + tag three + tag two + tag to be inserted (the sum of the widths of each tag); the tag area width = home page + tag five + tag four + tag three + tag two + tag interval width = the width of the tag area; the tag interval width is for example: the interval between tag five and tag four, the interval between tag two and the right edge, and the width of all the intervals in the tag area. It should be noted that the position of the home page tag is unchanged. The width of each tag can be determined according to the length of the text in the tag.

[0038] Step S202, a first inserting step: when the total width of the above-mentioned labels is greater than the width of the above-mentioned label area, moving one of the above-mentioned current labels to the drop-down area, and inserting the above-mentioned label to be inserted into the above-mentioned label display area;

[0039] Specifically, this solution uses a drop-down area to hide redundant labels, so there is no need to change the width of the label. The labels in the drop-down area can all be displayed when the mouse is hovered, and the labels in the drop-down area also have click jump and delete functions, which are easy to operate. The total width of the labels is greater than the width of the above label area, which means that if the labels to be inserted are inserted into the above label display area, there will be no spacing between each label, and it will still exceed Figure 2 Therefore, the current label is moved to the drop-down area to leave enough width for the label to be inserted, and the label to be inserted is inserted into the label display area. In actual application, the user can also directly insert the label to be inserted into the drop-down area according to his own preferences, but the label to be inserted is not easy to be viewed.

[0040] Step S203, the second insertion step: when the total width of the above-mentioned label is smaller than the width of the above-mentioned label area, calculate the absolute value of the difference between the total width of the above-mentioned label and the width of the above-mentioned label area, and when the absolute value of the above-mentioned difference is greater than or equal to the width of the above-mentioned label to be inserted, insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0041] Specifically, the total width of the label is less than the width of the label area. Figure 2 There is still remaining width in the label area, but whether the absolute value of the remaining width, that is, the difference between the total label width and the width of the above-mentioned label area, is sufficient to insert the label to be inserted, it is also necessary to judge whether the absolute value of the difference is greater than or equal to the width of the above-mentioned label to be inserted. If it is greater than or equal to, it can be inserted. If it is less than, you can move the above-mentioned current label to the drop-down area according to the above-mentioned step S202, and insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0042] Through this embodiment, the total width of the label and the width of the label area are determined, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area; when the total width of the label is greater than the width of the label area, move a current label to the drop-down area, and insert the label to be inserted into the label display area; when the total width of the label is less than the width of the label area, calculate the absolute value of the difference between the total width of the label and the width of the label area, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, insert the label to be inserted into the label display area. Compared with the prior art where the number of labels is large and the distribution is messy, which is inconvenient to search and view, this application uses the two parameters of the total width of the label and the width of the label area to move the labels according to the above rules when the number of labels is large, so as to ensure that the label distribution is neat and easy to view. Therefore, it can solve the problem of the prior art that the labels are messy and inconvenient to view, and achieve the effect of arranging the labels in a regular manner.

[0043] In the specific implementation process, the above step S201 determines the total width of the label and the width of the label area, which can be achieved through the following steps: Step S2011: monitor the change in the number of labels in the above label display area, and determine the existence of the above label to be inserted when the number of the above labels changes; Step S2012: calculate the total width of the above labels through the change monitoring function, and calculate the width of the above label area through the size monitoring function. This method implements the above steps to monitor the change in the number of labels, and determines the arrangement of the labels according to the above rules when the change occurs, so that the position of the labels can be adjusted in real time and sensitively.

[0044] Specifically, this solution uses the Vue framework and ElementPlus. In terms of appearance display, this solution uses the el-tag component to create tags. Real-time monitoring of the tag display area ( Figure 2 The number of labels in the label area (the number of labels here only includes the el-tag component, that is, the number of labels displayed in the label area) changes and the width of the label area. When any change occurs, the above algorithm "compareWidth" will be called to adjust the label content of the label area and the drop-down menu. The monitoring of the number of labels in the label area is implemented through the MutationObserver (change monitoring function) method in JavaScript. First, a MutationObserver object is created and used to monitor changes in the el-tag component (add or delete labels, where the labels do not include labels in the drop-down menu). When a change occurs, the total width of the label is calculated and the width of the label area calculated by the ResizeObserver (size monitoring function) method is obtained, and the total width of the label and the width of the label area are used as parameters to call the compareWidth method. The monitoring of the width of the label area is implemented through the ResizeObserver method in JavaScript. Create a ResizeObserver instance and use it to monitor the div element (label area) outside the el-tag tag. When the width of the div element changes (the browser window size changes), the label area width is automatically calculated and the total label width calculated by the MutationObserver method is obtained. The label area width and the total label width are used as parameters to call the compareWidth method. This solution not only monitors the number of labels in real time, but also monitors the width of the label area in real time. When the width of the label area changes (caused by changes in the size of the browser window), the core method of this solution is automatically called to change the labels in the label display area and the drop-down area (move the label from the drop-down area to the label display area or vice versa). This method is very real-time and sensitive, so in theory, no matter how the window size changes, there will be no problem of messy label distribution.

[0045] In some optional final implementations, the above step S202 moves the above current tag to the drop-down area, which can be achieved by the following steps: Step S2021: When the last tag is not the tag corresponding to the currently displayed page, move the above last tag to the above drop-down area, and insert the above tag to be inserted into the above tag display area, wherein the above drop-down area is hidden at the end of one side of the above tag display area, and the above last tag represents the tag closest to the position of the above drop-down area; Step S2022: When the above last tag is the tag corresponding to the currently displayed page, move the previous tag of the above last tag to the above drop-down area. The method moves the current tag through the above steps, so that the position of the tag can be adjusted in real time to prevent the tag from being cluttered.

[0046] Specifically, a drop-down area is created by using the el-dropdown component at the far right of the label. When the number of labels is small and does not exceed the label area, the icon of the drop-down area is hidden (as mentioned above). Figure 2 ), the drop-down area (called the drop-down area in the figure) will be displayed only when a label enters the drop-down area, such as Figure 3 As shown, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label 6, Label 5, Label 4 and Label 3, and the remaining labels are in the drop-down area represented by ellipsis. The trigger mode of the drop-down area is hover, that is, when the mouse hovers over the drop-down area icon, the drop-down area will be expanded to display all hidden labels. By default, the last label (the last label) in the label display area is moved into the drop-down area. If the last label is the label corresponding to the current page (content area), the second to last label (the label before the last label) is moved into the drop-down area, that is, the label corresponding to the current page must be displayed in the label area.

[0047] In some optional implementations, inserting the tag to be inserted into the tag display area in step S202 or step S203 can be achieved by the following steps: inserting the tag to be inserted into the next tag position of the first tag in the tag display area, wherein the drop-down area is hidden at the end of one side of the tag display area, and the first tag represents the tag farthest from the drop-down area. The method inserts the tag to be inserted into the movable tag area by default through the above steps, so that the tag display area can be ensured to have a fixed area and an active area, and be neatly divided.

[0048] In the specific implementation process, Figure 2 or Figure 3 As shown in the figure, the first label is "Home", so keep the label unchanged. Therefore, insert the label to be inserted into the label position next to the first label in the label display area. Figure 4As shown, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label Six, Label Five, Label Four and Label Three, and the remaining Label Two is in the drop-down area (drop-down menu).

[0049] In some optional implementations, the method further includes the following steps: step S204: calculating the total width of the current label, wherein the total width of the current label is the sum of the widths of all the labels in the current label display area; step S205: when the total width of the current label is equal to the width of the label area and the label in the label display area is deleted, moving the first label in the drop-down area to the label display area; step S206: when the total width of the current label is less than the width of the label area and the label in the label display area is deleted, maintaining the current arrangement of the labels in the label display area. The method adjusts the arrangement of the labels through the above steps, so that the arrangement of the labels can be neater.

[0050] Specifically, when a label is deleted in the label display area, the compareWidth method will also be called to calculate the total width of the current labels and determine whether the first label in the drop-down area can be moved into the label display area. When the total width of the current labels is equal to the width of the above-mentioned label area and the label in the above-mentioned label display area is deleted, it means that after deleting a label, there is free width in the label display area to insert a label. Therefore, the first label in the drop-down area is moved to the above-mentioned label display area until no more labels can be moved into the label display area. When the total width of the current labels is less than the width of the above-mentioned label area and the label in the above-mentioned label display area is deleted, it means that the label display area had free width before deletion, and even the label display area is not full and the drop-down area is not used. Therefore, when deleting the label, it is sufficient to keep the current arrangement of the labels in the above-mentioned label display area.

[0051] In some optional implementations, the method further includes the following steps: Step S207: when a tag in the drop-down area is clicked, move one of the current tags to the drop-down area, and insert the clicked tag into the tag display area; Step S208: when a tag in the drop-down area is deleted, keep the current arrangement of the tags in the tag display area. The method manages the tags in the drop-down area through the above steps, so that the tags can be kept neat and orderly.

[0052] In the specific implementation process, when a label in the drop-down menu is clicked, the label will be moved into the label area, such as Figure 5As shown in the figure, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label 3, Label 6, Label 5, and the drop-down area is Label 4 and Label 2. Label 3 is clicked, and then the compareWidth method is called cyclically as above to move Label 3 to the position behind the home page, and Label 4 is moved from the label display area to the drop-down area. When a label in the drop-down menu is deleted, no additional operation is required.

[0053] In some optional implementations, the method further includes the following steps: Step S209: When the width of the label area changes, the determination step, the first insertion step, and the second insertion step are repeated at least once until the total width of the labels is smaller than the width of the label area, and the absolute value of the difference between the total width of the labels and the width of the label area is smaller than the width of each of the labels. When the width of the label area changes, the method also uses the algorithm to make adjustments, so that the label position can be flexibly adjusted.

[0054] Specifically, under normal circumstances, the width of the tab area remains unchanged. However, when the browser window size changes, causing the tab area width to change, the compareWidth method will also be called. If there is insufficient space, the tabs in the tab display area will be moved into the drop-down area, such as Figure 6 As shown in the figure, the window width increases, and the tabs in the drop-down area can be released and moved to the tab area until the tab area is wide enough but cannot accommodate more tabs. The left side is the menu area, and the right side is the tool area, tab area, and content area from top to bottom. At this time, the current tabs are: Home, Tab 6, Tab 5, Tab 4, Tab 3, Tab 2, and there is no drop-down area. Or as Figure 7 As shown, the window width is reduced and some tabs are hidden in the drop-down menu. At this time, the current tabs are: Home, Tab Six, Tab Five, Tab Four, and the drop-down area is Tab Three and Tab Two.

[0055] In order to enable those skilled in the art to more clearly understand the technical solution of the present application, the implementation process of the tag management method of the present application will be described in detail below in combination with specific embodiments.

[0056] This embodiment relates to a specific tag management method, such as Figure 8 As shown, the following steps are included:

[0057] Step S1: Detect addition, deletion or window width change;

[0058] Step S2: call compareWidth;

[0059] Step S3: Has the equilibrium state been reached? (The equilibrium state refers to the state where there is enough space in the label area of ​​the current image and the labels do not need to be hidden, or the label area has enough width but is not enough to accommodate the labels in the drop-down menu) If yes, execute step S4; if not, execute step S2;

[0060] Step S4: Continue to monitor the changes of the label (total label width) and the window width (label area width).

[0061] The embodiment of the present application also provides a label management device. It should be noted that the label management device of the embodiment of the present application can be used to execute the label management method provided by the embodiment of the present application. The device is used to implement the above-mentioned embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the term "module" can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0062] The following is an introduction to the label management device provided in an embodiment of the present application.

[0063] Fig. 9 is a schematic diagram of a label management device according to an embodiment of the present application. Fig. 9 As shown, the device comprises:

[0064] The determination unit 10 is used to determine the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area;

[0065] Specifically, this solution proposes the "compareWidth" algorithm to automatically execute the above tag management method. The implementation logic of the algorithm is: real-time monitoring of the total width of the tag and the width of the tag area. When any change occurs, the algorithm "compareWidth" will be called to adjust the tags in the tag display area and the drop-down area. Therefore, the "compareWidth" method requires two parameters: the total width of the tag and the width of the tag area. In the specific implementation process, Figure 2The following is a schematic diagram of the application interface of a tag management method. The left side is the menu area, and the right side is the tool area, tag area and content area from top to bottom. The tags in the tag area are assumed to have the following current tags: home page, tag five, tag four, tag three and tag two. The total tag width = home page + tag five + tag four + tag three + tag two + tag to be inserted (the sum of the widths of each tag); the tag area width = home page + tag five + tag four + tag three + tag two + tag interval width = the width of the tag area; the tag interval width is for example: the interval between tag five and tag four, the interval between tag two and the right edge, and the width of all the intervals in the tag area. It should be noted that the position of the home page tag is unchanged. The width of each tag can be determined according to the length of the text in the tag.

[0066] A first inserting unit 20, used for moving one of the current labels to the drop-down area and inserting the label to be inserted into the label display area when the total width of the labels is greater than the width of the label area;

[0067] Specifically, this solution uses a drop-down area to hide redundant labels, so there is no need to change the width of the label. The labels in the drop-down area can all be displayed when the mouse is hovered, and the labels in the drop-down area also have click jump and delete functions, which are easy to operate. The total width of the labels is greater than the width of the above label area, which means that if the labels to be inserted are inserted into the above label display area, there will be no spacing between each label, and it will still exceed Figure 2 Therefore, the current label is moved to the drop-down area to leave enough width for the label to be inserted, and the label to be inserted is inserted into the label display area. In actual application, the user can also directly insert the label to be inserted into the drop-down area according to his own preferences, but the label to be inserted is not easy to be viewed.

[0068] The second inserting unit 30 is used for the second inserting step: when the total width of the above-mentioned label is smaller than the width of the above-mentioned label area, the absolute value of the difference between the total width of the above-mentioned label and the width of the above-mentioned label area is calculated; when the absolute value of the above-mentioned difference is greater than or equal to the width of the above-mentioned label to be inserted, the above-mentioned label to be inserted is inserted into the above-mentioned label display area.

[0069] Specifically, the total width of the label is less than the width of the label area. Figure 2 There is still remaining width in the label area, but whether the absolute value of the remaining width, that is, the difference between the total label width and the width of the above-mentioned label area, is sufficient to insert the label to be inserted, it is also necessary to judge whether the absolute value of the difference is greater than or equal to the width of the above-mentioned label to be inserted. If it is greater than or equal to, it can be inserted. If it is less than, you can move the above-mentioned current label to the drop-down area according to the above-mentioned step S202, and insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0070] Through this embodiment, the total width of the label and the width of the label area are determined, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area; when the total width of the label is greater than the width of the label area, move a current label to the drop-down area, and insert the label to be inserted into the label display area; when the total width of the label is less than the width of the label area, calculate the absolute value of the difference between the total width of the label and the width of the label area, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, insert the label to be inserted into the label display area. Compared with the prior art where the number of labels is large and the distribution is messy, which is inconvenient to search and view, this application uses the two parameters of the total width of the label and the width of the label area to move the labels according to the above rules when the number of labels is large, so as to ensure that the label distribution is neat and easy to view. Therefore, it can solve the problem of the prior art that the labels are messy and inconvenient to view, and achieve the effect of arranging the labels in a regular manner.

[0071] In the specific implementation process, the determination unit includes a first determination module and a calculation module. The first determination module is used to monitor the change in the number of labels in the above-mentioned label display area. When the number of the above-mentioned labels changes, it is determined that there are the above-mentioned labels to be inserted; the calculation module is used to calculate the total width of the above-mentioned labels through a change monitoring function, and calculate the width of the above-mentioned label area through a size monitoring function. The method implements the above steps to monitor the change in the number of labels, and determines the arrangement of the labels according to the above-mentioned rules in the case of changes, and can adjust the position of the labels in real time and sensitively.

[0072] Specifically, this solution uses the Vue framework and ElementPlus. In terms of appearance display, this solution uses the el-tag component to create tags. Real-time monitoring of the tag display area ( Figure 2The number of labels in the label area (the number of labels here only includes the el-tag component, that is, the number of labels displayed in the label area) changes and the width of the label area. When any change occurs, the above algorithm "compareWidth" will be called to adjust the label content of the label area and the drop-down menu. The monitoring of the number of labels in the label area is implemented through the MutationObserver (change monitoring function) method in JavaScript. First, a MutationObserver object is created and used to monitor changes in the el-tag component (add or delete labels, where the labels do not include labels in the drop-down menu). When a change occurs, the total width of the label is calculated and the width of the label area calculated by the ResizeObserver (size monitoring function) method is obtained, and the total width of the label and the width of the label area are used as parameters to call the compareWidth method. The monitoring of the width of the label area is implemented through the ResizeObserver method in JavaScript. Create a ResizeObserver instance and use it to monitor the div element (label area) outside the el-tag tag. When the width of the div element changes (the browser window size changes), the label area width is automatically calculated and the total label width calculated by the MutationObserver method is obtained. The label area width and the total label width are used as parameters to call the compareWidth method. This solution not only monitors the number of labels in real time, but also monitors the width of the label area in real time. When the width of the label area changes (caused by changes in the size of the browser window), the core method of this solution is automatically called to change the labels in the label display area and the drop-down area (move the label from the drop-down area to the label display area or vice versa). This method is very real-time and sensitive, so in theory, no matter how the window size changes, there will be no problem of messy label distribution.

[0073] In some optional final implementations, the first insertion unit includes a first insertion module and a moving module. The first insertion module is used to move the last tag to the drop-down area when the last tag is not the tag corresponding to the current display page, and insert the tag to be inserted into the tag display area, wherein the drop-down area is hidden at the end of one side of the tag display area, and the last tag represents the tag closest to the drop-down area; the moving module is used to move the previous tag of the last tag to the drop-down area when the last tag is the tag corresponding to the current display page. The method moves the current tag through the above steps, so that the position of the tag can be adjusted in real time to prevent the tag from being cluttered.

[0074] Specifically, a drop-down area is created by using the el-dropdown component at the far right of the label. When the number of labels is small and does not exceed the label area, the icon of the drop-down area is hidden (as mentioned above). Figure 2 ), the drop-down area (called the drop-down area in the figure) will be displayed only when a label enters the drop-down area, such as Figure 3 As shown, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label 6, Label 5, Label 4 and Label 3, and the remaining labels are in the drop-down area represented by ellipsis. The trigger mode of the drop-down area is hover, that is, when the mouse hovers over the drop-down area icon, the drop-down area will be expanded to display all hidden labels. By default, the last label (the last label) in the label display area is moved into the drop-down area. If the last label is the label corresponding to the current page (content area), the second to last label (the label before the last label) is moved into the drop-down area, that is, the label corresponding to the current page must be displayed in the label area.

[0075] In some optional embodiments, the second insertion unit includes a second insertion module, which is used to insert the label to be inserted into the next label position of the first label in the label display area, wherein the drop-down area is hidden at the end of one side of the label display area, and the first label represents the label farthest from the position of the drop-down area. The method inserts the label to be inserted into the movable label area by default through the above steps, so that the label display area can be divided neatly into a fixed area and a movable area.

[0076] In the specific implementation process, Figure 2 or Figure 3 As shown in the figure, the first label is "Home", so keep the label unchanged. Therefore, insert the label to be inserted into the label position next to the first label in the label display area. Figure 4 As shown, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label Six, Label Five, Label Four and Label Three, and the remaining Label Two is in the drop-down area (drop-down menu).

[0077] In some optional embodiments, the method further includes a calculation unit, a moving unit and a first holding unit, wherein the calculation unit is used to calculate the total width of the current label, wherein the total width of the current label is the sum of the widths of all the labels in the current label display area; the moving unit is used to move the first label in the drop-down area to the label display area when the total width of the current label is equal to the width of the label area and the labels in the label display area are deleted; the first holding unit is used to maintain the current arrangement of the labels in the label display area when the total width of the current label is less than the width of the label area and the labels in the label display area are deleted. The method adjusts the arrangement of the labels through the above steps, so that the arrangement of the labels can be neater.

[0078] Specifically, when a label is deleted in the label display area, the compareWidth method will also be called to calculate the total width of the current labels and determine whether the first label in the drop-down area can be moved into the label display area. When the total width of the current labels is equal to the width of the above-mentioned label area and the label in the above-mentioned label display area is deleted, it means that after deleting a label, there is free width in the label display area to insert a label. Therefore, the first label in the drop-down area is moved to the above-mentioned label display area until no more labels can be moved into the label display area. When the total width of the current labels is less than the width of the above-mentioned label area and the label in the above-mentioned label display area is deleted, it means that the label display area had free width before deletion, and even the label display area is not full and the drop-down area is not used. Therefore, when deleting the label, it is sufficient to keep the current arrangement of the labels in the above-mentioned label display area.

[0079] In some optional implementations, the method further includes a third insertion unit and a second holding unit, wherein the third insertion unit is used to move one of the current tags to the drop-down area when a tag in the drop-down area is clicked, and insert the clicked tag into the tag display area; and the second holding unit is used to maintain the current arrangement of tags in the tag display area when a tag in the drop-down area is deleted. The method manages the tags in the drop-down area through the above steps, so that the tags can be kept neat and orderly.

[0080] In the specific implementation process, when a label in the drop-down menu is clicked, the label will be moved into the label area, such as Figure 5As shown in the figure, the left side is the menu area, and the right side is the tool area, label area and content area from top to bottom. At this time, the current labels are: Home, Label 3, Label 6, Label 5, and the drop-down area is Label 4 and Label 2. Label 3 is clicked, and then the compareWidth method is called cyclically as above to move Label 3 to the position behind the home page, and Label 4 is moved from the label display area to the drop-down area. When a label in the drop-down menu is deleted, no additional operation is required.

[0081] In some optional embodiments, the method further includes an execution unit, which is used to repeat the determination step, the first insertion step and the second insertion step at least once when the width of the label area changes, until the total width of the labels is smaller than the width of the label area, and the absolute value of the difference between the total width of the labels and the width of the label area is smaller than the width of each of the labels. When the width of the label area changes, the method also uses the algorithm to make adjustments, so that the label position can be flexibly adjusted.

[0082] Specifically, under normal circumstances, the width of the tab area remains unchanged. However, when the browser window size changes, causing the tab area width to change, the compareWidth method will also be called. If there is insufficient space, the tabs in the tab display area will be moved into the drop-down area, such as Figure 6 As shown in the figure, the window width increases, and the tabs in the drop-down area can be released and moved to the tab area until the tab area is wide enough but cannot accommodate more tabs. The left side is the menu area, and the right side is the tool area, tab area, and content area from top to bottom. At this time, the current tabs are: Home, Tab 6, Tab 5, Tab 4, Tab 3, Tab 2, and there is no drop-down area. Or as Figure 7 As shown, the window width is reduced and some tabs are hidden in the drop-down menu. At this time, the current tabs are: Home, Tab Six, Tab Five, Tab Four, and the drop-down area is Tab Three and Tab Two.

[0083] The label management device includes a processor and a memory, and the determination unit, the first insertion unit, the second insertion unit, etc. are all stored in the memory as program units, and the processor executes the program units stored in the memory to implement corresponding functions. The modules are all located in the same processor; or, the modules are located in different processors in any combination.

[0084] The processor includes a kernel, which calls the corresponding program unit from the memory. The kernel can be set to one or more, and the label position can be adjusted and managed by adjusting the kernel parameters.

[0085] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0086] An embodiment of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium includes a stored program, wherein when the program is executed, the device where the computer-readable storage medium is located is controlled to execute the tag management method.

[0087] Specifically, the tag management method includes:

[0088] Step S201, determination step: determining the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels already existing in the label display area;

[0089] Specifically, this solution proposes the "compareWidth" algorithm to automatically execute the above tag management method. The implementation logic of the algorithm is: real-time monitoring of the total width of the tag and the width of the tag area. When any change occurs, the algorithm "compareWidth" will be called to adjust the tags in the tag display area and the drop-down area. Therefore, the "compareWidth" method requires two parameters: the total width of the tag and the width of the tag area. In the specific implementation process, Figure 2 The following is a schematic diagram of the application interface of a tag management method. The left side is the menu area, and the right side is the tool area, tag area and content area from top to bottom. The tags in the tag area are assumed to have the following current tags: home page, tag five, tag four, tag three and tag two. The total tag width = home page + tag five + tag four + tag three + tag two + tag to be inserted (the sum of the widths of each tag); the tag area width = home page + tag five + tag four + tag three + tag two + tag interval width = the width of the tag area; the tag interval width is for example: the interval between tag five and tag four, the interval between tag two and the right edge, and the width of all the intervals in the tag area. It should be noted that the position of the home page tag is unchanged. The width of each tag can be determined according to the length of the text in the tag.

[0090] Step S202, a first inserting step: when the total width of the above-mentioned labels is greater than the width of the above-mentioned label area, moving one of the above-mentioned current labels to the drop-down area, and inserting the above-mentioned label to be inserted into the above-mentioned label display area;

[0091] Specifically, this solution uses a drop-down area to hide redundant labels, so there is no need to change the width of the label. The labels in the drop-down area can all be displayed when the mouse is hovered, and the labels in the drop-down area also have click jump and delete functions, which are easy to operate. The total width of the labels is greater than the width of the above label area, which means that if the labels to be inserted are inserted into the above label display area, there will be no spacing between each label, and it will still exceed Figure 2 Therefore, the current label is moved to the drop-down area to leave enough width for the label to be inserted, and the label to be inserted is inserted into the label display area. In actual application, the user can also directly insert the label to be inserted into the drop-down area according to his own preferences, but the label to be inserted is not easy to be viewed.

[0092] Step S203, the second insertion step: when the total width of the above-mentioned label is smaller than the width of the above-mentioned label area, calculate the absolute value of the difference between the total width of the above-mentioned label and the width of the above-mentioned label area, and when the absolute value of the above-mentioned difference is greater than or equal to the width of the above-mentioned label to be inserted, insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0093] Specifically, the total width of the label is less than the width of the label area. Figure 2 There is still remaining width in the label area, but whether the absolute value of the remaining width, that is, the difference between the total label width and the width of the above-mentioned label area, is sufficient to insert the label to be inserted, it is also necessary to judge whether the absolute value of the difference is greater than or equal to the width of the above-mentioned label to be inserted. If it is greater than or equal to, it can be inserted. If it is less than, you can move the above-mentioned current label to the drop-down area according to the above-mentioned step S202, and insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0094] An embodiment of the present invention provides an electronic device, including a processor, a memory, and a program stored in the memory and executable on the processor, wherein when the processor executes the program, at least the following steps are implemented:

[0095] Step S201, determination step: determining the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels already existing in the label display area;

[0096] Specifically, this solution proposes the "compareWidth" algorithm to automatically execute the above tag management method. The implementation logic of the algorithm is: real-time monitoring of the total width of the tag and the width of the tag area. When any change occurs, the algorithm "compareWidth" will be called to adjust the tags in the tag display area and the drop-down area. Therefore, the "compareWidth" method requires two parameters: the total width of the tag and the width of the tag area. In the specific implementation process, Figure 2 The following is a schematic diagram of the application interface of a tag management method. The left side is the menu area, and the right side is the tool area, tag area and content area from top to bottom. The tags in the tag area are assumed to have the following current tags: home page, tag five, tag four, tag three and tag two. The total tag width = home page + tag five + tag four + tag three + tag two + tag to be inserted (the sum of the widths of each tag); the tag area width = home page + tag five + tag four + tag three + tag two + tag interval width = the width of the tag area; the tag interval width is for example: the interval between tag five and tag four, the interval between tag two and the right edge, and the width of all the intervals in the tag area. It should be noted that the position of the home page tag is unchanged. The width of each tag can be determined according to the length of the text in the tag.

[0097] Step S202, a first inserting step: when the total width of the above-mentioned labels is greater than the width of the above-mentioned label area, moving one of the above-mentioned current labels to the drop-down area, and inserting the above-mentioned label to be inserted into the above-mentioned label display area;

[0098] Specifically, this solution uses a drop-down area to hide redundant labels, so there is no need to change the width of the label. The labels in the drop-down area can all be displayed when the mouse is hovered, and the labels in the drop-down area also have click jump and delete functions, which are easy to operate. The total width of the labels is greater than the width of the above label area, which means that if the labels to be inserted are inserted into the above label display area, there will be no spacing between each label, and it will still exceed Figure 2 Therefore, the current label is moved to the drop-down area to leave enough width for the label to be inserted, and the label to be inserted is inserted into the label display area. In actual application, the user can also directly insert the label to be inserted into the drop-down area according to his own preferences, but the label to be inserted is not easy to be viewed.

[0099] Step S203, the second insertion step: when the total width of the above-mentioned label is smaller than the width of the above-mentioned label area, calculate the absolute value of the difference between the total width of the above-mentioned label and the width of the above-mentioned label area, and when the absolute value of the above-mentioned difference is greater than or equal to the width of the above-mentioned label to be inserted, insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0100] Specifically, the total width of the label is less than the width of the label area. Figure 2 There is still remaining width in the label area, but whether the absolute value of the remaining width, that is, the difference between the total label width and the width of the above-mentioned label area, is sufficient to insert the label to be inserted, it is also necessary to judge whether the absolute value of the difference is greater than or equal to the width of the above-mentioned label to be inserted. If it is greater than or equal to, it can be inserted. If it is less than, you can move the above-mentioned current label to the drop-down area according to the above-mentioned step S202, and insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0101] The devices in this article can be servers, PCs, PADs, mobile phones, etc.

[0102] The present application also provides a computer program product, including a computer program. When the computer program is executed by a processor, the steps of the above method in each embodiment of the present application are implemented:

[0103] Step S201, determination step: determining the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels already existing in the label display area;

[0104] Specifically, this solution proposes the "compareWidth" algorithm to automatically execute the above tag management method. The implementation logic of the algorithm is: real-time monitoring of the total width of the tag and the width of the tag area. When any change occurs, the algorithm "compareWidth" will be called to adjust the tags in the tag display area and the drop-down area. Therefore, the "compareWidth" method requires two parameters: the total width of the tag and the width of the tag area. In the specific implementation process, Figure 2 The following is a schematic diagram of the application interface of a tag management method. The left side is the menu area, and the right side is the tool area, tag area and content area from top to bottom. The tags in the tag area are assumed to have the following current tags: home page, tag five, tag four, tag three and tag two. The total tag width = home page + tag five + tag four + tag three + tag two + tag to be inserted (the sum of the widths of each tag); the tag area width = home page + tag five + tag four + tag three + tag two + tag interval width = the width of the tag area; the tag interval width is for example: the interval between tag five and tag four, the interval between tag two and the right edge, and the width of all the intervals in the tag area. It should be noted that the position of the home page tag is unchanged. The width of each tag can be determined according to the length of the text in the tag.

[0105] Step S202, a first inserting step: when the total width of the above-mentioned labels is greater than the width of the above-mentioned label area, moving one of the above-mentioned current labels to the drop-down area, and inserting the above-mentioned label to be inserted into the above-mentioned label display area;

[0106] Specifically, this solution uses a drop-down area to hide redundant labels, so there is no need to change the width of the label. The labels in the drop-down area can all be displayed when the mouse is hovered, and the labels in the drop-down area also have click jump and delete functions, which are easy to operate. The total width of the labels is greater than the width of the above label area, which means that if the labels to be inserted are inserted into the above label display area, there will be no spacing between each label, and it will still exceed Figure 2 Therefore, the current label is moved to the drop-down area to leave enough width for the label to be inserted, and the label to be inserted is inserted into the label display area. In actual application, the user can also directly insert the label to be inserted into the drop-down area according to his own preferences, but the label to be inserted is not easy to be viewed.

[0107] Step S203, the second insertion step: when the total width of the above-mentioned label is smaller than the width of the above-mentioned label area, calculate the absolute value of the difference between the total width of the above-mentioned label and the width of the above-mentioned label area, and when the absolute value of the above-mentioned difference is greater than or equal to the width of the above-mentioned label to be inserted, insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0108] Specifically, the total width of the label is less than the width of the label area. Figure 2 There is still remaining width in the label area, but whether the absolute value of the remaining width, that is, the difference between the total label width and the width of the above-mentioned label area, is sufficient to insert the label to be inserted, it is also necessary to judge whether the absolute value of the difference is greater than or equal to the width of the above-mentioned label to be inserted. If it is greater than or equal to, it can be inserted. If it is less than, you can move the above-mentioned current label to the drop-down area according to the above-mentioned step S202, and insert the above-mentioned label to be inserted into the above-mentioned label display area.

[0109] Obviously, those skilled in the art should understand that the above modules or steps of the present invention can be implemented by a general computing device, they can be concentrated on a single computing device, or distributed on a network composed of multiple computing devices, they can be implemented by a program code executable by a computing device, so that they can be stored in a storage device and executed by the computing device, and in some cases, the steps shown or described can be executed in a different order than here, or they can be made into individual integrated circuit modules, or multiple modules or steps therein can be made into a single integrated circuit module for implementation. Thus, the present invention is not limited to any specific combination of hardware and software.

[0110] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0111] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0112] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0113] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0114] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0115] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0116] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0117] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0118] From the above description, it can be seen that the above embodiments of the present application achieve the following technical effects:

[0119] 1) In the label management method of the present application, the total label width and the label area width are determined, wherein the total label width is the sum of the widths of multiple current labels and the width of the label to be inserted, the label area width is the width of the label display area, and the current label is one or more labels that already exist in the label display area; when the total label width is greater than the label area width, move a current label to the drop-down area, and insert the label to be inserted into the label display area; when the total label width is less than the label area width, calculate the absolute value of the difference between the total label width and the label area width, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, insert the label to be inserted into the label display area. Compared with the prior art where the number of labels is large and the distribution is messy, which is inconvenient to search and view, the present application uses the two parameters of the total label width and the label area width to move the labels according to the above rules when the number of labels is large, so as to ensure that the labels are neatly distributed and easy to view. Therefore, the problem of the prior art that the labels are messily distributed and inconvenient to view can be solved, and the effect of arranging the labels in a regular manner can be achieved.

[0120] 2) In the label management device of the present application, the total width of the label and the width of the label area are determined, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area; when the total width of the label is greater than the width of the label area, move a current label to the drop-down area, and insert the label to be inserted into the label display area; when the total width of the label is less than the width of the label area, calculate the absolute value of the difference between the total width of the label and the width of the label area, and when the absolute value of the difference is greater than or equal to the width of the label to be inserted, insert the label to be inserted into the label display area. Compared with the prior art where the number of labels is large and the distribution is messy, which is inconvenient to search and view, the present application uses the two parameters of the total width of the label and the width of the label area to move the labels according to the above rules when the number of labels is large, so as to ensure that the labels are neatly distributed and easy to view. Therefore, the problem of the prior art that the labels are messily distributed and inconvenient to view can be solved, and the effect of arranging the labels in a regular manner can be achieved.

[0121] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A tag management method, characterized in that: include: Determining step: determining the total width of the label and the width of the label area, wherein the total width of the label is the sum of the widths of multiple current labels and the width of the label to be inserted, the width of the label area is the width of the label display area, and the current label is one or more labels that already exist in the label display area; The first inserting step: when the total width of the labels is greater than the width of the label area, moving one of the current labels to the drop-down area, and inserting the label to be inserted into the label display area; The second insertion step: when the total width of the label is smaller than the width of the label area, the absolute value of the difference between the total width of the label and the width of the label area is calculated; when the absolute value of the difference is greater than or equal to the width of the label to be inserted, the label to be inserted is inserted into the label display area.

2. The tag management method according to claim 1, characterized in that: Determine the total label width and label area width, including: Monitoring a change in the number of labels in the label display area, and determining that there is a label to be inserted when the number of labels changes; The total width of the label is calculated by a change monitoring function, and the width of the label area is calculated by a size monitoring function.

3. The tag management method according to claim 1, characterized in that: Move the current tab to the drop-down area, including: In the case where the last tag is not the tag corresponding to the currently displayed page, the last tag is moved to the drop-down area, and the tag to be inserted is inserted into the tag display area, wherein the drop-down area is hidden at the end of one side of the tag display area, and the last tag represents the tag closest to the position of the drop-down area; When the last tag is a tag corresponding to the currently displayed page, the previous tag of the last tag is moved to the drop-down area.

4. The tag management method according to claim 1, characterized in that: Inserting the to-be-inserted label into the label display area comprises: The tag to be inserted is inserted into the next tag position of the first tag in the tag display area, wherein the drop-down area is hidden at the end of one side of the tag display area, and the first tag represents the tag farthest from the position of the drop-down area.

5. The tag management method according to claim 1, characterized in that: The method further comprises: Calculate the total width of the current label, wherein the total width of the current label is the sum of the widths of all the labels in the current label display area; When the total width of the current label is equal to the width of the label area and the label in the label display area is deleted, move the first label in the drop-down area to the label display area; When the total width of the current labels is smaller than the width of the label area and the labels in the label display area are deleted, the current arrangement of the labels in the label display area is maintained.

6. The tag management method according to claim 1, characterized in that: The method further comprises: When a tag in the drop-down area is clicked, move the current tag to the drop-down area, and insert the clicked tag into the tag display area; When the tags in the drop-down area are deleted, the current arrangement of the tags in the tag display area is maintained.

7. The tag management method according to claim 1, characterized in that: The method further comprises: In the case where the width of the label area changes, the determining step, the first inserting step and the second inserting step are repeated at least once until the total width of the labels is smaller than the width of the label area, and the absolute value of the difference between the total width of the labels and the width of the label area is smaller than the width of each of the labels.

8. A label management device, characterized in that: include: A determination unit, used to determine a total label width and a label area width, wherein the total label width is the sum of widths of multiple current labels and a width of a label to be inserted, the label area width is the width of a label display area, and the current label is one or more labels already existing in the label display area; A first inserting unit, used for moving one of the current labels to the drop-down area and inserting the label to be inserted into the label display area when the total width of the labels is greater than the width of the label area; The second insertion unit is used to calculate the absolute value of the difference between the total width of the label and the width of the label area when the total width of the label is smaller than the width of the label area, and insert the label to be inserted into the label display area when the absolute value of the difference is greater than or equal to the width of the label to be inserted.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium includes a stored program, wherein when the program is executed, the device where the computer-readable storage medium is located is controlled to execute the tag management method according to any one of claims 1 to 7.

10. An electronic device, characterized in that: include: One or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and are configured to be executed by the one or more processors, and the one or more programs include a method for executing the tag management method described in any one of claims 1 to 7.

Images