Display method of commented code development interface and related hardware

Abstract

The embodiment of the invention provides a commented code development interface display method and related hardware, and relates to the technical field of program code development, and the commented code development interface display method comprises the following steps: rendering and displaying a code development interface, and displaying a collaboratively developed target code on the code development interface; receiving a comment information editing operation for the target code snippet through a comment editing control of a first comment component of the code development interface, and submitting the comment information editing operation to a code management platform, the code management platform updates target comment information corresponding to the target code snippets in the target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information. The comment function is provided for developers on the interface of the code editor, a simple and convenient mode is provided for achieving multi-person cooperative communication and discussion on the same section of code, and communication obstacles caused by context missing in a traditional mail or chat tool are avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of program code development, and in particular to a display method of a commentable code development interface and related hardware. Background Art

[0002] At present, due to the increasing complexity of computer program codes, the process of computer program code development has generally adopted a multi-person collaborative development model. In the process of multi-person collaborative development, developers participating in the collaborative development often need to handle merge requests, code reviews, version management and other tasks online. However, in the above-mentioned scenarios involved in code collaborative development, the process of communication between different developers on program codes mainly adopts methods such as e-mail, instant messaging software, offline meetings or online meetings, and the communication process still has certain inconveniences. For example, e-mail, instant messaging software, online meetings and other methods require developers to install another software in addition to the code editor, and offline meetings require all developers to be present at the same time. Collaborative development scenarios are in urgent need of a more convenient communication method. Summary of the invention

[0003] The embodiment of the present invention provides a method for displaying a commentable code development interface and related hardware, so as to provide a more convenient code collaborative development communication mode.

[0004] An embodiment of the present invention provides a method for displaying a commentable code development interface, comprising:

[0005] Rendering and displaying a code development interface, and displaying the collaboratively developed target code on the code development interface;

[0006] A comment information editing operation for a target code snippet is received through a comment editing control of a first comment component of the code development interface, and the comment information editing operation is submitted to the code management platform, so that the code management platform updates the target comment information corresponding to the target code snippet in a target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information.

[0007] Optionally, the comment information editing operation includes at least one of adding target comment information, modifying target comment information, and deleting target comment information.

[0008] Optionally, initially rendering and displaying a code development interface, and displaying the collaboratively developed target code on the code development interface, specifically includes:

[0009] Running the code editor file in a browser calls a code editor component; the code editor component is written based on vue;

[0010] Get editor options editorOptions and the target code, and pass them to the code editor component through the props property;

[0011] Through the mounted lifecycle hook of the code editor component, the Monaco Editor is instantiated according to the props, a code development interface corresponding to the Monaco Editor is displayed, and the target code of collaborative development is displayed on the code development interface.

[0012] Optionally, the method further comprises:

[0013] Acquire a target review information set from the code management platform;

[0014] If the target comment information set includes target comment information corresponding to the target code snippet, displaying the target comment information in the first comment component;

[0015] Among them, different versions of codes correspond to different sets of comment information.

[0016] Optionally, after acquiring the target comment information set from the code management platform, the method further includes:

[0017] The target comment information set currently obtained is passed to the code editor component through the property props.

[0018] Optionally, the method further comprises:

[0019] In response to a trigger operation on the target code snippet, displaying a second comment component; wherein the second comment component includes a comment component trigger control;

[0020] If a target interaction instruction for triggering a control for the comment component is received, the first comment component corresponding to the target code snippet is displayed.

[0021] Optionally, if the target comment information set includes target comment information corresponding to the target code snippet, the second comment component further includes editing a target account avatar of the target comment information;

[0022] In the process of displaying the second comment component, the target account avatar is displayed in the following manner:

[0023] By executing the model.deltaDecorations method in the page structure data corresponding to the code development interface to remove the existing decoration class names of the containers corresponding to other code snippets, and adding the target decoration class name to the target container corresponding to the target code snippet;

[0024] Determine a target account for editing the target comment information;

[0025] The target account avatar CSS attribute is configured for the cascading style sheet CSS attribute corresponding to the target decoration class name by executing the setAttribute method in the page style data corresponding to the code development interface, so as to display the target account avatar in the second comment component.

[0026] Optionally, in response to the triggering operation on the target code snippet, displaying the second comment component specifically includes:

[0027] Monitor the triggered mouse event through a pre-registered mouse event handler, and when the cursor is determined to be moved to the location of the target code snippet in the code development interface according to the monitored mouse event, execute a preset response method for displaying the second comment component;

[0028] Wherein, the mouse event handler includes editor.onMouseMove and / or editor.onMouseLeave.

[0029] Optionally, the code editor component further includes an editor configuration setting control;

[0030] The method further comprises:

[0031] In response to an operation instruction for configuring the editor setting control, the updateOptions method is called to update the editorOptions, and props are passed to the code editor component to update the code development interface.

