Merge pull request '填充了第三方服务的WebIDE和重晴鸟代码溯源的markdown内容' (#14) from hrlsm/gitlink_help_center:master into master

docs/第三方服务/WebIDE.md

@@ -1,4 +1,114 @@
 ---
 sidebar_label: 'WebIDE'     
-sidebar_position: 9    
----
+sidebar_position: 9 
+   
+---
+## WebIDE背景
+传统的代码托管平台提供了代码仓库的 Git/SVN 的管理，可以在平台上做代码浏览、代码评审、缺陷管理、CI 流水线等和代码相关的活动。其中代码浏览、代码评审所用的编辑器组件一般为 CodeMirror，代码高亮使用 highlight.js，常常只提供了读代码的场景。蚂蚁研发效能部门云研发团队通过自研的 OpenSumi 框架及基于 OpenSumi 框架做的专门针对于 Web IDE（无远程容器）场景的极速版 Web IDE 框架，与内部代码托管平台碰撞出了创新型的、只依赖浏览器的、IDE 风格的代码阅读、代码编写、代码提交、代码运行、代码评审等场景，极大的提高了用户在代码托管平台阅读代码、代码评审、轻研发等场景的效率。本次蚂蚁研发效能云研发团队和 CCF（中国计算机学会）GitLink 代码托管平台合作，将内部极速版 Web IDE 应用到了 Gitlink 代码托管平台上，解决了长久以来的用户反馈的很多体验问题。
+
+## Web IDE 核心能力
+对标有容器的标准版，极速版 IDE 主要在读、写、运行、提交等方面进行了探索：<br/>
+ **1. 读：** <br/>
+  a. 适配了多种代码托管平台，例如 Gitlink、Github、Gitlab 等代码托管平台，业务可以非常方便的使用代码服务的能力<br/>
+  b. 内置了包括 Java、TS/JS、C++、Go、Python、Rust 等几十种常见语言的语法高亮支持<br/>
+  c. 支持了如 Git Blame、GitGraph 等代码阅读辅助插件<br/>
+ **2. 写：**<br/>
+  a. 支持 HTML/CSS/JS/Markdown 等在线语言服务能力，支持错误诊断能力<br/>
+  b. 浏览器文件系统<br/>
+ **3. 运行：**<br/>
+  a. 支持基于 Skypack 的前端代码运行方案<br/>
+  b. 支持基于 Pyodide 的 Python 运行<br/>
+ **4. 提交：**<br/>
+  a. 支持 WebSCM，提供分支切换/新增、代码提交等能力<br/>
+如果说以 CodeMirror、Monaco 为代表的浏览器 IDE 组件为 Web IDE 1.0，那拥有上述能力的极速版 Web IDE 就是 Web IDE 2.0。极速版 Web IDE 方案在蚂蚁内部与 2021 年 4 月上线，承接了代码阅读、代码评审、在线笔试、代码检查结果反馈、轻量在线研发等众多场景，同年 8 月 vscode.dev 和 github.dev 上线，与之相比，极速版 Web IDE 利用 OpenSumi 框架的高扩展性，业务可以更加深度的定制模块与插件，让业务有多的想象空间。
+
+## 代码阅读
+在代码托管平台上进行代码阅读时经常需要查看当前方法在哪里被引用、当前接口在哪里被实现，极速版 Web IDE 提供编辑器 + 插件的能力，解决了上述用户需求：
+![](../../static/img/di_san_fang/WebIDE/代码引用.png)<br/>
+<center>代码引用查看</center><br/>
+Gitlink 通过实现 Blame 插件，完成了编辑器 Blame 查看的能力：<br/>
+
+![](../../static/img/di_san_fang/WebIDE/当前代码.png)<br/>
+<center>当前代码行作者、修改日期查看</center><br/>
+
+
+## 代码评审
+代码评审功能用户长久以来一直反馈以下几个问题：<br/>
+
+1.语言服务缺失，阅读效率低：缺少代码高亮、提示、跳转、查看引用及大纲功能<br/>
+2.大 PR 浏览体验不佳：统计显示 Gitlink PR 平均有 14-17 个变更文件，传统代码评审交互一般为代码 Diff 组件流式展示，对于一些变更文件多、文件内部较大的场景 Review 体验不佳，常常要等待很久。<br/>
+3.代码修改流程重，耗时久：代码 Diff 组件只有读能力，无法快速修改一些拼写或 lint 错误，需要在本地找到对应文件后修改提交 针对于上述需求，蚂蚁云研发团队和 Gitlink 打造了 IDE 风格的代码评审场景：<br/>
+![](../../static/img/di_san_fang/WebIDE/IDE模式的代码评审.png)<br/>
+<center>IDE模式的代码评审</center><br/>
+1.变更树 a. 提供平铺和树状两种浏览方式 b. 变更树使用 OpenSumi Recycle 组件，对于大 PR 也能通过虚拟滚动高性能的查看变更文件<br/>
+2.工具栏 a. 提供 IDE 编辑器基础设置，如字体大小、编码、忽略收尾空格等 b. 快速切换当前分支历史版本与基线的对比 c. 变更文件快速定位、设置已查看，并支持快捷键快速执行<br/>
+3.编辑器 a. 通过 monaco fold 能力完成非变更内容的折叠 b. 自定义评论组件嵌入编辑器<br/>
+4.插件 a. 复用代码浏览 Blame 插件能力进行代码行 Git 信息查看 除了上述能力，Gitlink 还支持了在代码评审时快速修改代码：<br/>
+
+![](../../static/img/di_san_fang/WebIDE/代码评审.png)<br/>
+<center>代码评审时可修改代码</center><br/>
+
+## Gitlink Web IDE
+Gitlink 代码阅读场景虽然接入极速版 IDE 编辑器，但文件树、代码搜索、快捷键、IDE 皮肤、等均和平时开发时使用习惯的 IDE 差异较大，更有大部分用户仅仅是为了代码阅读将代码克隆到本地，尽管保证了一致的体验，但整个链路繁琐费时。<br/>
+基于这个洞察，蚂蚁云研发团队和 Gitlink 推出 Gitlink Web IDE，可以一键快速打开 Web IDE 访问阅读项目仓库代码，实现项目与 IDE 的无缝衔接，保持研发同学的日常偏好习惯，同时完美兼容 Gitlink 代码托管平台。更重要的是，通过无容器在浏览器上直接运行一个极速版 IDE，确保「秒开」的即时体验。<br/>
+
+#### **1. 快速体验**
+从 Gitlink 仓库首页 Web IDE 入口即可体验
+![](../../static/img/di_san_fang/WebIDE/WebIDE入口.png)<br/>
+<center>Gitlink WebIDE 入口</center><br/>
+
+#### **2. 代码浏览体验**
+与传统 IDE 一致的代码浏览体验。文件树、皮肤样式、快捷键一应俱全。
+#### **3. 语言功能**
+1.支持近 40 种语言的语法高亮<br/>
+2.支持 JavaScript/TypeScript、HTML、CSS、JSON、Markdown 的基于 LSP (Language Server Protocol) 语言特性功能，具备智能提示和大纲信息以及单文件内跳转。<br/>
+![](../../static/img/di_san_fang/WebIDE/JS语言服务提示.png)<br/>
+<center>JS语言服务提示</center><br/>
+3. 提供了 Java、Go、Python、C++、Php 的在线语言服务能力，支持简单的定义跳转、查找引用等功能，让大家更加方便的阅读代码<br/>
+
+![](../../static/img/di_san_fang/WebIDE/python查看引用.png)<br/>
+<center>Python 查看引用</center><br/>
+
+#### **4. 分支新建与切换**
+点击左下角分支名即可新建/切换分支。<br/>
+
+![](../../static/img/di_san_fang/WebIDE/分支新建.png)<br/>
+<center>分支新建与切换</center><br/>
+
+
+#### **5. 文件搜索**
+使用 CMD/Ctrl + P 唤起文件搜索面板<br/>
+
+![](../../static/img/di_san_fang/WebIDE/文件搜索.png)<br/>
+<center>文件搜索面板</center><br/>
+
+#### **6. 行高亮**
+持单行或多行高亮，点击行号即可高亮行，按住 Shift 可选中连续多行。<br/>
+![](../../static/img/di_san_fang/WebIDE/多选行高亮.png)<br/>
+<center>多选行高亮</center><br/>
+
+#### **7. Blame**
+支持查看单行 blame 信息，hover 后可展示详细信息。<br/>
+![](../../static/img/di_san_fang/WebIDE/Blame详细信息.png)<br/>
+<center>Blame详细信息</center><br/>
+
+#### **8. Graph**
+支持 graph 视图，可查看分支 commits 历史以及每个 commit 详细文件变更，并支持文件 diff 查看。底部状态栏左下角点击 Git Graph 或在命令面板输入 View Git Graph，即可打开 Git Graph 视图。<br/>
+![](../../static/img/di_san_fang/WebIDE/Graph.png)<br/>
+<center>Graph 详细信息</center><br/>
+
+
+#### **9.WebSCM**
+对于开发来说日常多个需求并行开发是非常常见的事，经常修改一些很小但必要的逻辑，而也许你本地环境已经在开发下一个需求，频繁的分支切换并行修改又容易出错。通过 Gitlink Web IDE 极速切换分支修改提交一气呵成，无需打断本地开发流程。<br/>
+![](../../static/img/di_san_fang/WebIDE/WebSCM.png)<br/>
+<center>WebSCM</center><br/>
+
+
+#### **10.代码在线运行**
+目前如果在没有容器的情况下，大部分应用只能运行前端代码。Gitlink Web IDE 集成了基于 skypack 的更加轻量的 CodeSwing 插件，可以在极速版去运行前端代码，并且代码版本是使用 Gitlink 来管理。结合上述 WebSCM 能力，甚至能在一分钟完成前端代码初始化、编写、预览和代码提交。<br/>
+![](../../static/img/di_san_fang/WebIDE/前端代码.png)<br/>
+<center>前端代码运行</center><br/>
+
+随着 Webassembly 技术的发展，一些后端语言也可以运行在浏览器里，在 2021 年 Google IO 大会上，StackBlitz 展示了他们最近做的技术：WebContainer，该能力可以将语言运行时编译为 Webassembly 从而运行在浏览器上。Code-Runner-For-Web 插件结合 Pyodide，已经将 Python 的运行搬到了浏览器上，新版极速版也默认集成了该插件。<br/>
+![](../../static/img/di_san_fang/WebIDE/Python代码运行.png)<br/>
+<center>Python代码运行</center><br/>

docs/第三方服务/重睛鸟代码溯源.md

@@ -1,4 +1,66 @@
 ---
 sidebar_label: '重睛鸟代码溯源'
 sidebar_position: 1    
----
+---
+
+## 代码分析入口
+
+![](../../static/img/di_san_fang/重晴鸟代码溯源/代码分析入口.png)<br/>
+<center>代码分析入口</center><br/>
+页面说明：<br/>
+1、在"维基"与"动态"之间加入"服务"菜单，并设计前置icon。<br/>
+2、用户可点击"服务"菜单 tab 进入服务页面。<br/>
+3、仓库管理员可在"仓库设置" tab 中项目导航处开启／关闭代码分析菜单可见性，如下图：<br/>
+
+![](../../static/img/di_san_fang/重晴鸟代码溯源/项目导航.png)<br/>
+<center>项目导航</center><br/>
+
+## 代码分析检测
+![](../../static/img/di_san_fang/重晴鸟代码溯源/代码分析检测.png)<br/>
+<center>代码分析检测</center><br/>
+页面说明：<br/>
+1、此页面为暂无历史分析记录时页面展示。<br/>
+2、"新建分析"按钮仅对仓库管理员可见。仓库开发者、观察者、游客访问此页面时，"新建分析"按钮不可见。<br/>
+3、点击"新建分析"按钮，需判断该仓库是否已签订协议（是否开启代码分析功能）。<br/>
+
+## 代码分析协议签订
+![](../../static/img/di_san_fang/重晴鸟代码溯源/代码分析协议签订.png)<br/>
+<center>代码分析协议签订</center><br/>
+页面说明：<br/>
+1、用户点击"新建分析"按钮，需判断该仓库是否已签订协议（是否开启代码分析功能），若未签订协议，则弹出签订协议弹窗。<br/>
+2、签订协议流程：<br/>
+①用户将垂直滚动条拉至最底部。<br/>
+②勾选阅读并同意协议条款。<br/>
+③点击同意协议（若未勾选"我已阅读并同意《用户协议及声明条款》"，则"同意协议"按钮置灰）。<br/>
+3、用户勾选 CheckBox ，并点击"同意协议"按钮，逻辑上等同于代码溯源系统中新建一个账户。在页面交互上，相当于点击"新建分析"按钮弹出分支选择弹窗。<br/>
+
+## 分支选择
+![](../../static/img/di_san_fang/重晴鸟代码溯源/分支选择.png)<br/>
+<center>分支选择</center><br/>
+页面说明:<br/>
+1、用户点击“新建分析”按钮，弹出新建分析需要选择填写分支。<br/>
+2、图中检测类型、检测参数均为默认值，不允许用户修改，此处展示在界面上，仅起到提示用户，让用户知晓作用。<br/>
+3、点击此处“开始检测”即开启基于选中分支的检测，新建一个检测列表。<br/>
+
+## 列表展示
+![](../../static/img/di_san_fang/重晴鸟代码溯源/列表展示.png)<br/>
+<center>列表展示</center><br/>
+页面说明:<br/>
+1、当检测列表行数超过一行时，“新建分析”按钮左侧提供分支名称的筛选下拉框，下拉框内选项为列表中分支的集合。若本仓库有分支1、2、3、4、5，此列表中有分支3、4，则此处下拉框中分支类型仅为3、4。<br/>
+2、当新建分析任务正在检测中时，检测状态处有百分比进度条展示现有进度。<br/>
+3、点击“重新扫描”按钮，将弹出一条新建分析的弹窗，此弹窗保存所有上次已配置的分支信息，检测分支不可修改(分支下拉选中框置灰)。确认新建后，将新增一条检测数据。<br/>
+4、点击删除将出现二次确认弹框:“此操作将永久删除该检测记录，是否继续?”，用户点击确认后，此条检测记录将从列表中移除。<br/>
+
+## 结果展示
+![](../../static/img/di_san_fang/重晴鸟代码溯源/结果展示.png)<br/>
+<center>结果展示</center><br/>
+页面说明：<br/>
+1、用户在代码检测"操作"列表点击"查看"按钮，将在当前页面展开结果展示页面。当用户再次点击"查看"按钮后，结果展示页面收回；当用户点击其他检测记录"查看"按钮后，将展开其他检测记录的结果页，收回当前已展开的结果展示页；<br/>
+2、当检测状态为"失败"状态，或当前处于"正在检测"状态时，"查看"按钮将置灰，处于无法点击状态；<br/>
+3、结果展示页取代码溯源已有页面，嵌入至 GitLink 即可，无需再次设计。<br/>
+
+## 用户操作流程
+![](../../static/img/di_san_fang/重晴鸟代码溯源/用户操作流程.png)<br/>
+<center>用户操作流程</center><br/>
+
+