docs: add case doc

doc/page/usage/case.md

@@ -1,29 +1,33 @@
 ## 介绍
-<p style='text-indent:2em;line-height:1.8em'>测试集是接口用例的集合。接口用例用来保存接口运行请求参数，方便我们下次再测试接口，无需再填请求参数。</p>
+<p style='text-indent:2em;line-height:1.8em'>在平时的开发过程中，经常遇到的一个问题是每次调试接口都需要重新填写参数，YApi测试集可以保存之前填写的参数，方便下次的调试。YApi测试集还可以一次性测试所有接口，每个的请求参数可以通过前面已请求的接口数据读取，或填写mock随机字符串。</p>
 
-## 添加测试集
-添加测试集，我们可以创建个人测试集、环境测试集或者功能测试集等等。每个测试集只是接口用例的集合，可以按照任何维度去创建。
+## 测试列表
 
-项目接口页面，测试集合 tab 下面『加号』按钮添加测试集。
+<img  class="doc-img" style="width:100%" src="./images/usage/case-list.jpg"  />
 
-<img src="./images/case_col_add.jpg" />
+在测试列表可以看到每个测试用例的key,还有 开始测试、报告等功能
 
-添加测试集必须填写集合名，然后可以选填集合简介。
+点击开始测试会按照case定义的参数从上往下一个一个进行测试，如果顺序有问题，可以拖动调整
 
-<img src="./images/case_col_add_modal.jpg" />
+测试完成之后，点击报告查看该次请求的结果
 
-## 添加接口用例
-当我们在运行、调试某个接口时，为了把当前的测试请求数据保存下来，方便下次测试。我们可以将接口当前的测试数据，保存为该接口的测试用例。
+## 编辑测试用例
 
-在接口运行页面，点击保存按钮，添加接口用例。
+### Mock参数
+Mock 参数每次请求都会生成随机字符串
 
-<img src="./images/case_add.jpg" />
+<img  class="doc-img" style="width:100%" src="./images/usage/case-edit.jpg"  />
 
-然后选择用例需要添加到的集合。如何还没有集合，可以新建。
+#### 变量参数
+
+<img  class="doc-img" style="width:100%" src="./images/usage/mock-var-param.jpg"  />
+
+参数值可写为: $.371.data.name
+$. 是使用动态变量的标志
+
+371是用例key,可在用例列表查看到
+
+data.name是接口返回数据指向的实际字段
 
-<img src="./images/case_add_modal.jpg" />
 
-## 查看接口用例
-添加完用例，我们可以在接口集合 tab 下面看到，当前项目的所有测试集合和接口用例。接口用例和接口运行一样，只不过默认带上了一些请求参数。
-<img src="./images/case_list.jpg" />
 

doc/page/usage/mock.md

@@ -103,6 +103,7 @@ proxy_pass   http://yapi.corp.qunar.com/mock/2817/baseapi; #baseapi后面没有"
 
 ## 高级Mock
 在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理
+
 YApi 提供了写 js 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。
 
 ### 全局变量

static/doc/case.html

@@ -120,15 +120,11 @@
                                     </li>
                                      
                                     <li >
-                                        <a href="#添加测试集">添加测试集</a>
+                                        <a href="#测试列表">测试列表</a>
                                     </li>
                                      
                                     <li >
-                                        <a href="#添加接口用例">添加接口用例</a>
-                                    </li>
-                                     
-                                    <li >
-                                        <a href="#查看接口用例">查看接口用例</a>
+                                        <a href="#编辑测试用例">编辑测试用例</a>
                                     </li>
                                 
                                 </ul>
@@ -151,20 +147,19 @@
                     
                     <div class="content-right markdown-body use-sidebar" role="main">
 
-                         <h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><p style='text-indent:2em;line-height:1.8em'>测试集是接口用例的集合。接口用例用来保存接口运行请求参数，方便我们下次再测试接口，无需再填请求参数。</p>
+                         <h2 class="subject" id="介绍">介绍 <a class="hashlink" href="#介绍">#</a></h2><p style='text-indent:2em;line-height:1.8em'>在平时的开发过程中，经常遇到的一个问题是每次调试接口都需要重新填写参数，YApi测试集可以保存之前填写的参数，方便下次的调试。YApi测试集还可以一次性测试所有接口，每个的请求参数可以通过前面已请求的接口数据读取，或填写mock随机字符串。</p>
 