[0032] Based on the same inventive concept, an embodiment of the present invention further provides a code development device, including:

[0033] A code display unit, used for rendering and displaying a code development interface, and displaying the collaboratively developed target code on the code development interface;

[0034] A comment editing unit is used to receive a comment information editing operation for a target code fragment through a comment editing control of a first comment component of the code development interface, and submit the comment information editing operation to the code management platform, so that the code management platform updates the target comment information corresponding to the target code fragment in a target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information.

[0035] Based on the same inventive concept, an embodiment of the present invention further provides a code development device, comprising: a processor and a memory for storing instructions executable by the processor;

[0036] The processor is configured to execute the instructions to implement the method for displaying the commentable code development interface.

[0037] Based on the same inventive concept, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program code. When the computer program code runs on a computer, the computer executes the method for displaying a commentable code development interface.

[0038] Based on the same inventive concept, an embodiment of the present invention further provides a computer program product, which includes: computer program code, when the computer program code is run on a computer, the computer executes the method for displaying a commentable code development interface.

[0039] The beneficial effects of the present invention are as follows:

[0040] The display method and related hardware of the commentable code development interface provided by the embodiment of the present invention provide developers with a comment function on the interface of the code editor. Compared with the way different developers communicate through email, instant messaging software, etc. during the collaborative development process, the embodiment of the present invention provides a simpler way to achieve multi-person collaborative communication and discussion on the same section of code. The comment function avoids the communication barriers caused by the lack of context in traditional emails or chat tools. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 A schematic diagram of the structure of a code collaborative development system according to an embodiment of the present invention;

[0042] Figure 2 One of the flowcharts of the method for displaying a commentable code development interface provided by an embodiment of the present invention;

[0043] Figure 3 A second flow chart of a method for displaying a commentable code development interface provided by an embodiment of the present invention;

[0044] Figure 4 A third flowchart of a method for displaying a commentable code development interface provided by an embodiment of the present invention;

[0045] Figure 5 One of the partial flow diagrams of the method for displaying a commentable code development interface provided by an embodiment of the present invention;

[0046] Figure 6and Figure 7 A schematic diagram of a first comment component provided by an embodiment of the present invention;

[0047] Figure 8 A schematic diagram of a code development interface and a second comment component provided by an embodiment of the present invention;

[0048] Fig. 9 A second partial flow chart of a method for displaying a commentable code development interface provided by an embodiment of the present invention;

[0049] Fig.10 One of the structural schematic diagrams of the code development device provided in the embodiment of the present invention;

[0050] Fig.11 A second structural diagram of a code development device provided in an embodiment of the present invention;

[0051] Fig.12 The third structural diagram of the code development device provided in the embodiment of the present invention. DETAILED DESCRIPTION

[0052] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and understandable, the present invention will be further described below with reference to the accompanying drawings and examples. However, the exemplary embodiments can be implemented in various forms and should not be understood as being limited to the embodiments described herein; on the contrary, these embodiments are provided to make the present invention more comprehensive and complete, and to fully convey the concepts of the exemplary embodiments to those skilled in the art. The same figure marks in the figures represent the same or similar structures, and thus their repeated descriptions will be omitted. The words expressing position and direction described in the present invention are all explained using the accompanying drawings as examples, but changes can be made as needed, and the changes made are all included in the scope of protection of the present invention. The drawings of the present invention are only used to illustrate the relative position relationship and do not represent the true proportions.

[0053] It should be noted that specific details are described in the following description to facilitate a full understanding of the present invention. However, the present invention can be implemented in a variety of other ways different from those described herein, and those skilled in the art can make similar generalizations without violating the connotation of the present invention. Therefore, the present invention is not limited to the specific embodiments disclosed below. The subsequent description of the specification is a preferred embodiment of the present application, but the description is for the purpose of illustrating the general principles of the present application and is not intended to limit the scope of the present application. The scope of protection of the present application shall be determined by the definition of the attached claims.

[0054] The display method and related hardware of the commentable code development interface provided by the embodiment of the present invention can be used for Figure 1 The code shown in the collaborative development system. Figure 1As shown, the code collaborative development system includes a code development device 100 and a code management platform 200. The code management platform 200 is connected to the code development device 100 in communication. The code development device 100 is a terminal device used by developers to implement functions such as code development, review, and testing. The code management platform 200 is used to receive and store the code submitted by each development end, send the stored code to the development end to allow the developer to further develop, review, test, etc., and control the version merging of the code project. The technical solution provided by the embodiment of the present invention is specifically described below.

[0055] The embodiment of the present invention provides a method for displaying a commentable code development interface, which is applied to a first code development device 100, wherein the first code development device is Figure 1 Any code development device in the code collaborative development system shown. Figure 2 and Figure 3 As shown, the method for displaying the commentable code development interface specifically includes:

[0056] S100: Render and display a code development interface, and display the collaboratively developed target code on the code development interface.

