A method, device, equipment and storage medium for displaying component information

Abstract

The disclosed embodiments relate to a method, apparatus, device and storage medium for displaying component information, and relate to the field of computer technology. The disclosed embodiments can solve the problem in the related art that programmers need to frequently switch back and forth between the browser and the code writing environment, which results in the code writing process consuming a lot of time resources and being extremely inefficient. The method comprises: in response to a search instruction for a search keyword, displaying information of at least one candidate component corresponding to the search keyword. In response to a trigger operation on a target candidate component, obtaining a label of the target candidate component; the target candidate component is one of the at least one candidate component. Displaying the label of the target candidate component.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to the field of computer technology, and in particular, to a method, device, equipment, and storage medium for displaying component information. Background Art

[0002] With the rapid development of Internet technology, Internet (Web) front-end technology has entered a new era. Component-based development has gradually become the mainstream trend in the front-end field. As more and more components are developed, how to quickly obtain the usage of a component has become the biggest workload for programmers in component code writing.

[0003] In the prior art, the way to obtain the usage of components is usually to query the relevant document website through the browser. In this way, during the code writing process, the programmer needs to compare the component information of the browser while writing the code. Therefore, the programmer needs to frequently switch back and forth between the browser and the code writing environment, which results in the code writing process consuming a lot of time and resources and extremely low efficiency. Summary of the invention

[0004] The embodiments of the present disclosure provide a method, apparatus, device and storage medium for displaying component information, so as to at least solve the problem in the related art that programmers need to frequently switch back and forth between the browser and the code writing environment, resulting in the code writing process consuming a lot of time resources and extremely low efficiency.

[0005] The technical solution of the embodiment of the present disclosure is as follows:

[0006] According to a first aspect of an embodiment of the present disclosure, a method for displaying component information is provided, which is applied to a code editor. The method includes: determining a target candidate component in response to a triggering operation on information of a target candidate component in a code editing area. Displaying the target candidate component in the code editing area.

[0007] In combination with the first aspect, in a possible implementation, in response to a trigger operation on information of a target candidate component in a code editing area, a method for determining a target candidate component includes: in response to a search instruction for a search keyword input in the code editing area, obtaining information of at least one candidate component corresponding to the search keyword. Displaying information of at least one candidate component corresponding to the search keyword in the code editing area. In response to a click operation in the information of at least one candidate component, determining the target candidate component; the target candidate component is one of the at least one candidate component.

[0008] In combination with the first aspect, in a possible implementation, the method further includes: in response to a trigger operation on the target candidate component, obtaining a data packet of the target candidate component and a dependent data packet of the candidate component, installing the data packet of the target candidate component and the dependent data packet, and importing the data packet of the target candidate component.

[0009] In combination with the first aspect, in another possible implementation, the method further includes: displaying a configuration button of the target candidate component. In response to a triggering operation on the configuration button, displaying at least one configuration control; each configuration control corresponds to a function. In response to a selection operation on at least one target configuration control, displaying information on the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.

[0010] In combination with the first aspect, in another possible implementation, after the above-mentioned response to the selection operation of at least one target configuration control, it also includes: when it is determined that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, closing the selection operation of the first selected target configuration control. Generate prompt information and display it. The prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

[0011] In combination with the first aspect, in another possible implementation, the method for obtaining the search instruction includes: receiving a preset character input by a user at a preset position in a code editing area, displaying a search input box, receiving a first search keyword input by the user in the search input box, and generating a search instruction. The search keyword is the first search keyword.

[0012] In combination with the first aspect, in another possible implementation, the method for obtaining the search instruction includes: receiving a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character, and generating a search instruction. The search keyword is the second search keyword.

[0013] In conjunction with the first aspect, in another possible implementation, in response to a search instruction for a search keyword, a method for displaying information of at least one candidate component corresponding to the search keyword includes: in response to the search instruction for the search keyword, determining a technology stack corresponding to a current editing position in a code editing area. Searching for information of at least one candidate component corresponding to the search keyword in a database corresponding to the technology stack. Displaying information of at least one candidate component.

[0014] In combination with the first aspect, in another possible implementation, displaying the target candidate component in the code editing area includes: acquiring a label of the target candidate component and displaying the label of the target candidate component in the code editing area.

[0015] According to a second aspect of an embodiment of the present disclosure, a device for displaying component information is provided, the device comprising: a processing unit configured to determine a target candidate component in response to a triggering operation on information of a target candidate component in a code editing area; and a display unit configured to display the target candidate component of the processing unit in the code editing area.

