markdown单接口渲染

exts/yapi-plugin-export-markdown-template/mdTemplate/Services.js

@@ -1,12 +1,14 @@
-import React, {PureComponent as Component} from 'react'
+import React, {Fragment, PureComponent as Component} from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux';
 import {getToken} from '../../../client/reducer/modules/project.js'
 import './Services.scss';
 import {withRouter} from "react-router-dom";
 import axios from "axios";
-import {message} from "antd";
+import {message, Card, Button} from "antd";
 import copy from "copy-to-clipboard";
+import MarkdownIt from "markdown-it";
+import "github-markdown-css/github-markdown-light.css"
 
 @connect(
   state => {
@@ -29,7 +31,8 @@ class MDTemplateServices extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
-      render_data: {}
+      render_data: {},
+      isHtml: true
     }
   }
 
@@ -46,25 +49,40 @@ class MDTemplateServices extends Component {
       });
     }
   }
+
   async preCopy(code) {
     copy(code)
     message.success("复制成功")
   }
-  render() {
-    let render_vide = [];
-    if (this.state.render_data) {
-      render_vide.push(<pre key="md"><span className='btn-pre-copy' onClick={()=>this.preCopy(this.state.render_data.data)}>复制代码</span>{this.state.render_data.data + "\n"}</pre>)
 
+  render() {
+    let mdContent = [];
+    let htmlContent = [];
+    if (this.state.render_data && this.state.render_data.data) {
+      mdContent = (<pre key="md"><span className='btn-pre-copy'
+                                       onClick={() => this.preCopy(this.state.render_data.data)}>复制Markdown</span>{this.state.render_data.data + "\n"}</pre>)
+      htmlContent = (
+        <div className={"markdown-body"}
+             dangerouslySetInnerHTML={{__html: MarkdownIt().render(this.state.render_data.data || "")}}></div>
+      )
     }
-    console.log(render_vide)
+    const extraContent = (
+      <Fragment>
+        <Button size={"small"} type={"link"} icon="copy"
+                onClick={(e) => this.preCopy(this.state.render_data.data)}>拷贝原文</Button>
+
+        <Button size={"small"} type={"link"} icon="table"
+                onClick={(e) => {
+                  this.setState({
+                    isHtml: !this.state.isHtml
+                  })
+                }}>显示{this.state.isHtml ? '原文' : 'Markdown'}</Button>
+      </Fragment>
+    )
     return (
-      <div className="project-services">
-        <section className="news-box m-panel">
-          <div className="token">
-            {render_vide}
-          </div>
-        </section>
-      </div>
+      <Card size={"small"} bordered={false} extra={extraContent}>
+        {this.state.isHtml ? htmlContent : mdContent}
+      </Card>
     );
   }
 }