92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
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, Card, Button} from "antd";
|
|
import copy from "copy-to-clipboard";
|
|
import MarkdownIt from "markdown-it";
|
|
|
|
@connect(
|
|
state => {
|
|
return {
|
|
token: state.project.token
|
|
}
|
|
},
|
|
{
|
|
getToken
|
|
}
|
|
)
|
|
class MDTemplateServices extends Component {
|
|
static propTypes = {
|
|
projectId: PropTypes.number,
|
|
token: PropTypes.string,
|
|
getToken: PropTypes.func,
|
|
match: PropTypes.object
|
|
}
|
|
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.state = {
|
|
render_data: {},
|
|
isHtml: true
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getSyncData();
|
|
}
|
|
|
|
async getSyncData() {
|
|
let interfaceId = this.props.match.params.actionId;
|
|
let result = await axios.get(`/api/plugin/mdConfig/gen?interfaceId=${interfaceId}`);
|
|
if (result.data) {
|
|
this.setState({
|
|
render_data: result.data
|
|
});
|
|
}
|
|
}
|
|
|
|
async preCopy(code) {
|
|
copy(code)
|
|
message.success("复制成功")
|
|
}
|
|
|
|
render() {
|
|
let mdContent = [];
|
|
let htmlContent = [];
|
|
if (this.state.render_data && this.state.render_data.data) {
|
|
const textContent = this.state.render_data.data.error || this.state.render_data.data;
|
|
mdContent = (<pre key="md"><span className='btn-pre-copy'
|
|
onClick={() => this.preCopy(textContent)}>复制Markdown</span>{(textContent) + "\n"}</pre>)
|
|
htmlContent = (
|
|
<div className={"markdown-body"}
|
|
dangerouslySetInnerHTML={{__html: MarkdownIt().render(textContent || "")}}></div>
|
|
)
|
|
}
|
|
const extraContent = (
|
|
<Fragment>
|
|
<Button size={"small"} type={"link"} icon="copy"
|
|
onClick={() => this.preCopy(this.state.render_data.data.error || this.state.render_data.data)}>拷贝原文</Button>
|
|
|
|
<Button size={"small"} type={"link"} icon="table"
|
|
onClick={() => {
|
|
this.setState({
|
|
isHtml: !this.state.isHtml
|
|
})
|
|
}}>显示{this.state.isHtml ? '原文' : 'Markdown'}</Button>
|
|
</Fragment>
|
|
)
|
|
return (
|
|
<Card size={"small"} bordered={false} extra={extraContent}>
|
|
{this.state.isHtml ? htmlContent : mdContent}
|
|
</Card>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
module.exports = withRouter(MDTemplateServices);
|