[0016] In conjunction with the second aspect, in a possible implementation, the acquisition unit is specifically configured to, in response to a search instruction for a search keyword input in the code editing area, acquire information of at least one candidate component corresponding to the search keyword. The display unit is configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit in the code editing area. The processing unit is configured to, in response to a click operation in at least one candidate component displayed by the display unit, determine a target candidate component; the target candidate component is one of the at least one candidate component.

[0017] In conjunction with the second aspect, in a possible implementation, the acquisition unit is further configured to, in response to a trigger operation on the target candidate component, acquire a data packet of the target candidate component and a dependent data packet of the candidate component. The processing unit is configured to install the data packet and the dependent data packet of the target candidate component acquired by the acquisition unit, and import the data packet of the target candidate component.

[0018] In conjunction with the second aspect, in another possible implementation, the display unit is further configured to: display a configuration button of the target candidate component; in response to a trigger operation on the configuration button, display at least one configuration control; each configuration control corresponds to a function; in response to a selection operation on at least one target configuration control, display information on the function corresponding to the target configuration control. The target configuration control is one of the at least one configuration control.

[0019] In conjunction with the second aspect, in another possible implementation, the processing unit is further configured to close the selection operation of the first selected target configuration control when determining that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive. The processing unit is further configured to generate prompt information; the prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive. The display unit is configured to display the prompt information generated by the processing unit.

[0020] In conjunction with the second aspect, in another possible implementation, the acquisition unit is specifically configured to receive a preset character input by a user at a preset position in the code editing area. The display unit is configured to display a search input box after the acquisition unit receives the preset character. The acquisition unit is also configured to receive a search keyword input by the user in the search input box. The processing unit is configured to generate a search instruction according to the first search keyword received by the acquisition unit. The search keyword is the first search keyword.

[0021] In conjunction with the second aspect, in another possible implementation, the acquisition unit is specifically configured to receive a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character. The search keyword is the second search keyword. The processing unit is configured to generate a search instruction according to the second search keyword received by the acquisition unit.

[0022] In conjunction with the second aspect, in another possible implementation, the processing unit is further configured to determine the technology stack corresponding to the current editing position in the code editing area in response to a search instruction for the search keyword. The processing unit is further configured to search for information of at least one candidate component corresponding to the search keyword in a database corresponding to the technology stack. The display unit is configured to display information of at least one candidate component searched by the processing unit.

[0023] In conjunction with the second aspect, in another possible implementation, the acquisition unit is specifically configured to acquire a label of the target candidate component. The display unit is configured to display the label of the target candidate component acquired by the acquisition unit in the code editing area.

[0024] According to a third aspect of an embodiment of the present disclosure, an electronic device is provided, comprising: a processor; a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement the method for displaying component information as provided in the first aspect above.

[0025] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided, comprising instructions, which, when executed by a processor in an electronic device, enable the electronic device to execute the component information display method provided in the first aspect above.

[0026] According to a fifth aspect of an embodiment of the present disclosure, a computer program product is provided. When the computer program is executed by a processor in an electronic device, the electronic device executes the component information display method provided in the first aspect above.

[0027] In the above technical solution provided by the embodiment of the present disclosure, the code editor can determine the target candidate component required by the user by sensing the trigger operation of the user on the information of the target candidate component in the code editing area. And directly display the target candidate component in the code editing area. Therefore, the user does not need to query and obtain the information of the relevant component from the browser. It provides convenience for the user to write the code of the component, saves the time of code writing, and improves programming efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] The drawings herein are incorporated into the specification and constitute a part of this specification, illustrate embodiments consistent with the embodiments of the present disclosure, and together with the description are used to explain the principles of the embodiments of the present disclosure, and do not constitute improper limitations on the embodiments of the present disclosure.

[0029] Figure 1 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure;

[0030] Figure 2 One of the flowcharts of a method for displaying component information provided by an embodiment of the present disclosure;

[0031] Figure 3 One of the schematic diagrams of a display interface of component information provided in an embodiment of the present disclosure;

[0032] Figure 4 A second flowchart of a method for displaying component information provided in an embodiment of the present disclosure;

[0033] Figure 5A A second schematic diagram of a display interface for component information provided in an embodiment of the present disclosure;

[0034] Figure 5B A third schematic diagram of a display interface for component information provided in an embodiment of the present disclosure;

[0035] Figure 5C A fourth schematic diagram of a display interface for component information provided in an embodiment of the present disclosure;

[0036] Figure 6 A third flowchart of a method for displaying component information provided in an embodiment of the present disclosure;