[0057] In the specific implementation process, the first code development device can obtain the collaboratively developed target code from local sources, code management platforms, etc. and render and display the code development interface based on the target code, and then continuously update the target code displayed on the code development interface based on the developer's editing operation on the target code. The target code may include the original version code originalCodes and the modified version code modifiedCodes. The developer using the development end can modify the modifiedCodes, submit it to the code management platform, review, comment on it, etc., and the originalCodes is used for comparison and display with the modifiedCodes for the developer's reference.

[0058] Furthermore, the code development interface provided by the embodiment of the present invention can be implemented by combining front-end technology and Monaco Editor technology. Monaco Editor is an open source code editor. It is the core part of Visual Studio Code and is designed as an independent, embeddable editor component that can be easily integrated into various applications. Figure 5 As shown, the initial process of rendering and displaying the code development interface and displaying the collaboratively developed target code on the code development interface specifically includes the following steps:

[0059] S110, calling a code editor component by running a code editor file through a browser, wherein the code editor component is written based on vue.

[0060] Accordingly, the code editor files may include standard Hyper Text Markup Language (HTML) files, Cascading Style Sheets (CSS) files, JavaScript (JS) files, and the like.

[0061] Vue is a JavaScript framework for building user interfaces. It is built on HTML files, CSS files, and JS files, and provides a declarative, component-based programming model. Vue.js adopts a bottom-up incremental development design, and the core library only focuses on the view layer, which makes it easy for developers to develop user interfaces efficiently.

[0062] In the process of developing the code editor file, it is necessary to introduce the necessary monaco-editor and monaco-editor-webpack-plugin dependencies in the code editor file project to ensure that Monaco Editor can be smoothly integrated into the code editor component written based on Vue. In addition, in the process of developing the code editor file, a div element needs to be created inside the code editor component as the document object model (DOM) container of Monaco Editor, and the Monaco Editor DOM container needs to be named through the ref attribute for subsequent operations.

[0063] S120. Obtain editor options (editorOptions) and target code.

[0064] In the specific implementation process, editorOptions can include at least one of the following:

[0065] Editor appearance theme, editor language, and code comparison strategy.

[0066] S130. Pass the currently acquired editorOptions and target code to the code editor component through the property props.

[0067] S140. Instantiate MonacoEditor according to props through the mounted lifecycle hook of the code editor component, display the code development interface corresponding to Monaco Editor, and display the target code of collaborative development on the code development interface.

[0068] In the process of instantiating Monaco Editor, the configuration of Monaco Editor can be merged with the default configuration of Monaco Editor according to the editorOptions passed by props to obtain the editor configuration that meets the requirements of the code development project, and then instantiate Monaco Editor based on this.

[0069] Furthermore, in the process of displaying the collaboratively developed code on the code development interface, if Monaco Editor is used as a diff editor to compare and display originalCodes and modifiedCodes, then in order to facilitate developers to quickly locate the difference code fragments between originalCodes and modifiedCodes, a navigation control can also be set on the code development interface, and the revealLineInCenter(line) method is called in response to the operation instruction of the navigation control to realize the code development interface to quickly switch to the position of the previous / next difference code fragment. The navigation control can be implemented by buttons, sliders, drop-down menus and other controls.

[0070] S500, displaying the first comment component (such as Figure 6 shown).

[0071] In a specific implementation process, the step S500 may be directly executed to display the first comment component after the code development interface is displayed, or the step S500 may be triggered to display the first comment component when certain conditions are met, and the present invention does not make too many limitations here.

[0072] In a specific implementation process, the first comment component may be a display component that is not targeted at a specific code segment in the target code, or may be a display component generated corresponding to a target code segment in the target code.

[0073] In the specific implementation process, the first comment component can be implemented by using components such as page pop-up windows, page floating windows, panels, sidebars, etc. Among them, components such as page pop-up windows, panels, sidebars, etc. can be developed and implemented by using components such as drawer or dialog. For example, for the first comment component implemented in a manner corresponding to the target code snippet, if the first comment component is implemented by using a page floating window, then the page floating window can specifically create a div container through the document.createElement method and write content, then get the cursor position, and configure the position of the page floating window on the code development interface by setting style.top and style.left.

[0074] In a specific implementation process, the comment editing control may include controls such as an input box, a button, and a slider.

[0075] S600: Receive a comment information editing operation for a target code segment through a comment editing control of a first comment component of a code development interface, and submit the comment information editing operation to a code management platform, so that the code management platform updates the target comment information corresponding to the target code segment in a target comment information set according to the comment information editing operation, and then enables at least one code development device to obtain the target comment information set and display the target comment information.

[0076] In the specific implementation process, different versions of the code correspond to different comment information sets. For example, originalCodes and modifiedCodes each correspond to a comment information set.

[0077] In the specific implementation process, the comment information sets of different versions of the code can be stored in the form of an object array commentList, which stores information such as the code line number, editing account, and corresponding version (such as original or modified) corresponding to each comment information.

