Merge pull request #1288 from fjc0k/feat-auto-preview-html

feat: 运行接口请求时支持自动预览HTML

client/components/Postman/Postman.js

@@ -133,10 +133,18 @@ export default class Run extends Component {
       envModalVisible: false,
       test_res_header: null,
       test_res_body: null,
+      autoPreviewHTML: true,
       ...this.props.data
     };
   }
 
+  get testResponseBodyIsHTML() {
+    const hd = this.state.test_res_header
+    return hd != null
+      && typeof hd === 'object'
+      && String(hd['Content-Type'] || hd['content-type']).indexOf('text/html') !== -1
+  }
+
   checkInterfaceData(data) {
     if (!data || typeof data !== 'object' || !data._id) {
       return false;
@@ -927,14 +935,25 @@ export default class Run extends Component {
                 <div className="body">
                   <div className="container-title">
                     <h4>Body</h4>
+                    <Checkbox
+                      checked={this.state.autoPreviewHTML}
+                      onChange={e => this.setState({ autoPreviewHTML: e.target.checked })}>
+                      <span>自动预览HTML</span>
+                    </Checkbox>
                   </div>
-                  <AceEditor
-                    readOnly={true}
-                    className="pretty-editor-body"
-                    data={this.state.test_res_body}
-                    mode={handleContentType(this.state.test_res_header)}
-                    // mode="html"
-                  />
+                  {
+                    this.state.autoPreviewHTML && this.testResponseBodyIsHTML
+                      ? <iframe
+                          className="pretty-editor-body"
+                          srcDoc={this.state.test_res_body}
+                        />
+                      : <AceEditor
+                          readOnly={true}
+                          className="pretty-editor-body"
+                          data={this.state.test_res_body}
+                          mode={handleContentType(this.state.test_res_header)}
+                      />
+                  }
                 </div>
               </div>
             </Spin>

client/components/Postman/Postman.scss

@@ -15,6 +15,7 @@
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     min-height: 300px;
+    min-width: 100%;
   }
   .pretty-editor-header {
     border: 1px solid #d9d9d9;
@@ -58,10 +59,19 @@
     }
 
     .header, .body{
-      padding-left: 10px;
       margin-bottom: 10px;
     }
 
+    .header {
+      padding-left: 10px;
+      padding-right: 5px;
+    }
+
+    .body {
+      padding-left: 5px;
+      padding-right: 10px;
+    }
+
     .response-test{
       min-height: 400px;
     }
@@ -111,6 +121,8 @@
       max-width: 400px;
     }
     .container-title {
+      display: flex;
+      justify-content: space-between;
       padding: .08rem 0;
     }
     .resizer {
@@ -124,7 +136,7 @@
         background-color: #acaaaa;
         opacity: .8;
         position: absolute;
-        left: 16px;
+        left: 50%;
       }
     }
     // res body 无返回json时显示text信息