[0037] Figure 7 A fifth schematic diagram of a display interface of component information provided in an embodiment of the present disclosure;

[0038] Figure 8 This is one of the structural schematic diagrams of a device for displaying component information provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0039] In order to enable ordinary persons in the art to better understand the technical solutions of the embodiments of the present disclosure, the technical solutions of the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0040] It should be noted that the terms "first", "second", etc. in the specification and claims of the embodiments of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the embodiments of the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the embodiments of the present disclosure as detailed in the appended claims.

[0041] In addition, in the description of the embodiments of the present disclosure, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present disclosure, "multiple" means two or more than two.

[0042] Before explaining the embodiments of the present disclosure in detail, some terms involved in the embodiments of the present disclosure are first explained.

[0043] 1. Components

[0044] A component is a simple encapsulation of data and methods. In C++Builder, a component is a specific object derived from TComponent. Components can have their own properties and methods. Properties are simple accessors to component data. Methods are some simple and visible functions of components. Using components allows for drag-and-drop programming, fast property processing, and true object-oriented design. VCL and CLX components are the core of the C++Builder system. In the eyes of the front end, components usually refer to view units on a page, i.e., UI components. It can be said that UI components are a subset of components.

[0045] 2. Front-end technology stack

[0046] The front-end technology stack is actually different ways to implement front-end functions.

[0047] 3. Import

[0048] When a component is introduced into the front-end project, it needs to be imported into the page-level environment using the import command. The import syntax declaration is used to import functions, objects, and original values ​​of specified files (or modules) from exported modules and scripts.

[0049] At present, the only way to understand how to use a component is to query the relevant documentation website through a browser. In this way, during the code writing process, programmers need to compare the component information of the browser while writing the code. For example, when a programmer needs a calendar component, he can get this component by searching the component library document in the relevant documentation website through a browser. Assuming that the user wants to display the lunar calendar, he needs to query again in the component library document, find the corresponding properties of the calendar component, and copy and paste it into his own code writing environment. Therefore, programmers need to frequently switch back and forth between the browser and the code writing environment, which results in the code writing process consuming a lot of time and resources and extremely low efficiency.

[0050] In view of the above technical problems, an embodiment of the present disclosure provides a method for displaying component information. The following first introduces an application scenario of a method for displaying component information provided by an embodiment of the present disclosure.

[0051] In practical applications, a method for displaying component information provided by an embodiment of the present disclosure is applied to an electronic device. The electronic device may be a terminal, or a server, or a device (such as an editor) in a terminal for implementing the method for displaying component information, or a device (such as an editor) in a server for implementing the method for displaying component information.

[0052] Exemplarily, when the electronic device in the embodiments of the present disclosure is a terminal, the terminal may be a mobile phone, a tablet computer, a desktop, a laptop, a handheld computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR) or virtual reality (VR) device, etc., which has a program writing function and runs related programs. The embodiments of the present disclosure do not impose any special restrictions on the specific form of the terminal.

[0053] Figure 1 is a possible structural diagram of an electronic device 100 according to an exemplary embodiment.

[0054] like Figure 1As shown, the electronic device 100 includes a processor 110 and a memory 120. The memory 120 is used to store instructions executable by the processor 110, and the processor 110 can implement the functions of each module in the device 200 for displaying page information in the above embodiment.

[0055] In a specific implementation, as an embodiment, the processor 110 (110-1 and 110-2) may include one or more CPUs, such as Figure 1 As an embodiment, the display device 200 of page information may include multiple processors 110, such as Figure 1 1 and 11 - 2 are shown in FIG. Each CPU in these processors 110 may be a single-core processor (Single-CPU) or a multi-core processor (Multi-CPU). The processor 110 here may refer to one or more devices, circuits, and / or processing cores for processing data (e.g., computer program instructions).

[0056] The memory 120 may be a read-only memory (ROM) or other types of static storage devices that can store static information and instructions, a random access memory (RAM) or other types of dynamic storage devices that can store information and instructions, or an electrically erasable programmable read-only memory (EEPROM), a compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical disc, laser disc, optical disc, digital versatile disc, Blu-ray disc, etc.), a disk-readable storage medium or other magnetic storage device, or any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 120 may exist independently and be connected to the processor 110 via the bus 130. The memory 120 may also be integrated with the processor 110.