[0078] Optionally, the comment information editing operation includes at least one of adding target comment information, modifying target comment information, and deleting target comment information.

[0079] Furthermore, when adding new target comment information, the reply function can also be implemented by citing existing target comment information, so that different developers can communicate with each other in a conversation-like manner.

[0080] Furthermore, when adding target comment information, the comment editing control can reference the target code snippet by default in the newly added target comment information, so that the developer can write the target comment information in combination with the specific content of the target code snippet.

[0081] Correspondingly, for the second code development device participating in the collaborative development of the target code, it implements the display method of the commentable code development interface in the following manner. Figure 1 Any code development device in the code collaborative development system shown, for example, the second code development device can be the same code development device as the first code development device, or the two can be different code development devices. Figure 3 (the first code development device and the second code development device are the same code development device) and Figure 4 (a case where the first code development device and the second code development device are different code development devices), the method specifically includes:

[0082] S100: Render and display a code development interface, and display the collaboratively developed target code on the code development interface.

[0083] In the specific implementation process, the specific implementation method of step S100 is the same as the corresponding content in the previous text (for example, some implementation methods can be implemented as follows Figure 5 For details, please refer to the corresponding content in the previous text, which will not be repeated here.

[0084] S200: Obtain a target comment information set corresponding to the target code from the code management platform, wherein different versions of the code correspond to different comment information sets.

[0085] Since the code may involve multiple modifications and adjustments during the collaborative development process, as well as operations such as merging code branches developed by multiple people, the code project may successively generate multiple different versions of the code. In the embodiment of the present invention, the different versions of the code in the code project each correspond to a comment information set, so as to establish a corresponding relationship between the code and the comment information, and avoid the situation where the working principle of the later modified code is too different from the comment information content of the developer's early edits on the code before the modification, which may cause misleading.

[0086] In the specific implementation process, the comment information sets of different versions of the code can be stored in the form of an object array commentList, which stores information such as the code line number, editing account, and corresponding version (such as original or modified) corresponding to each comment information.

[0087] In the specific implementation process, the execution time of step S200 can be set as needed so that the second code development device can obtain the latest target comment information set in time. For example, step S200 can be executed periodically; for another example, step S200 can be executed in response to a received comment display operation; for another example, step S200 can be executed in response to a trigger operation for the target code snippet as will be described later; the embodiment of the present invention does not make too many restrictions here.

[0088] Furthermore, for the code development interface implemented using front-end technology and Monaco Editor technology, after the second code development device obtains the target comment information set corresponding to the target code from the code management platform, it passes the currently obtained target comment information set to the code editor component through props.

[0089] S500, displaying the first comment component (such as Figure 6 and Figure 7As shown). If the target comment information set contains the target comment information corresponding to the target code snippet, then Figure 7 As shown, the target comment information is displayed in the first comment component.

[0090] In the specific implementation process, the remaining specific implementation methods of step S500 are the same as the corresponding content in the previous text. For details, please refer to the corresponding content in the previous text and will not be repeated here.

[0091] Further optionally, for a code development interface implemented using the front-end technology and the Monaco Editor technology, a method for displaying a commentable code development interface applied to the first code development device and the second code development device further includes (not shown in the figure):

[0092] Destroy Monaco Editor through the destroyed lifecycle hook of the code editor component to avoid memory leaks and other problems.

[0093] The method for displaying a commentable code development interface provided by an embodiment of the present invention provides a comment function for developers on the interface of a code editor. Compared with the way in which different developers communicate through e-mail, instant messaging software, etc. during collaborative development, the embodiment of the present invention provides a simpler way to achieve multi-person collaborative communication and discussion on the same piece of code. The comment function avoids the communication barriers caused by the lack of context in traditional emails or chat tools. The comment function can promote knowledge sharing and learning among members. New ideas and skills can be quickly spread within the team, thereby improving the technical level and innovation ability of the entire team. The embodiment of the present invention can be applied to the platform version management, code review, creation of merge requests and other scenarios. Team members can view code changes directly in the diff editor and make comments or initiate discussions through the comment function; it can also be applied to online programming education scenarios. Students can view the teacher's comments and modification suggestions directly in the editor when learning programming. This instant feedback mechanism helps students quickly master programming skills.

[0094] Optionally, in order to enable the configuration of the code development interface to be set according to the needs of the developer, for the code development interface implemented using the front-end technology and the Monaco Editor technology, the code editor component also includes an editor configuration setting control. Then, the display method for the commentable code development interface applied to the first code development device and the second code development device also includes (not shown in the figure):

[0095] In response to an operation instruction for the editor configuration setting control, the updateOptions method is called to update the editorOptions and passed to the code editor component through props to update the code development interface.

[0096] In the specific implementation process, the editor configuration setting control may include controls such as input boxes, buttons, sliders, and drop-down menus. For example, the editor configuration setting control includes an editor language configuration control, which is implemented as a drop-down menu on the code development interface. Then, after the developer reselects the editor language through the editor language configuration control, the editorOptions are updated by calling the updateOptions method according to the operation instruction of reselecting the editor language in the drop-down menu, and the code development interface is redisplayed.

[0097] In this way, by providing editor configuration settings controls on the code development interface, developers can personalize the code editor, such as switching comparison modes (line-by-line, side-by-side, etc.) and adjusting the size of the diff editor. At the same time, through props parameters and configuration instructions, the editor's various settings, such as themes, language support, comparison preferences, etc., can be dynamically adjusted, which can be customized for different business needs and usage scenarios of the editor with lower development difficulty, reducing the maintenance cost of the editor.

[0098] Alternatively, if Figure 3 and Figure 4 As shown, before step S500, the method for displaying a commentable code development interface applied to the second code development device further includes:

[0099] S300: In response to a trigger operation on a target code snippet, display a second comment component, wherein the second comment component includes a comment component trigger control.

[0100] In the specific implementation process, the second comment component can be implemented using page pop-up windows, page floating windows, panels, sidebars and other components. Among them, page pop-up windows, panels, sidebars and other components can be developed and implemented using components such as drawer or dialog. The page floating window can specifically create a div container and write content through the document.createElement method, then get the cursor position, and configure the position of the page floating window on the code development interface by setting style.top and style.left. The comment component trigger control may include buttons, drop-down menus and other controls.

[0101] S400: Determine whether a target interaction instruction for triggering a control of a comment component is received.

[0102] If the result of step S400 is yes, then step S500 is executed. If the result of step S400 is no, then the process returns to step S300.

[0103] In a specific implementation process, the target interaction instruction may include an instruction such as a cursor single-clicking the comment component to trigger a control, a cursor double-clicking the comment component to trigger a control, etc., and the embodiment of the present invention does not make too many limitations here.

[0104] During the specific implementation process, if the target comment information set includes target comment information corresponding to the target code snippet, the second comment component can also display at least part of the target comment information to facilitate developers to preview the target comment information, and then display the first comment component to display the complete target comment information after the target interaction instruction of the control is triggered for the comment component.

[0105] Further optionally, the triggering operation for the target code snippet may include moving the cursor to the location of the target code snippet in the code development interface, left-clicking the target code snippet, left-double-clicking the target code snippet, right-clicking the target code snippet, right-double-clicking the target code snippet, etc. If the triggering operation for the target code snippet is moving the cursor to the location of the target code snippet in the code development interface, the triggered mouse event can be monitored through a pre-registered mouse event handler (including editor.onMouseMove, editor.onMouseLeave, etc.), and when it is determined according to the monitored mouse event that the cursor moves to the location of the target code snippet in the code development interface, a preset response method for displaying the second comment component is executed to display the second comment component, and when the cursor moves away from the location of the target code snippet in the code development interface, the execution of the preset response method is terminated and the second comment component is removed in time to avoid confusion of information displayed on the code development interface.

[0106] Furthermore, since developers generally only comment on some code snippets in all codes, in order to facilitate other developers using the second code development device to quickly find the target code snippet with corresponding target comment information in the target code, after executing step S200, the target comment information set can be traversed, and a marking component can be added to the code snippet with corresponding comment information in the code development interface. The marking component can be implemented in the form of an icon, etc. For example Figure 8 As shown, the line number of the target code snippet with the target comment information (e.g. Figure 8 A mark with a special icon is displayed on lines 222 and 229 as shown to remind the developer that the target code snippet has target comment information.

[0107] Furthermore, in the scenario of collaborative code development, different developers have different responsibilities, for example, some developers are responsible for code writing, some developers are responsible for testing and verification, and some developers are responsible for issuing tasks, etc. Therefore, the content of the comment information is generally related to the responsibilities of the developer who edited the comment information. Then, in the process of displaying the second comment component on the second code development device, the information of the editor of the target comment information corresponding to the target code snippet can be displayed in the second comment component, so that developers using the code development interface can know the approximate content of the target comment information.

[0108] Then optionally, if the target comment information set contains target comment information corresponding to the target code snippet, then Figure 8 As shown, the second comment component also includes a target account avatar for editing the target comment information.

[0109] If Fig. 9 As shown, in the process of displaying the second comment component, the target account avatar is displayed in the following manner:

[0110] S311. Execute the model.deltaDecorations method in the page structure data corresponding to the code development interface to remove the existing decoration class names of the containers corresponding to other code snippets, and add the target decoration class name to the target container corresponding to the target code snippet.

[0111] S312: Determine the target account for editing the target comment information.

[0112] S313. Configure the target account avatar CSS attribute for the CSS attribute corresponding to the target decoration class name by executing the setAttribute method in the page style data corresponding to the code development interface, so as to display the target account avatar in the second comment component.

[0113] In the specific implementation process, the page structure data may include the HTML file, DOM, rendering structure tree (Render Tree) and the like corresponding to the code development interface. For example, the code in the HTML file corresponding to the code development interface may be modified directly to implement the step S311; for another example, the DOM generated according to the HTML file corresponding to the code development interface may be modified to implement the step S311, so that the display content of the code development interface can be dynamically adjusted together with the subsequent steps without modifying the HTML file. Similarly, the page style data may include the CSS file, Cascading Style SheetsObject Model (CSSOM), rendering structure tree and the like corresponding to the code development interface. For example, the code in the CSS file corresponding to the code development interface may be modified directly to implement the step S313; for another example, the CSSDOM generated according to the CSS file corresponding to the code development interface may be modified to implement the step S313, so that the display content of the code development interface can be dynamically adjusted together with the aforementioned steps without modifying the CSS file.

[0114] In the specific implementation process, the deltaDecorations method contains multiple parameters: the range parameter controls the scope of influence, and the linesDecorationsClassName parameter adds a class name to the target container. By using the deltaDecorations method to add the target decoration class name to the target div container of the target code snippet in the page structure data (for example, the target decoration class name is: public className + the unique identifier of the target comment information), the page style data captures the element element through the same target decoration class name and executes the setAttribute method, and configures the target account avatar CSS attribute for the CSS attribute corresponding to the target decoration class name (for example, the background attribute), and finally achieves the effect of dynamically rendering the target account avatar in the editor.

[0115] Based on the same inventive concept, the embodiment of the present invention also provides a code development device, such as Fig.10 As shown, including:

[0116] The code display unit U1 is used to render and display the code development interface, and display the collaboratively developed target code on the code development interface;

[0117] The comment editing unit U3 is used to receive a comment information editing operation for a target code fragment through a comment editing control of a first comment component of the code development interface, and submit the comment information editing operation to the code management platform, so that the code management platform updates the target comment information corresponding to the target code fragment in a target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information.

[0118] Optionally, the comment information editing operation includes at least one of adding target comment information, modifying target comment information, and deleting target comment information.

[0119] Optionally, the code display unit U1 initially renders and displays a code development interface, and displays the collaboratively developed target code on the code development interface, specifically including:

[0120] Running the code editor file in a browser calls a code editor component; the code editor component is written based on vue;

[0121] Get editor options editorOptions and the target code, and pass them to the code editor component through the props property;

[0122] Through the mounted lifecycle hook of the code editor component, the Monaco Editor is instantiated according to the props, a code development interface corresponding to the Monaco Editor is displayed, and the target code of collaborative development is displayed on the code development interface.

[0123] Optionally, the code development device further includes:

[0124] A comment display unit U2 is used to obtain a target comment information set from the code management platform; if the target comment information set contains target comment information corresponding to the target code snippet, the target comment information is displayed in the first comment component;

[0125] Among them, different versions of codes correspond to different sets of comment information.

[0126] Optionally, the comment display unit U2 is further configured to: after acquiring a target comment information set from the code management platform, pass the currently acquired target comment information set to a code editor component via a property props.

[0127] Optionally, the comment display unit U2 is further configured to: display a second comment component in response to a trigger operation on the target code snippet; wherein the second comment component includes a comment component trigger control;

[0128] If a target interaction instruction for triggering a control for the comment component is received, the first comment component corresponding to the target code snippet is displayed.

[0129] Optionally, if the target comment information set includes target comment information corresponding to the target code snippet, the second comment component further includes editing a target account avatar of the target comment information;

[0130] When displaying the second comment component, the comment display unit U2 displays the target account avatar in the following manner:

[0131] By executing the model.deltaDecorations method in the page structure data corresponding to the code development interface to remove the existing decoration class names of the containers corresponding to other code snippets, and adding the target decoration class name to the target container corresponding to the target code snippet;

[0132] Determine a target account for editing the target comment information;

[0133] The target account avatar CSS attribute is configured for the cascading style sheet CSS attribute corresponding to the target decoration class name by executing the setAttribute method in the page style data corresponding to the code development interface, so as to display the target account avatar in the second comment component.

[0134] Optionally, in response to the triggering operation on the target code snippet, displaying the second comment component specifically includes:

[0135] Monitor the triggered mouse event through a pre-registered mouse event handler, and when the cursor is determined to be moved to the location of the target code snippet in the code development interface according to the monitored mouse event, execute a preset response method for displaying the second comment component;

[0136] Wherein, the mouse event handler includes editor.onMouseMove and / or editor.onMouseLeave.

[0137] Optionally, the code editor component further includes an editor configuration setting control;

[0138] The code development device also includes:

[0139] The editor configuration setting unit U4 is used to call the updateOptions method to update editorOptions in response to an operation instruction for the editor configuration setting control, and pass it to the code editor component through props to update the code development interface.

[0140] Based on the same inventive concept, an embodiment of the present invention further provides a code development device, including the code display unit U1 and comment display unit U2 described above, and further optionally including the comment editing unit U3 and editor configuration setting unit U4 described above.

[0141] It should be understood that the embodiments of the code development device described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the coupling or direct coupling or communication connection between each other shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or units, which can be electrical, mechanical or other forms. The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, each functional unit in the present application may be integrated in a processing unit, or each unit may exist physically separately, or two or more units may be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0142] For example, Fig.11 As shown, the code development device can encapsulate the software functional unit that implements the display method of the code development interface into a commentable diff editor module M100, and further divide it into a code editor component M101, a props parameter module M102, a diff editor abstract logic module M103, and a comment component module M104.

[0143] The code editor component M101 is used to encapsulate the diff function of Monaco Editor into a Vue component and execute it, including the instantiation, configuration, event monitoring (such as content changes, saving, etc.) of Monaco Editor and the destruction of MonacoEditor instances.

[0144] The props parameter module M102 is responsible for receiving and processing various business parameter props, including originalCodes and modifiedCodes, editorOptions, target comment information set, etc., and passing the props to the code editor component M101 after parsing.

[0145] The diff editor abstract logic module M103 is used to integrate the method of parsing props parameters, converting them into a format that Monaco Editor can understand and render and outputting the diff algorithm; registering and managing editor interaction events to implement advanced functions such as switching comparison modes and quickly navigating to the next difference; integrating the comment function, when the user hovers the mouse anywhere on the code line, the event listening mechanism provided by Monaco Editor captures this behavior. Subsequently, using the deltaDecorations API, visual markers (such as highlights, icons, etc.) are dynamically added to the hovered code line to indicate that there are comments or comments can be added to the line of code, and checking whether the Props parameter already contains the comment information of the line. If so, the comment content is displayed to the user in the form of a floating box or sidebar through the decorator (Decoration) technology.

[0146] The comment component module M104 is used to provide a rich text editor, and developers can initiate or participate in code discussions through the comment component module M104.

[0147] Since the working principle of the code development device is basically consistent with the display method of the commentable code development interface applied to the first code development device and / or the second code development device described above, the corresponding content of the display method of the commentable code development interface applied to the first code development device and / or the second code development device described above can be referred to and will not be repeated here.

[0148] Based on the same inventive concept, the embodiment of the present application also provides a code development device, such as Fig.12 As shown, it includes: a processor 110 and a memory 120 for storing executable instructions of the processor 110; wherein the processor 110 is configured to execute the instructions to implement the display method of the commentable code development interface applied to the first code development device and / or the second code development device.

[0149] In the specific implementation process, the device may have relatively large differences due to different configurations or performances, and may include one or more processors 110, memory 120, and computer-readable storage medium 130. The memory 120 and / or computer-readable storage medium 130 include one or more applications 131 or data 132. The memory 120 and / or computer-readable storage medium 130 may also include one or more operating systems 133, such as Windows, Mac OS, Linux, IOS, Android, Unix, FreeBSD, etc. Among them, the memory 120 and the computer-readable storage medium 130 may be short-term storage or persistent storage. The application 131 may include one or more modules ( Fig.12 ), each module may include a series of instruction operations. Further, the processor 110 may be configured to communicate with the computer-readable storage medium 130, and execute a series of instruction operations in the computer-readable storage medium 130 on the device. The device may also include one or more power supplies ( Fig.12 one or more network interfaces 140, the network interface 140 including a wired network interface 141 and / or a wireless network interface 142; one or more input / output interfaces 143.

[0150] Based on the same inventive concept, an embodiment of the present invention provides a computer-readable storage medium, which stores a computer program code. When the computer program code runs on a computer, the computer implements the method for displaying a commentable code development interface applied to a first code development device and / or a second code development device.

[0151] The computer-readable storage medium may be any available medium that can be stored by a computer or a data storage device such as a server or a data center that includes one or more available media. The available medium may be a magnetic medium (such as a floppy disk, a hard disk, a USB flash drive, a magnetic tape, a read-only memory (ROM), a random access memory (RAM)), an optical medium (such as a high-density digital video disc (DVD), a video compact disc (VCD)), or a semiconductor medium (such as a solid-state drive (SSD)).

[0152] Since the principle of solving the problem by the above-mentioned computer-readable storage medium is consistent with the method for displaying a commentable code development interface applied to the first code development device and / or the second code development device as described above, the implementation of the above-mentioned computer-readable storage medium can refer to the implementation of the method, and the repeated parts will not be repeated.

[0153] Based on the same inventive concept, an embodiment of the present application also provides a computer program product, which includes: computer program code, when the computer program code is run on a computer, the computer implements the method for displaying a commentable code development interface applied to the first code development device and / or the second code development device.

[0154] The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions may be stored in a computer-readable storage medium, or transmitted from a computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be transmitted from a website site, a computer, a server, or a data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server, or data center.

[0155] Since the principle of solving the problem by the above-mentioned computer program product is consistent with the method for displaying a commentable code development interface applied to the first code development device and / or the second code development device as described above, the implementation of the above-mentioned computer program product can refer to the implementation of the method, and the repeated parts will not be repeated.

[0156] The display method and related hardware of the commentable code development interface provided by the embodiment of the present invention provide developers with a comment function on the interface of the code editor. Compared with the way different developers communicate through email, instant messaging software, etc. during the collaborative development process, the embodiment of the present invention provides a simpler way to achieve multi-person collaborative communication and discussion on the same section of code. The comment function avoids the communication barriers caused by the lack of context in traditional emails or chat tools.

[0157] 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.

[0158] 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 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 produce 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.

[0159] 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.

[0160] 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.

[0161] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A method for displaying a commentable code development interface, characterized in that: include: Rendering and displaying a code development interface, and displaying the collaboratively developed target code on the code development interface; A comment information editing operation for a target code snippet is received through a comment editing control of a first comment component of the code development interface, and the comment information editing operation is submitted to the code management platform, so that the code management platform updates the target comment information corresponding to the target code snippet in a target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information.

2. The method according to claim 1, characterized in that The comment information editing operation includes at least one of adding target comment information, modifying target comment information, and deleting target comment information.

3. The method according to claim 1, characterized in that The initial rendering displays the code development interface, and displays the target code of the collaborative development on the code development interface, specifically including: Running the code editor file in a browser calls a code editor component; the code editor component is written based on vue; Get editor options editorOptions and the target code, and pass them to the code editor component through the props property; Through the mounted lifecycle hook of the code editor component, the Monaco Editor is instantiated according to the props, a code development interface corresponding to the Monaco Editor is displayed, and the target code of collaborative development is displayed on the code development interface.

4. The method according to claim 1 or 3, characterized in that The method further comprises: Acquire a target review information set from the code management platform; If the target comment information set includes target comment information corresponding to the target code snippet, displaying the target comment information in the first comment component; Among them, different versions of codes correspond to different sets of comment information.

5. The method according to claim 4, characterized in that After obtaining the target comment information set from the code management platform, the method further includes: The target comment information set currently obtained is passed to the code editor component through the property props.

6. The method according to claim 1 or 3, characterized in that: The method further comprises: In response to a trigger operation on the target code snippet, displaying a second comment component; wherein the second comment component includes a comment component trigger control; If a target interaction instruction for triggering a control for the comment component is received, the first comment component corresponding to the target code snippet is displayed.

7. The method according to claim 6, characterized in that If the target comment information set includes target comment information corresponding to the target code snippet, the second comment component further includes editing a target account avatar of the target comment information; In the process of displaying the second comment component, the target account avatar is displayed in the following manner: By executing the model.deltaDecorations method in the page structure data corresponding to the code development interface to remove the existing decoration class names of the containers corresponding to other code snippets, and adding the target decoration class name to the target container corresponding to the target code snippet; Determine a target account for editing the target comment information; The target account avatar CSS attribute is configured for the cascading style sheet CSS attribute corresponding to the target decoration class name by executing the setAttribute method in the page style data corresponding to the code development interface, so as to display the target account avatar in the second comment component.

8. The method according to claim 6, characterized in that The step of displaying a second comment component in response to a trigger operation on the target code snippet specifically includes: Monitor the triggered mouse event through a pre-registered mouse event handler, and when the cursor is determined to be moved to the location of the target code snippet in the code development interface according to the monitored mouse event, execute a preset response method for displaying the second comment component; Wherein, the mouse event handler includes editor.onMouseMove and / or editor.onMouse Leave.

9. The method according to claim 3, characterized in that The code editor component also includes an editor configuration settings control; The method further comprises: In response to an operation instruction for configuring the editor setting control, the updateOptions method is called to update the editorOptions, and props are passed to the code editor component to update the code development interface.

10. A code development device, characterized in that: include: A code display unit, used for rendering and displaying a code development interface, and displaying the collaboratively developed target code on the code development interface; A comment editing unit is used to receive a comment information editing operation for a target code fragment through a comment editing control of a first comment component of the code development interface, and submit the comment information editing operation to the code management platform, so that the code management platform updates the target comment information corresponding to the target code fragment in a target comment information set according to the comment information editing operation, so that at least one code development device obtains the target comment information set and displays the target comment information.

11. A code development device, characterized in that: include: a processor and a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the method for displaying a commentable code development interface as described in any one of claims 1-9.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program code, and when the computer program code is executed on a computer, the computer executes the method for displaying a commentable code development interface as described in any one of claims 1 to 9.

13. A computer program product, characterized in that The computer program product comprises: a computer program code, which, when executed on a computer, enables the computer to execute the method for displaying a commentable code development interface as claimed in any one of claims 1 to 9.

Images