Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/containers/Home/Home.scss

@@ -61,6 +61,7 @@ $color-bg-lightblue: #c6e2ff;
     }
   }
   .btn-home-normal {
+    border-radius: 4px;
     color: #43459a;
     &:hover {
       color: #7795f8;

doc/page/usage/quickstart.md

@@ -1,36 +1,45 @@
-## 起步
-### 创建API
+### 如何创建项目？
 
-注册新用户或使用 QSSO 登录。
+把大象装进冰箱分几步？三步：把冰箱门打开，把大象装进去，关门，搞定~
 
-新用户进入 YApi 时没有任何权限，只能浏览公开项目，想要创建 API 应联系 `组长` 将你添加到某分组或某项目中。
-登录之后进到项目首页，左边侧边栏显示的即分组列表。
+新建接口分几步？也是三步：
 
-<img src="./images/project_group.png" width = "200" style="margin-left:170px;display:block;" alt="图片名称" align=center />
+* [找到一个项目](#选择项目)
+* [新建接口](#新建_编辑接口)
+* [点击 `保存`](#保存)
+
+搞定~
 
 
 
 
-#### 项目列表
+## 选择项目
 
-选中不同的分组，右边会显示该分组下的项目列表。
+- 如果你已经登录，会在首页右侧看到一些项目 (可以在左侧的分组列表切换分组来查看不同分组下的项目)。
+
+- 点击一个项目，进入该项目的详情页。
+
+> 如果没有找到项目，请联系组长
 
 <img src="./images/project_list.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
 
-### 添加项目
+## 新建接口
 
-- 点击右上角的“+“号进入添加项目页面
-<img src="./images/project_add.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center />
+- 点击左侧接口分组右侧的菜单按钮，选择 `添加接口`，或者点击接口列表右上角的 `添加接口`。
 
-- 添加项目页面
-<img src="./images/project_add_view.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center />
-添加完成后进去项目详情页面
+<img src="./images/usage/api_add_btn.png" />
 
-### 项目详情页面
+- 选择接口分类，输入接口名称和接口路径，点击 `提交`。
+
+<img src="./images/usage/api_add_panel.png" />
+
+> 如果没有新建项目权限，请联系组长
+
+## 保存
 
 #### 添加接口分类
 
-<img src="./images/interface_add_cat.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center />
+
 
 添加完成后可以在左侧列表看到新添加的接口分类
 

doc/styles/theme.css

@@ -28,3 +28,24 @@ body, h1, h2, h3, h4, h5, h6 {
   text-align: center;
   vertical-align: middle;
 }
+
+.markdown-body blockquote {
+  border-left: 4px solid #ff561b;
+  background-color: #f8f8f8;
+  padding: .12rem .24rem;
+  position: relative;
+}
+.markdown-body blockquote:before {
+  content: '!';
+  display: block;
+  position: absolute;
+  left: -.12rem;
+  top: .12rem;
+  width: 20px;
+  height: 20px;
+  background-color: #ff561b;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}

npm-shrinkwrap.json

@@ -5321,6 +5321,14 @@
             }
           }
         },
+        "string_decoder": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
         "string-width": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@@ -5331,14 +5339,6 @@
             "strip-ansi": "3.0.1"
           }
         },
-        "string_decoder": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
-          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
-          "requires": {
-            "safe-buffer": "5.0.1"
-          }
-        },
         "stringstream": {
           "version": "0.0.5",
           "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -12483,6 +12483,22 @@
         }
       }
     },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha1-TPNaQkf2TKPfjC7yCMxJSxyo/C4=",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "2.0.0",
+          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/resolve-from/-/resolve-from-2.0.0.tgz",
+          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
+        }
+      }
+    },
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require-directory/-/require-directory-2.1.1.tgz",
@@ -12507,22 +12523,6 @@
         "resolve-from": "1.0.1"
       }
     },
-    "require_optional": {
-      "version": "1.0.1",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/require_optional/-/require_optional-1.0.1.tgz",
-      "integrity": "sha1-TPNaQkf2TKPfjC7yCMxJSxyo/C4=",
-      "requires": {
-        "resolve-from": "2.0.0",
-        "semver": "5.4.1"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "2.0.0",
-          "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/resolve-from/-/resolve-from-2.0.0.tgz",
-          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
-        }
-      }
-    },
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/requires-port/-/requires-port-1.0.0.tgz",
@@ -13256,6 +13256,14 @@
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-convert": {
       "version": "0.2.1",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string-convert/-/string-convert-0.2.1.tgz",
@@ -13342,14 +13350,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://repo.corp.qunar.com/artifactory/api/npm/npm-qunar/stringstream/-/stringstream-0.0.5.tgz",
@@ -15014,8 +15014,8 @@
     },
     "yapi-plugin-qsso": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/yapi-plugin-qsso/-/yapi-plugin-qsso-1.0.2.tgz",