[0057] The bus 130 may be an industry standard architecture (ISA) bus, a peripheral component interconnect (PCI) bus, or an extended industry standard architecture (EISA) bus. The bus 130 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 1 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0058] In addition, in order to facilitate information exchange between the electronic device 100 and other devices (such as a server), the electronic device 100 includes a communication interface 140. The communication interface 140 uses any transceiver-like device to communicate with other devices or communication networks, such as a control system, a radio access network (RAN), a wireless local area network (WLAN), etc. The communication interface 140 may include a receiving unit to implement a receiving function, and a sending unit to implement a sending function.

[0059] Those skilled in the art will understand that Figure 1 The structure shown in the figure does not constitute a limitation on the electronic device, and may include more or less components than shown in the figure, or combine certain components, or adopt a different component arrangement.

[0060] The following is an introduction to the component information display method provided by the embodiment of the present disclosure in conjunction with a specific embodiment. The method provided by the embodiment can be applied to a code editor. One implementation of the code editor is as follows: Figure 1 The electronic device 110 can at least solve the problem in the related art that programmers need to frequently switch back and forth between the browser and programming environments, and the component writing process needs to consume a lot of time resources and is extremely inefficient.

[0061] like Figure 2 As shown, the method for displaying component information provided by the embodiment of the present disclosure specifically includes: the following S201-S202.

[0062] S201: The electronic device determines a target candidate component in response to a triggering operation on information of a target candidate component in a code editing area.

[0063] Furthermore, the information of the target candidate component may include: one or more of the component name, the author, and the applicable development environment, such as component XX: author XXX, VUE.

[0064] S202: The electronic device displays target candidate components in a code editing area.

[0065] Optionally, the electronic device obtains a label of the target candidate component; and displays the label of the target candidate component in the code editing area.

[0066] Specifically, the label of the target candidate component is displayed at the cursor position in the code editing area of ​​the electronic device. Figure 3 As shown, after selecting component G, the label of component G is displayed at the cursor position in the code editing area 50 as g-calendar.

[0067] Furthermore, after displaying the label of the target candidate component, the electronic device may also display the default configuration information of the target candidate component. Figure 3 .

[0068] In the above technical solution provided by the embodiment of the present disclosure, the code editor can determine the target candidate component required by the user by sensing the trigger operation of the user on the information of the target candidate component in the code editing area. And directly display the target candidate component in the code editing area. Therefore, the user does not need to query and obtain the information of the relevant component from the browser. It provides convenience for the user to write the code of the component, saves the time of code writing, and improves programming efficiency.

[0069] Optional, combined Figure 2 , refer to Figure 4 , S201 specifically includes:

[0070] S2011. The electronic device obtains information of at least one candidate component corresponding to the search keyword in response to a search instruction for the search keyword input in the code editing area.

[0071] It should be noted that, in order to obtain information of at least one candidate component corresponding to the search keyword in the electronic device, it is necessary to import the component information and the configuration information of the component into the local database of the electronic device in advance.

[0072] In one implementation, the electronic device determines the technology stack corresponding to the current editing position in the code editing area in response to a search instruction for a search keyword, searches for information of at least one candidate component corresponding to the search keyword in a database corresponding to the technology stack, and displays the information of the at least one candidate component.

[0073] It should be noted that the electronic device determines at least one candidate component corresponding to the search keyword in the technology stack by detecting the technology stack (ie, development environment) used by the user. The technology stack used by the user can be determined by the suffix of the file name or the configuration item of the file.

[0074] This implementation method determines the technology stack corresponding to the current editing position in the code editing area, obtains and displays information of at least one candidate component corresponding to the search keyword in the database corresponding to the technology stack, thereby ensuring the normal operation of the component program in the code editor.

[0075] Optionally, there are two methods for obtaining the search instruction in S2011, specifically including:

[0076] Method 1: The electronic device receives a preset character input by a user at a preset position in the code editing area, displays a search input box, receives a first search keyword input by the user in the search input box, and generates a search instruction, wherein the search keyword is the first search keyword.

[0077] Exemplarily, text (synonyms, etc.) related to the target candidate component can be entered in the search input box. For example, if you need to search for components related to calendars, you can enter search keywords such as "calendar", "almanac" or "perpetual calendar" in the search input box.

[0078] The disclosed embodiment uses the method for obtaining the search instruction in the above method 1 to directly display the search input box after the user enters the preset characters, so that the user can generate the search instruction by entering the first search keyword in the search input box, so as to obtain the desired search component, thereby facilitating the user to obtain component information.

[0079] Method 2: The electronic device receives a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character, and generates a search instruction, wherein the search keyword is the second search keyword.

[0080] It should be noted that the specific position of the second search keyword input after the preset character is not limited. For example, the second search keyword may be input immediately after the preset character. For another example, the second search keyword may be input after the preset character and after a space character is separated from the preset character. For another example, the second search keyword may be input in the next line of the preset character.

