fix: 全局变量使用说明

client/containers/Project/Setting/ProjectEnv/ProjectEnvContent.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import './index.scss';
-import { Icon, Row, Col, Form, Input, Select, Button, AutoComplete } from 'antd';
+import { Icon, Row, Col, Form, Input, Select, Button, AutoComplete, Tooltip } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 import constants from 'client/constants/variable.js';
@@ -54,12 +54,11 @@ class ProjectEnvContent extends Component {
         name: '',
         value: ''
       }
-    ]
+    ];
 
-
     const curheader = curdata.header;
     const curGlobal = curdata.global;
-   
+
     if (curheader && curheader.length !== 0) {
       curheader.forEach(item => {
         if (item.name === 'Cookie') {
@@ -81,12 +80,12 @@ class ProjectEnvContent extends Component {
       });
     }
 
-    if(curGlobal && curGlobal.length !== 0) {
+    if (curGlobal && curGlobal.length !== 0) {
       curGlobal.forEach(item => {
-        global.unshift(item)
-      })
+        global.unshift(item);
+      });
     }
-    return { header, cookie, global }
+    return { header, cookie, global };
   }
 
   constructor(props) {
@@ -141,7 +140,7 @@ class ProjectEnvContent extends Component {
         });
         let global = values.global.filter(val => {
           return val.name !== '';
-        })
+        });
         if (cookie.length > 0) {
           header.push({
             name: 'Cookie',
@@ -342,7 +341,19 @@ class ProjectEnvContent extends Component {
             return commonTpl(item, index, 'cookie');
           })}
 
-          <h3 className="env-label">global</h3>
+          <h3 className="env-label">
+            global
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://yapi.ymfe.org/documents/project.html#%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83"
+              style={{ marginLeft: 8 }}
+            >
+              <Tooltip title="点击查看文档">
+                <Icon type="question-circle-o" />
+              </Tooltip>
+            </a>
+          </h3>
           {this.state.global.map((item, index) => {
             return commonTpl(item, index, 'global');
           })}

client/containers/Project/Setting/ProjectEnv/index.scss

@@ -67,6 +67,9 @@
 
   .env-label{
     padding-bottom: 8px;
+    a {
+      color: #636363;
+    }
   }
 
   .env-last-row {

docs/documents/project.md

@@ -30,26 +30,27 @@
 
 ## 项目迁移
 
-YApi中支持项目迁移到不同的分组中。
+YApi 中支持项目迁移到不同的分组中。
 
 <img src="./images/project-remove.png" />
 
-迁移权限： 只有管理员和该项目的owner有权限对位置进行修改。项目owner主要有创建该项目的人、项目中的组长、创建分组的人、分组中的组长。
+迁移权限： 只有管理员和该项目的 owner 有权限对位置进行修改。项目 owner 主要有创建该项目的人、项目中的组长、创建分组的人、分组中的组长。
 
-> Tips: owner权限判断的优先级是 项目权限 > 分组权限 
+> Tips: owner 权限判断的优先级是 项目权限 > 分组权限
 
 ## 项目拷贝
+
 该功能在 v1.3.12 版本上线，项目克隆功能可复制项目全部接口到一个新项目，如下图所示,点击红色框里面的 icon 使用。
 
-YApi支持项目复制功能，但是无法复制项目中的测试集合list。  
+YApi 支持项目复制功能，但是无法复制项目中的测试集合 list。
 
 操作： 点击下图左上角的复制按钮，在弹窗中写入复制项目名称点击确定就可以完成项目复制
 
 <img src="./images/usage/projectCopy.png" />
 
 <img src="./images/usage/project_copy_ok.png" />
 
-> Tips: 如果你在该分组下有新建项目的权限，那你也同时拥有复制项目的权限 
+> Tips: 如果你在该分组下有新建项目的权限，那你也同时拥有复制项目的权限
 
 ## 删除项目
 
@@ -59,16 +60,24 @@ YApi支持项目复制功能，但是无法复制项目中的测试集合list。
 
 ## 配置环境
 
-`环境配置` 一项可以添加该项目下接口的实际环境，供 [接口测试](./case.md) 使用，这里增加了全局header，可以在项目中设置全局header值。在接口运行页面的选择环境select中也增加`环境配置`弹层。
+`环境配置` 一项可以添加该项目下接口的实际环境，供 [接口测试](./case.md) 使用，这里增加了全局 header，可以在项目中设置全局 header 值。在接口运行页面的选择环境 select 中也增加`环境配置`弹层。
 
 <img src="./images/usage/project_setting_env.png" />
 
+v1.3.20 新增全局变量，用户可以在环境列表中定义全局变量的名称和值, 接口运行或者测试集合里面可以通过 {{ global.err }} 来访问当前环境变量下定义的全局变量
+
+<img src="./images/usage/project_setting_global.png" />
+
+
+
 ## 请求配置
 
 通过自定义 js 脚本方式改变请求的参数和返回的 response 数据
 
 ### 请求参数示例
+
 以 jquery ajax 为例，假设当前的请求参数是
+
 ```
 {
   url: '/api/user?id=1',
@@ -82,8 +91,8 @@ YApi支持项目复制功能，但是无法复制项目中的测试集合list。
 }
 ```
 
-
 那么公共变量 context 包含以下属性：
+
 ```
 context = {
   pathname: '/api/user',
@@ -104,11 +113,12 @@ context = {
 
 ```
 context.query.token = context.utils.md5(context.pathname + 'salt');
-
 ```
+
 ### 返回数据示例
 
 在上面的示例请求完成后，假设返回 responseBody={a:1},公共变量 context 包含以下属性：
+
 ```
 context = {
   pathname: '/api/user',
@@ -136,11 +146,13 @@ context = {
 
 ```
 context.responseBody.a = 2;
-
 ```
-> （v1.3.16+新增）context.href和context.hostname  
+
+> （v1.3.16+新增）context.href 和 context.hostname  
 > （v1.3.17+新增）context.caseId 测试用例的唯一 key 值
+
 ### 工具函数
+
 ```
 context.utils = {
   _         //underscore 函数,详细 API 查看官网 http://underscorejs.org/
@@ -156,56 +168,52 @@ context.utils = {
   axios     // axios 库，可用于 api 请求，官网 https://github.com/axios/axios
 }
 ```
+
 CryptoJS 具体用法
 
 ```javascript
-var data = [{id: 1}, {id: 2}]
- 
+var data = [{ id: 1 }, { id: 2 }];
+
 // Encrypt
 var ciphertext = context.utils.CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
 
 // Decrypt
-var bytes  = context.utils.CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
+var bytes = context.utils.CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
 var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
-
-console.log('decryptedData',decryptedData);
-```
 
+console.log('decryptedData', decryptedData);
+```
 
 ### 异步处理（v1.3.13+支持）
 
 处理请求参数，或返回数据，可能还会涉及到异步处理，比如 ajax 请求，YApi 在 v1.3.13 版本支持了异步处理。
 
 ```javascript
-context.promise = new Promise(function(resolve){
-    var api = context.utils.axios.get('http://yapi.local.qunar.com:3000/api/user/status')
-    api.then(function(result){
-        //...
-        console.log(result.data)
-        resolve()
-    })
-
-})
+context.promise = new Promise(function(resolve) {
+  var api = context.utils.axios.get('http://yapi.local.qunar.com:3000/api/user/status');
+  api.then(function(result) {
+    //...
+    console.log(result.data);
+    resolve();
+  });
+});
 ```
+
 promise 还可以来设置接口延迟
 
 ```javascript
-context.promise = new Promise(function(resolve){
-    setTimeout(function(){
-      console.log('delay 1000ms')
-      resolve('ok')
-	}, 1000)
-})
+context.promise = new Promise(function(resolve) {
+  setTimeout(function() {
+    console.log('delay 1000ms');
+    resolve('ok');
+  }, 1000);
+});
 ```
 
-
-
 使用方法就是在 `context` 里面添加 `promise` 参数,并且返回一个 Promise，不熟悉 Promise 的童鞋可以查下相关用法，ajax 请求可以使用 `context.utils.axios` 库。
 
 > 处理完成后，不要忘记 `resolve()`，不然会一直处于挂起状态
 
+## token 配置
 
-
-## token配置
-
-每个项目都有唯一的标识token，用户可以使用这个token值来请求项目的所有资源数据。目前用到的地方是接口的<a  href="./case.md">自动化测试</a>，用户不需要登录就可以访问接口测试结果信息。
+每个项目都有唯一的标识 token，用户可以使用这个 token 值来请求项目的所有资源数据。目前用到的地方是接口的<a  href="./case.md">自动化测试</a>，用户不需要登录就可以访问接口测试结果信息。