-<h2 class="subject" id="添加测试集">添加测试集 <a class="hashlink" href="#添加测试集">#</a></h2><p>添加测试集，我们可以创建个人测试集、环境测试集或者功能测试集等等。每个测试集只是接口用例的集合，可以按照任何维度去创建。</p>
-<p>项目接口页面，测试集合 tab 下面『加号』按钮添加测试集。</p>
-<p><img src="./images/case_col_add.jpg" /></p>
-<p>添加测试集必须填写集合名，然后可以选填集合简介。</p>
-<p><img src="./images/case_col_add_modal.jpg" /></p>
-<h2 class="subject" id="添加接口用例">添加接口用例 <a class="hashlink" href="#添加接口用例">#</a></h2><p>当我们在运行、调试某个接口时，为了把当前的测试请求数据保存下来，方便下次测试。我们可以将接口当前的测试数据，保存为该接口的测试用例。</p>
-<p>在接口运行页面，点击保存按钮，添加接口用例。</p>
-<p><img src="./images/case_add.jpg" /></p>
-<p>然后选择用例需要添加到的集合。如何还没有集合，可以新建。</p>
-<p><img src="./images/case_add_modal.jpg" /></p>
-<h2 class="subject" id="查看接口用例">查看接口用例 <a class="hashlink" href="#查看接口用例">#</a></h2><p>添加完用例，我们可以在接口集合 tab 下面看到，当前项目的所有测试集合和接口用例。接口用例和接口运行一样，只不过默认带上了一些请求参数。
-<img src="./images/case_list.jpg" /></p>
+<h2 class="subject" id="测试列表">测试列表 <a class="hashlink" href="#测试列表">#</a></h2><p><img  class="doc-img" style="width:100%" src="./images/usage/case-list.jpg"  /></p>
+<p>在测试列表可以看到每个测试用例的key,还有 开始测试、报告等功能</p>
+<p>点击开始测试会按照case定义的参数从上往下一个一个进行测试，如果顺序有问题，可以拖动调整</p>
+<p>测试完成之后，点击报告查看该次请求的结果</p>
+<h2 class="subject" id="编辑测试用例">编辑测试用例 <a class="hashlink" href="#编辑测试用例">#</a></h2><h3 class="subject" id="Mock参数">Mock参数 <a class="hashlink" href="#Mock参数">#</a></h3><p>Mock 参数每次请求都会生成随机字符串</p>
+<p><img  class="doc-img" style="width:100%" src="./images/usage/case-edit.jpg"  /></p>
+<h4 class="subject" id="变量参数">变量参数 <a class="hashlink" href="#变量参数">#</a></h4><p><img  class="doc-img" style="width:100%" src="./images/usage/mock-var-param.jpg"  /></p>
+<p>参数值可写为: $.371.data.name
+$. 是使用动态变量的标志</p>
+<p>371是用例key,可在用例列表查看到</p>
+<p>data.name是接口返回数据指向的实际字段</p>
 
                     </div>
                 </div>

static/doc/mock.html

@@ -215,8 +215,8 @@ $<span class="token punctuation">.</span><span class="token function">post</span
 <h4 class="subject" id="2.3_基于ykit_Jerry代理">2.3 基于ykit Jerry代理 <a class="hashlink" href="#2.3_基于ykit_Jerry代理">#</a></h4><p>假设您本地服务器访问地址是： <a href="http://xxx.com">http://xxx.com</a></p>
 <p><img src="./images/ykit.jpg" /></p>
 <p><span id="mock"></span></p>
-<h2 class="subject" id="高级Mock">高级Mock <a class="hashlink" href="#高级Mock">#</a></h2><p>在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理
-YApi 提供了写 js 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。</p>
+<h2 class="subject" id="高级Mock">高级Mock <a class="hashlink" href="#高级Mock">#</a></h2><p>在前端开发阶段，对于某些接口，业务相对复杂，而 UI 端也需要根据接口返回的不同内容去做相应的处理</p>
+<p>YApi 提供了写 js 脚本方式处理这一问题，可以根据用户请求的参数修改返回内容。</p>
 <h3 class="subject" id="全局变量">全局变量 <a class="hashlink" href="#全局变量">#</a></h3><ol>
 <li>mockJson</li><li>query</li><li>body</li><li>header</li><li>cookie</li></ol>
 <h3 class="subject" id="使用方法">使用方法 <a class="hashlink" href="#使用方法">#</a></h3><ol>