[0081] The disclosed embodiment uses the method for obtaining the search instruction in the second method above to generate a search instruction by directly inputting a search keyword after the preset characters input by the user, thereby obtaining the component to be searched, thereby facilitating the user to obtain component information.

[0082] In this embodiment, combined with Figure 5A, the above two acquisition methods are exemplified, and the user can enter a left angle bracket "<" in the code editing area 50 of the electronic device, and a search input box is displayed at the third area 5012. There are two ways to enter the search keyword: one is to enter the search keyword after the left angle bracket "<" on the code editing page 50; the other is to enter the search keyword in the search input box 5013. It should be noted here that the search keyword entered after the left angle bracket "<" is usually a combination of English letters, and the search keyword entered in the search input box is usually a combination of Chinese characters. However, this application is not limited to this.

[0083] S2012: The electronic device displays information of at least one candidate component corresponding to the search keyword in the code editing area.

[0084] For example, refer to Figure 5A As shown, taking the calendar component as an example, when the search keyword is calendar, the development environment is detected, and the information of the components related to the calendar in the development environment displayed on the relevant display interface may include: component XX: author XXX, applicable development environment. Figure 5A FIG. 5 shows that the information of component A to component E is displayed in the first area 5011 in the first interface 501 on the code editing area 50 and the related prompt content is displayed in the second area 5012; the prompt content can be as follows Figure 5A The development environment is detected as VUE, and the following "calendar related components" are recommended for you. Of course, the prompt content can be changed according to the user's usage needs and usage experience, and it is not limited here. It should be noted that Figure 5A Only one display mode of the first interface 501 and the code editing area 50 is shown; the first interface 501 can be a sub-interface of the code editing area 50, or can be an independent interface, and the embodiment of the present disclosure does not impose any limitation on this.

[0085] In another example, when the interface size of the first area 5011 is not enough to display all the component information, a page turning function is added. Figure 5B As shown, the controls for the previous page and the next page are added to the first area 5011; they can be viewed by clicking the controls 5B1 for the previous page and 5B2 for the next page; when the current page is the first page, the controls for the previous page can be displayed in gray. Similarly, when the current page is the last page, the space for the next page can be displayed in gray. For another example, it can be as follows Figure 5C As shown, a scroll bar 5C1 is added to the right side of the first area so that the user can view the information of all components by sliding the scroll control 5C1 in the scroll bar up and down.

[0086] S2013. The electronic device determines a target candidate component in response to a click operation in information of at least one candidate component; the target candidate component is one of the at least one candidate component.

[0087] For example, Figure 5A As shown, when the user needs component G when viewing the information of the displayed components, the user can select component G by clicking the mouse.

[0088] Exemplarily, the triggering operation for the target candidate component may be a click operation; the click operation may be any feasible operation such as a single click operation, a double click operation, a sliding operation, etc., which may be determined according to actual needs, and the embodiments of the present disclosure do not impose specific restrictions. In addition, the selection operation and other triggering operations involved in the embodiments of the present disclosure refer to the description of the click operation mentioned above.

[0089] In the above technical solution provided by the embodiment of the present disclosure, by responding to the search instruction of the search keyword, the information of one or more candidate components that can be selected is intuitively displayed to the user, so that the user can directly select the required component according to the information of the candidate component. There is no need to query the information of the relevant components from the browser, which provides convenience for the user to write component code, saves code writing time, and improves programming efficiency.

[0090] In one implementation, combining Figure 2 , refer to Figure 6 The component information display method provided in the embodiment of the present disclosure also includes S203 and S204.

[0091] S203: In response to the triggering operation on the target candidate component, the electronic device obtains a data packet of the target candidate component and dependent data packets of the candidate component.

[0092] Specifically, the dependency data package contains the environment file for running the selected target candidate component. After the user selects the target candidate component, the electronic device obtains the dependency data package of the target candidate component. On this basis, if you need to use the code, you need to find the address of the code (i.e., the dependency data package) in the warehouse, then download the code, and run it in the program code of the application.

[0093] It should be noted that the dependent data package in the embodiments of the present disclosure may also be referred to as a "plug-in".

[0094] S204: The electronic device installs the data packet of the target candidate component and the dependent data packet, and imports the data packet of the target candidate component.

[0095] Optionally, use the import statement in the code editing area to introduce the target candidate component.

[0096] In addition, when installing the dependent data package of the target candidate component, the installed dependent data package in the comparison file is compared, and when they are the same dependent data package, the two are merged.