-      "integrity": "sha512-x1LS8R5Vdjep+a93M97v7LcdV+3tupqIOkxxS+uYh+rbYB568BZFEpvfR43L7PcBZcCaOcsCOJEsrw1rcq5rhQ=="
+      "resolved": "http://registry.npm.taobao.org/yapi-plugin-qsso/download/yapi-plugin-qsso-1.0.2.tgz",
+      "integrity": "sha1-blrUEMXZAJg9DfYONIbrjYvtWxk="
     },
     "yargs": {
       "version": "7.1.0",

static/doc/styles/theme.css

@@ -28,3 +28,24 @@ body, h1, h2, h3, h4, h5, h6 {
   text-align: center;
   vertical-align: middle;
 }
+
+.markdown-body blockquote {
+  border-left: 4px solid #ff561b;
+  background-color: #f8f8f8;
+  padding: .12rem .24rem;
+  position: relative;
+}
+.markdown-body blockquote:before {
+  content: '!';
+  display: block;
+  position: absolute;
+  left: -.12rem;
+  top: .12rem;
+  width: 20px;
+  height: 20px;
+  background-color: #ff561b;
+  color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}

static/doc/usage-创建第一个API.html

@@ -91,7 +91,15 @@
                                 <ul class="nav docs-sidenav-extend"  >
                                 
                                     <li >
-                                        <a href="#起步">起步</a>
+                                        <a href="#选择项目">选择项目</a>
+                                    </li>
+                                     
+                                    <li >
+                                        <a href="#新建接口">新建接口</a>
+                                    </li>
+                                     
+                                    <li >
+                                        <a href="#保存">保存</a>
                                     </li>
                                 
                                 </ul>
@@ -126,21 +134,26 @@
                     
                     <div class="content-right markdown-body use-sidebar" role="main">
 
-                         <h2 class="subject" id="起步">起步 <a class="hashlink" href="#起步">#</a></h2><h3 class="subject" id="创建API">创建API <a class="hashlink" href="#创建API">#</a></h3><p>注册新用户或使用 QSSO 登录。</p>
-<p>新用户进入 YApi 时没有任何权限，只能浏览公开项目，想要创建 API 应联系 <code>组长</code> 将你添加到某分组或某项目中。
-登录之后进到项目首页，左边侧边栏显示的即分组列表。</p>
-<p><img src="./images/project_group.png" width = "200" style="margin-left:170px;display:block;" alt="图片名称" align=center /></p>
-<h4 class="subject" id="项目列表">项目列表 <a class="hashlink" href="#项目列表">#</a></h4><p>选中不同的分组，右边会显示该分组下的项目列表。</p>
-<p><img src="./images/project_list.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
-<h3 class="subject" id="添加项目">添加项目 <a class="hashlink" href="#添加项目">#</a></h3><ul>
-<li><p>点击右上角的“+“号进入添加项目页面
-<img src="./images/project_add.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
-</li><li><p>添加项目页面
-<img src="./images/project_add_view.png" width = "100%" style="margin:0px auto;display:block;" alt="图片名称" align=center />
-添加完成后进去项目详情页面</p>
+                         <h3 class="subject" id="如何创建项目？">如何创建项目？ <a class="hashlink" href="#如何创建项目？">#</a></h3><p>把大象装进冰箱分几步？三步：把冰箱门打开，把大象装进去，关门，搞定~</p>
+<p>新建接口分几步？也是三步：</p>
+<ul>
+<li><a href="#选择项目">找到一个项目</a></li><li><a href="#新建_编辑接口">新建接口</a></li><li><a href="#保存">点击 <code>保存</code></a></li></ul>
+<p>搞定~</p>
+<h2 class="subject" id="选择项目">选择项目 <a class="hashlink" href="#选择项目">#</a></h2><ul>
+<li><p>如果你已经登录，会在首页右侧看到一些项目 (可以在左侧的分组列表切换分组来查看不同分组下的项目)。</p>
+</li><li><p>点击一个项目，进入该项目的详情页。</p>
 </li></ul>
-<h3 class="subject" id="项目详情页面">项目详情页面 <a class="hashlink" href="#项目详情页面">#</a></h3><h4 class="subject" id="添加接口分类">添加接口分类 <a class="hashlink" href="#添加接口分类">#</a></h4><p><img src="./images/interface_add_cat.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
-<p>添加完成后可以在左侧列表看到新添加的接口分类</p>
+<blockquote>
+<p>如果没有找到项目，请联系组长</p>
+</blockquote>
+<p><img src="./images/project_list.png" width = "800" style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
+<h2 class="subject" id="新建接口">新建接口 <a class="hashlink" href="#新建接口">#</a></h2><ul>
+<li>点击左侧接口分组右侧的菜单按钮，选择 <code>添加接口</code>，或者点击接口列表右上角的 <code>添加接口</code>。</li></ul>
+<p><img src="./images/usage/api_add_btn.png" /></p>
+<ul>
+<li>选择接口分类，输入接口名称和接口路径，点击 <code>确定</code>。</li></ul>
+<p><img src="./images/usage/api_add_panel.png" /></p>
+<h2 class="subject" id="保存">保存 <a class="hashlink" href="#保存">#</a></h2><h4 class="subject" id="添加接口分类">添加接口分类 <a class="hashlink" href="#添加接口分类">#</a></h4><p>添加完成后可以在左侧列表看到新添加的接口分类</p>
 <h4 class="subject" id="4.2_添加接口">4.2 添加接口 <a class="hashlink" href="#4.2_添加接口">#</a></h4><p>鼠标移动到接口分类的菜单icon，点击添加接口</p>
 <p><img src="./images/interface_add.png" width="400"  style="margin:0px auto;display:block;" alt="图片名称" align=center /></p>
 <h4 class="subject" id="4.3_接口编辑">4.3 接口编辑 <a class="hashlink" href="#4.3_接口编辑">#</a></h4><p>添加完接口点击新添加的接口，跳转到接口预览页面，可看到刚才填写的信息。接口的详细信息点击编辑功能进行添加</p>