可评论的代码开发界面的显示方法及相关硬件与流程

本发明涉及程序代码开发，尤指一种可评论的代码开发界面的显示方法及相关硬件。

背景技术：

1、目前，由于计算机程序代码的复杂度日益加大，计算机程序代码开发的过程已普遍采用多人协作开发模式。在多人协作开发过程中，参与协作开发的开发人员常有在线上处理合并请求、代码评审、版本管理等工作的需要。但是，目前在代码协作开发所涉及的上述场景中，不同的开发人员针对程序代码进行交流沟通的过程主要采用电子邮件、即时通信软件、线下会议或在线会议等方式，交流沟通过程仍然存在一定的不便。例如电子邮件、即时通信软件、在线会议等方式需要开发人员在代码编辑器以外额外安装另一个软件使用，线下会议需要各开发人员同时到场。协作开发场景亟需一种更为方便的交流沟通方式。

技术实现思路

1、本发明实施例提供一种可评论的代码开发界面的显示方法及相关硬件，用以提供一种较为方便的代码协作开发交流方式。

2、本发明实施例提供了一种可评论的代码开发界面的显示方法，包括：

3、渲染显示代码开发界面，并在所述代码开发界面上显示协作开发的目标代码；

4、通过所述代码开发界面的第一评论组件的评论编辑控件接收针对目标代码片段的评论信息编辑操作，将所述评论信息编辑操作提交至所述代码管理平台，以使所述代码管理平台根据所述评论信息编辑操作更新目标评论信息集中所述目标代码片段对应的目标评论信息，以使至少一个代码开发设备获取所述目标评论信息集并显示所述目标评论信息。

5、可选地，所述评论信息编辑操作包括新增目标评论信息、修改目标评论信息、删除目标评论信息中的至少一项。

6、可选地，初始渲染显示代码开发界面，并在所述代码开发界面上显示协作开发的目标代码，具体包括：

7、通过浏览器运行所述代码编辑器文件调用代码编辑器组件；所述代码编辑器组件基于vue编写；

8、获取编辑器选项editoroptions、所述目标代码，并通过属性props传递给代码编辑器组件；

9、通过所述代码编辑器组件的mounted生命周期钩子，根据所述props实例化摩纳哥编辑器monaco editor，显示所述monaco editor对应的代码开发界面，并在所述代码开发界面上显示协作开发的目标代码。

10、可选地，所述方法还包括：

11、从所述代码管理平台获取目标评论信息集；

12、若所述目标评论信息集中包含与所述目标代码片段对应的目标评论信息，则在所述第一评论组件中显示所述目标评论信息；

13、其中，不同版本的代码对应不同的评论信息集。

14、可选地，从所述代码管理平台获取目标评论信息集之后，所述方法还包括：

15、将当前获取的所述目标评论信息集通过属性props传递给代码编辑器组件。

16、可选地，所述方法还包括：

17、响应于针对所述目标代码片段的触发操作，显示第二评论组件；其中所述第二评论组件包括评论组件触发控件；

18、若接收到针对所述评论组件触发控件的目标交互指令，则显示所述目标代码片段对应的所述第一评论组件。

19、可选地，若所述目标评论信息集中包含与所述目标代码片段对应的目标评论信息，则所述第二评论组件还包括编辑所述目标评论信息的目标账户头像；

20、在显示所述第二评论组件的过程中，通过如下方式显示目标账户头像：

21、通过在所述代码开发界面对应的页面结构数据中执行model.deltadecorations方法以去除其它代码片段对应的容器的已有的装饰类名，并为所述目标代码片段对应的目标容器添加目标装饰类名；

22、确定编辑所述目标评论信息的目标账户；

23、通过在所述代码开发界面对应的页面样式数据中执行setattribute方法为所述目标装饰类名对应的层叠样式表css属性配置目标账户头像css属性，以在所述第二评论组件中显示所述目标账户头像。

24、可选地，所述响应于针对所述目标代码片段的触发操作，显示第二评论组件，具体包括：

25、通过预注册的鼠标事件处理器监听触发的鼠标事件，根据监听到的鼠标事件确定光标移动至所述代码开发界面中目标代码片段所在位置时，执行用于显示第二评论组件的预设响应方法；

26、其中，所述鼠标事件处理器包括editor.onmousemove和/或editor.onmouseleave。