[0097] In this implementation, by triggering the target candidate component among at least one displayed candidate component, the data package of the target candidate component and the dependent data packages of the candidate component can be directly obtained and installed, which provides convenience for programmers in the process of writing codes and saves code writing time.

[0098] In one implementation, referring to Figure 6 The component information display method provided in the embodiment of the present disclosure also includes S205-S207.

[0099] S205: The electronic device displays a configuration button of the target candidate component.

[0100] S206: The electronic device displays at least one configuration control in response to the triggering operation on the configuration button; each configuration control corresponds to a function.

[0101] S207: The electronic device displays information about a function corresponding to the target configuration control in response to a selection operation on at least one target configuration control. The target configuration control is one of the at least one configuration control.

[0102] For better understanding, refer to Figure 7 , S205-S206 are exemplarily described, and a configuration control 701 (such as Figure 7 The programmer clicks the info button 701 (i.e., triggers the operation) with a tool such as a mouse to display at least one configuration control (such as Figure 7 The switch control 7011 corresponding to the display of the lunar calendar, the switch control 7012 corresponding to the default display, and the switch control 7013 corresponding to the display of festivals are shown. The programmer clicks (i.e., selects) the switch control using a tool such as a mouse to display the state of the corresponding switch control (the state is on or off).

[0103] In this implementation, by responding to the user's triggering operation on the displayed configuration control, the user is intuitively presented with information of one or more selectable configurations, so that the user can directly select the required configuration according to the information of the candidate component. There is no need to query the relevant configuration information from the browser, which facilitates the user to write component configuration code, saves code writing time, and improves programming efficiency.

[0104] Further, see Figure 6After the electronic device in S207 responds to the selection operation of at least one target configuration control, the electronic device further includes the following steps:

[0105] S2071: When the electronic device determines that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, the electronic device closes the selection operation of the first selected target configuration control.

[0106] S2072. The electronic device generates and displays prompt information; the prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

[0107] Specifically, refer to Figure 7 As shown in the figure, assuming that the display of the lunar calendar (i.e., the switch state of the display of the lunar calendar is "on") cannot be displayed at the same time as the switch (i.e., the switch state of the display of holidays is "on"); it is considered that the function of displaying the lunar calendar and the function of displaying the switch are mutually exclusive. If the display of the lunar calendar is selected first and the display of the switch is selected later, the display of the lunar calendar function is turned off by default, and the following is generated Figure 7 The prompt message "ps: When displaying holidays is true, displaying the lunar calendar is unavailable" is shown

[0108] The disclosed embodiment determines that when there is a conflict between the functions corresponding to the two selected target configuration controls, the first selected function is closed, and a prompt message is given to the user that there is a conflict between the selected functions. This can not only avoid conflicting attributes and reduce potential vulnerabilities, but also improve the user's experience.

[0109] Reference Figure 8 , is a schematic diagram of a structure of a display device for component information provided by an embodiment of the present disclosure. Applied to a terminal, the display device 80 for component information includes: an acquisition unit 801, a display unit 802, and a processing unit 803. Among them:

[0110] The processing unit 803 is configured to determine the target candidate component in response to the triggering operation on the target candidate component information in the code editing area. Figure 2 As shown, the processing unit 803 can be used to execute S201.

[0111] The display unit 802 is configured to display the target candidate components of the processing unit 803 in the code editing area. Figure 2 As shown, the acquisition unit 801 can be used to execute S202.

[0112] In an exemplary solution, the acquisition unit 801 is specifically configured to obtain information of at least one candidate component corresponding to the search keyword in response to a search instruction for the search keyword input in the code editing area. Figure 4As shown, the acquisition unit 801 can be used to execute S2011.

[0113] The display unit 802 is configured to display information of at least one candidate component corresponding to the search keyword obtained by the obtaining unit 801 in the code editing area. Figure 4 As shown, the display unit 802 can be used to execute S2012.

[0114] The processing unit 803 is configured to determine a target candidate component in response to a click operation in the information of at least one candidate component displayed by the display unit 802; the target candidate component is one of the at least one candidate component. Figure 4 As shown, the processing unit 803 can be used to execute S2013.

[0115] In an exemplary solution, the acquisition unit 801 is further configured to acquire a data packet of the target candidate component and a dependent data packet of the candidate component in response to a trigger operation on the target candidate component.

[0116] The processing unit 803 is configured to install the data package and dependent data package of the target candidate component acquired by the acquisition unit 801, and import the data package of the target candidate component.

[0117] In an exemplary solution, the display unit 802 is further configured to: display a configuration button of the target candidate component. In response to a trigger operation on the configuration button, at least one configuration control is displayed; each configuration control corresponds to a function. In response to a selection operation on at least one target configuration control, information on the function corresponding to the target configuration control is displayed; the target configuration control is one of the at least one configuration control.

[0118] In an exemplary solution, the processing unit 803 is further configured to close the selection operation of the first selected target configuration control when it is determined that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

[0119] The processing unit 803 is further configured to generate prompt information; the prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

[0120] The display unit 802 is configured to display the prompt information generated by the processing unit 803.

[0121] In an exemplary solution, the acquisition unit 801 is specifically configured to receive a preset character input by a user at a preset position in the code editing area.

[0122] The display unit 802 is configured to display a search input box after the acquisition unit 801 receives the preset characters.

[0123] The acquisition unit 801 is further configured to receive a first search keyword input by a user in the search input box; the search keyword is the first search keyword.

[0124] The processing unit 803 is configured to generate a search instruction according to the search keyword received by the acquisition unit 801 .

[0125] In an exemplary solution, the acquisition unit 801 is specifically configured to receive a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character; the search keyword is the second search keyword.

[0126] The processing unit 803 is configured to generate a search instruction according to the second search keyword received by the acquiring unit 801 .

[0127] In an exemplary solution, the processing unit 803 is further configured to determine a technology stack corresponding to a current editing position in the code editing area in response to a search instruction for a search keyword.

[0128] The processing unit 803 is further configured to search for information of at least one candidate component corresponding to the search keyword in a database corresponding to the technology stack.

[0129] The display unit 802 is configured to display information of at least one candidate component searched by the processing unit 803 .

[0130] In an exemplary solution, the acquisition unit 801 is specifically configured to acquire a label of a target candidate component.

[0131] The display unit 802 is configured to display the label of the target candidate component obtained by the obtaining unit 801 in the code editing area.

[0132] Of course, the component information display device 80 provided in the embodiment of the present disclosure includes but is not limited to the above-mentioned units, for example, the component information display device 80 may also include a storage unit 804. The storage unit 804 may be used to store the program code of the component information display device 80, and may also be used to store data generated by the component information display device 80 during operation, such as data in a write request, etc.

[0133] In addition, an embodiment of the present disclosure also provides a computer-readable storage medium, including instructions, which, when executed by a processor, enable the processor to execute a method for displaying component information as provided in the above embodiment; or, when executed by a processor, enable the processor to execute a method for displaying component information as provided in the above embodiment.

[0134] In addition, an embodiment of the present disclosure also provides a computer program product, including instructions, which, when executed by a processor, enable the processor to execute a method for displaying component information as provided in the above embodiment; or, when executed by a processor, enable the processor to execute a method for displaying component information as provided in the above embodiment.

[0135] In an exemplary embodiment, the present disclosure also provides a component information display system, including a terminal and a server, wherein the terminal is used to execute the functions of the terminal in the component information display method of the above embodiment, and the server is used to execute the functions of the server in the component information display method of the above embodiment, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0136] Those skilled in the art will readily appreciate other implementations of the disclosed embodiments after considering the specification and practicing the invention disclosed herein. The disclosed embodiments are intended to cover any variations, uses, or adaptations of the disclosed embodiments, which follow the general principles of the disclosed embodiments and include common knowledge or customary technical means in the art that are not disclosed in the disclosed embodiments. The specification and embodiments are to be regarded as exemplary only, and the true scope and spirit of the disclosed embodiments are indicated by the following claims.

Claims

1. A method for displaying component information, characterized in that: Applied to a code editor, the method includes: In response to a search instruction for a search keyword input in the code editing area, obtaining information of at least one candidate component corresponding to the search keyword; Displaying information of at least one candidate component corresponding to the search keyword in the code editing area; In response to a click operation in the information of the at least one candidate component, determining a target candidate component; the target candidate component is one of the at least one candidate component; Displaying the target candidate component in the code editing area; Display a configuration button for the target candidate component; In response to a triggering operation on the configuration button, at least one configuration control is displayed; each configuration control corresponds to a function; In response to a selection operation of at least one target configuration control, information of a function corresponding to the target configuration control is displayed; the target configuration control is one of the at least one configuration control; The step of displaying information of at least one candidate component corresponding to the search keyword in response to a search instruction for the search keyword comprises: In response to a search instruction for the search keyword, determining a technology stack corresponding to a current editing position in a code editing area; Searching, in a database corresponding to the technology stack, information of at least one candidate component corresponding to the search keyword; Information of the at least one candidate component is displayed.

2. The method for displaying component information according to claim 1, characterized in that: The method further comprises: In response to a triggering operation on the target candidate component, acquiring a data packet of the target candidate component and a dependent data packet of the candidate component; The data package of the target candidate component and the dependent data package are installed, and the data package of the target candidate component is imported.

3. The method for displaying component information according to claim 1, characterized in that: After the response to the selection operation of at least one target configuration control, the method further includes: When it is determined that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, closing the selection operation of the first selected target configuration control; Generate and display prompt information; the prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive.

4. The method for displaying component information according to claim 1, characterized in that: The method for obtaining the search instruction includes: Receiving a preset character input by a user at a preset position in the code editing area, and displaying a search input box; A first search keyword input by a user in the search input box is received, and the search instruction is generated; the search keyword is the first search keyword.

5. The method for displaying component information according to claim 1, characterized in that: The method for obtaining the search instruction includes: The preset characters input by the user at the preset position of the code editing area and the second search keyword input after the preset characters are received to generate the search instruction; the search keyword is the second search keyword.

6. The method for displaying component information according to claim 1, characterized in that: The displaying of the target candidate component in the code editing area includes: Obtaining a label of the target candidate component; The label of the target candidate component is displayed in the code editing area.

7. A display device for component information, characterized in that: include: a processing unit configured to determine a target candidate component in response to a triggering operation on information of the target candidate component in the code editing area; A display unit configured to display the target candidate component of the processing unit in the code editing area; an acquisition unit, specifically configured to, in response to a search instruction for a search keyword input in the code editing area, acquire information of at least one candidate component corresponding to the search keyword; The display unit is configured to display information of at least one candidate component corresponding to the search keyword acquired by the acquisition unit in the code editing area; The processing unit is configured to determine the target candidate component in response to a click operation in the information of the at least one candidate component displayed by the display unit; the target candidate component is one of the at least one candidate component; The display unit is further configured as: Display a configuration button for the target candidate component; In response to a triggering operation on the configuration button, at least one configuration control is displayed; each configuration control corresponds to a function; In response to a selection operation of at least one target configuration control, information of a function corresponding to the target configuration control is displayed; the target configuration control is one of the at least one configuration control; The processing unit is further configured to determine a technology stack corresponding to a current editing position in the code editing area in response to a search instruction for the search keyword; The processing unit is further configured to search, in a database corresponding to the technology stack, for information of at least one candidate component corresponding to the search keyword; The display unit is configured to display information of the at least one candidate component searched by the processing unit.

8. The component information display device according to claim 7, characterized in that: The acquisition unit is further configured to acquire a data packet of the target candidate component and a dependent data packet of the candidate component in response to a trigger operation on the target candidate component; The processing unit is configured to install the data packet of the target candidate component and the dependent data packet acquired by the acquisition unit, and import the data packet of the target candidate component.

9. The component information display device according to claim 7, characterized in that: The processing unit is further configured to, when it is determined that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive, close the selection operation of the first selected target configuration control; The processing unit is further configured to generate prompt information; The prompt information is used to prompt that the function of the first selected target configuration control and the function of the later selected target configuration control are mutually exclusive; The display unit is configured to display the prompt information generated by the processing unit.

10. The component information display device according to claim 7, characterized in that: The acquisition unit is specifically configured to receive a preset character input by a user at a preset position in the code editing area; The display unit is configured to display a search input box after the acquisition unit receives the preset character; The acquisition unit is further configured to receive a first search keyword input by a user in the search input box; the search keyword is the first search keyword; The processing unit is configured to generate the search instruction according to the search keyword received by the acquisition unit.

11. The component information display device according to claim 7, characterized in that: The acquisition unit is specifically configured to receive a preset character input by a user at a preset position in the code editing area and a second search keyword input after the preset character; the search keyword is the second search keyword; The processing unit is configured to generate the search instruction according to the second search keyword received by the acquiring unit.

12. The component information display device according to claim 7, characterized in that: The acquisition unit is specifically configured to acquire the label of the target candidate component; The display unit is configured to display the label of the target candidate component acquired by the acquisition unit in the code editing area.

13. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the component information display method as described in any one of claims 1-6.

14. A computer-readable storage medium, characterized in that: The method comprises instructions, which, when executed by a processor in an electronic device, enable the electronic device to execute the component information display method as described in any one of claims 1 to 6.

15. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor in an electronic device, the electronic device executes the component information display method according to any one of claims 1 to 6.

Images