(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210262262.X (22)申请日 2022.03.17 (71)申请人 浪潮云信息技 术股份公司 地址 250100 山东省济南市高新区浪潮路 1036号浪潮科技园S01号楼 (72)发明人 翟文莉　玄德　肖传楠　杨旭　 李明强　 (74)专利代理 机构 济南信达专利事务所有限公 司 37100 专利代理师 姜丽洁 (51)Int.Cl. G06F 8/38(2018.01) G06F 9/451(2018.01) (54)发明名称 一种项目预览组件的实现方法及系统 (57)摘要 本发明涉及前端Angular框架技术领域， 具 体提供了一种项目预览组件的实现方法， 所述组 件包括数据处理模块、 渲染模块以及交互模块， 数据处理模块根据用户对项目的配置， 从后台获 取项目的数据， 将数据处理后分为项目结构数据 和项目源码数据； 渲染模块封装NG ‑ZORROR的树 形控件及CodeMirror组件， 采用CodeMirror组件 实现单个文件源码的展示； 交互模块对用户在项 目结构的单机、 双击做出交互处理， 以查看项目 目录及源码， 在用户下载单个文件源码时， 下载 选中的文件。 与现有技术相比， 本发明减少了开 发中大量冗余代码， 且引用方式简单， 方便开发 人员使用。 权利要求书2页 说明书5页 附图1页 CN 114691133 A 2022.07.01 CN 114691133 A 1.一种项目预览组件的实现方法， 其特征在于， 所述组件进行数据处理、 渲染以及交 互， 数据处理时根据用户对项目的配置， 从后台获取项目的数据， 将数据处理后分为项目 结构数据和项目源码数据； 进行渲染时封装NG ‑ZORROR的树形控件及CodeMirror组件， 采用所述树形控件渲染项 目结构数据内容， 区分文件夹及单个文件的页面渲染， 采用CodeMirror组件实现单个文件 源码的展示； 对用户在项目结构的单机、 双击做出交互处理， 以查看项目目录及源码， 在用户下载单 个文件源码时， 下 载选中的文件。 2.根据权利要求1所述的一种项目预览组件的实现方法， 其特征在于， 数据处理时， 采 用ngOnChanges监听父组件传参变化， 在传参后调用后台方法加载目录及 源码详情数据， 所 述加载目录及源码详情数据处理成树形控件 能渲染的数据结构， NG ‑ZORROR的树形控件的 数据结构是在A rray中存放 不限个数的Object对象， 每一个Object对象对应一个树节点。 3.根据权利要求2所述的一种项目预览组件的实现方法， 其特征在于， 所述每一个 Object对象对应一个树节点， 叶子节点的Object对象中属性为title和key， 其中， title用 于显示树节点， key为该节点的id。 4.根据权利要求3所述的一种 项目预览组件的实现方法， 其特征在于， 如果当前判断的 节点下存在子节点， 则为非叶子节点， 需要children属性， children属性的数据类型为 Array类型， 当中可存放不限个数的Object对象， children下的Object对象除了title和key 属性外， 还需要isLeaf属性， 用于判断当前节点是否为叶子节点。 5.根据权利要求4所述的一种 项目预览组件的实现方法， 其特征在于， 若节点为非叶子 节点， 则采用文件夹ico n， 如果为叶子节点， 在自定义目录结构的ico n中则采用文件ico n。 6.根据权利要求5所述的一种 项目预览组件的实现方法， 其特征在于， 对项目结构的渲 染采用NG‑ZORROR组件库中的树组件， 使用nzTreeTemplate实现自定义目录结构， 提供自动 展开根节点数据功能， 根据文件类型提供不同ico n以区分文件类型及文件夹类型的节点。 7.根据权利要求6所述的一种 项目预览组件的实现方法， 其特征在于， 项目源码的渲染 采用CodeMir ror组件， 渲染模式 中通过对Codemir ror的配置进行项目源码渲染。 8.根据权利要求7所述的一种项目预览组件的实现方法， 其特征在于， 在进行交互时， 初始化页面的时候， 用户未选择待查看的文件， 则要设置 默认选中的节点， 并展示选中的源 码， 其中， 默认选中的文件是项目中必然存在且重要的文件。 9.根据权利要求8所述的一种 项目预览组件的实现方法， 其特征在于， 默认选中的操作 也需要在数据处理中给相应树节点设置isSelected属性， 当用户单击节点时， 需要增加点 击事件， 如果节点 为单个可 见文件， 则在项目源码渲染区域显示该文件的源码； 当用户双击文件夹节点时， 需要增加双击事件， 打开文件夹， 展示一下子节点， 此外， 当 用户点击下 载单个文件 源码的按 钮时， 需要 进行处理， 以下载选中的文件。 10.一种项目预览组件的实现系统， 其特征在于， 所述组件包括数据处理模块、 渲染模 块以及交 互模块， 所述数据处理模块用于根据用户对项目的配置， 从后台获取项目的数据， 将数据处理 后分为项目结构数据和项目源码数据；权　利　要　求　书 1/2 页 2 CN 114691133 A 2所述渲染模块用于封装NG ‑ZORROR的树形控件及CodeMirror组件， 采用所述树形控件 渲染项目结构数据内容， 区分文件夹及单个文件的页面渲染， 采用CodeMirror组件实现单 个文件源码的展示； 所述交互模块用于对用户在项目结构的单机、 双击做出交互处理， 以查看项目目录及 源码， 在用户下 载单个文件 源码时， 下 载选中的文件。权　利　要　求　书 2/2 页 3 CN 114691133 A 3