27、可选地，所述代码编辑器组件还包括编辑器配置设置控件；

28、所述方法还包括：

29、响应于针对所述编辑器配置设置控件的操作指令，调用updateoptions方法更新editoroptions，并通过props传递给所述代码编辑器组件以更新所述代码开发界面。

30、基于同一发明构思，本发明实施例还提供了一种代码开发设备，包括：

31、代码显示单元，用于渲染显示代码开发界面，并在所述代码开发界面上显示协作开发的目标代码；

32、评论编辑单元，用于通过所述代码开发界面的第一评论组件的评论编辑控件接收针对目标代码片段的评论信息编辑操作，将所述评论信息编辑操作提交至所述代码管理平台，以使所述代码管理平台根据所述评论信息编辑操作更新目标评论信息集中所述目标代码片段对应的目标评论信息，以使至少一个代码开发设备获取所述目标评论信息集并显示所述目标评论信息。

33、基于同一发明构思，本发明实施例还提供了一种代码开发设备，包括：处理器和用于存储所述处理器可执行指令的存储器；

34、其中，所述处理器被配置为执行所述指令，以实现所述的可评论的代码开发界面的显示方法。

35、基于同一发明构思，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行所述的可评论的代码开发界面的显示方法。

36、基于同一发明构思，本发明实施例还提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行所述的可评论的代码开发界面的显示方法。

37、本发明有益效果如下：

38、本发明实施例提供的可评论的代码开发界面的显示方法及相关硬件，通过为开发人员在代码编辑器的界面上提供评论功能，相比于协作开发过程中不同的开发人员通过电子邮件、即时通信软件等进行交流的方式，本发明实施例提供了一种较为简便的方式实现对同一段代码多人协作交流讨论，评论功能避免了传统邮件或聊天工具中因上下文缺失而导致的沟通障碍。

技术特征：

1.一种可评论的代码开发界面的显示方法，其特征在于，包括：

2.如权利要求1所述的方法，其特征在于，所述评论信息编辑操作包括新增目标评论信息、修改目标评论信息、删除目标评论信息中的至少一项。

3.如权利要求1所述的方法，其特征在于，初始渲染显示代码开发界面，并在所述代码开发界面上显示协作开发的目标代码，具体包括：

4.如权利要求1或3所述的方法，其特征在于，所述方法还包括：

5.如权利要求4所述的方法，其特征在于，从所述代码管理平台获取目标评论信息集之后，所述方法还包括：

6.如权利要求1或3所述的方法，其特征在于，所述方法还包括：

7.如权利要求6所述的方法，其特征在于，若所述目标评论信息集中包含与所述目标代码片段对应的目标评论信息，则所述第二评论组件还包括编辑所述目标评论信息的目标账户头像；

8.如权利要求6所述的方法，其特征在于，所述响应于针对所述目标代码片段的触发操作，显示第二评论组件，具体包括：

9.如权利要求3所述的方法，其特征在于，所述代码编辑器组件还包括编辑器配置设置控件；

10.一种代码开发设备，其特征在于，包括：

11.一种代码开发设备，其特征在于，包括：处理器和用于存储所述处理器可执行指令的存储器；

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行上述如权利要求1-9任一项所述的可评论的代码开发界面的显示方法。

13.一种计算机程序产品，其特征在于，所述计算机程序产品包括：计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行上述如权利要求1-9任一项所述的可评论的代码开发界面的显示方法。

技术总结本发明实施例提供了一种可评论的代码开发界面的显示方法及相关硬件，涉及程序代码开发技术领域，包括：渲染显示代码开发界面，并在代码开发界面上显示协作开发的目标代码；通过代码开发界面的第一评论组件的评论编辑控件接收针对目标代码片段的评论信息编辑操作，将评论信息编辑操作提交至代码管理平台，以使代码管理平台根据评论信息编辑操作更新目标评论信息集中目标代码片段对应的目标评论信息，以使至少一个代码开发设备获取目标评论信息集并显示目标评论信息。通过为开发人员在代码编辑器的界面上提供评论功能，提供了一种较为简便的方式实现对同一段代码多人协作交流讨论，避免了传统邮件或聊天工具中因上下文缺失而导致的沟通障碍。技术研发人员：张一涵,邓文瑜,郭捷捷,刘清华,杨毅受保护的技术使用者：中国电信股份有限公司技术创新中心技术研发日：技术公布日：2025/1/6