mirror of
https://github.com/YMFE/yapi.git
synced 2024-12-21 05:19:42 +08:00
Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev
This commit is contained in:
waliang.wang
commit
15c1601994
@ -6,7 +6,7 @@ import { Home, ProjectGroups, Interface, News, AddInterface } from './containers
|
||||
import User from './containers/User/User.js';
|
||||
import Header from './components/Header/Header';
|
||||
import Footer from './components/Footer/Footer';
|
||||
import Breadcrumb from './components/Breadcrumb/Breadcrumb';
|
||||
// import Breadcrumb from './components/Breadcrumb/Breadcrumb';
|
||||
import Loading from './components/Loading/Loading';
|
||||
import { checkLoginState } from './actions/login';
|
||||
import { requireAuthentication } from './components/AuthenticatedComponent';
|
||||
@ -50,7 +50,7 @@ export default class App extends Component {
|
||||
<div className="router-main">
|
||||
<Header />
|
||||
<div className="router-container">
|
||||
<Breadcrumb />
|
||||
{/* <Breadcrumb /> */}
|
||||
<Route path="/" component={Home} exact />
|
||||
<Switch>
|
||||
<Redirect exact from='/group' to='/group/1' />
|
||||
|
||||
@ -1,36 +1,116 @@
|
||||
import './Breadcrumb.scss';
|
||||
import { withRouter, Link } from 'react-router-dom';
|
||||
import { Breadcrumb } from 'antd';
|
||||
// import { withRouter } from 'react-router';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types'
|
||||
import React, { Component } from 'react';
|
||||
// const breadcrumbNameMap = {
|
||||
// '/group': '分组',
|
||||
// '/apps/1': 'Application1',
|
||||
// '/apps/2': 'Application2',
|
||||
// '/apps/1/detail': 'Detail',
|
||||
// '/apps/2/detail': 'Detail'
|
||||
// };
|
||||
|
||||
@withRouter
|
||||
export default class BreadcrumbNavigation extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
// breadcrumb: [{name:'首页', path: '/'}],
|
||||
hash: '',
|
||||
breadcrumb: []
|
||||
}
|
||||
}
|
||||
static propTypes = {
|
||||
location: PropTypes.object
|
||||
}
|
||||
|
||||
getBreadcrumb = (pathSnippets) => {
|
||||
console.log(pathSnippets);
|
||||
// 重置 state 中的 breadcrumb，防止重复渲染
|
||||
this.setState({
|
||||
breadcrumb: []
|
||||
});
|
||||
if (/project|group|add-interface/.test(pathSnippets[0])) {
|
||||
let type = pathSnippets[0] === 'add-interface' ? 'interface' : pathSnippets[0],
|
||||
id = pathSnippets[pathSnippets.length-1];
|
||||
if (!pathSnippets.includes('edit')) {
|
||||
type = 'project';
|
||||
}
|
||||
const params = { type, id };
|
||||
axios.get('/user/nav', {params: params}).then( (res) => {
|
||||
const data = res.data.data;
|
||||
// 依次填入group/projec/interface
|
||||
if (data.group_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.group_name,
|
||||
path: '/group/' + data.group_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
if (data.project_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.project_name,
|
||||
path: '/project/' + data.project_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
if (data.interface_name) {
|
||||
this.setState({
|
||||
breadcrumb: this.state.breadcrumb.concat([{
|
||||
name: data.interface_name,
|
||||
path: '/add-interface/' + data.interface_id
|
||||
}])
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (pathSnippets[0] == 'user') {
|
||||
this.setState({
|
||||
breadcrumb: [{
|
||||
name: '个人中心',
|
||||
path: '/' + pathSnippets.join('/')
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
console.log(2);
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
console.log(location.hash);
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
this.setState({
|
||||
hash: location.hash.split('#')[1]
|
||||
})
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// this.setState({
|
||||
// hash: nextProps.location.pathname
|
||||
// })
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
// console.log(nextProps.location.pathname, this.props.location.pathname);
|
||||
if (nextProps.location.pathname !== this.props.location.pathname) {
|
||||
// console.log('in');
|
||||
this.getBreadcrumb(pathSnippets);
|
||||
this.setState({
|
||||
hash: nextProps.location.pathname
|
||||
})
|
||||
}
|
||||
}
|
||||
render () {
|
||||
// 获取接口路径并分割
|
||||
// console.log(this.state.hash);
|
||||
const pathSnippets = location.hash.split('#')[1].split('/').filter(i => i);
|
||||
const extraBreadcrumbItems = pathSnippets.map((_, index) => {
|
||||
const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
// 获取接口路径并分割
|
||||
// console.log(this.state);
|
||||
const extraBreadcrumbItems = this.state.breadcrumb.map((item) => {
|
||||
// const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
|
||||
return (
|
||||
<Breadcrumb.Item key={url}>
|
||||
<Link to={url}>
|
||||
{url}
|
||||
<Breadcrumb.Item key={item.path}>
|
||||
<Link to={item.path}>
|
||||
{item.name}
|
||||
</Link>
|
||||
</Breadcrumb.Item>
|
||||
);
|
||||
});
|
||||
const breadcrumbItems = [(
|
||||
<Breadcrumb.Item key="home">
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/">首页</Link>
|
||||
</Breadcrumb.Item>
|
||||
)].concat(extraBreadcrumbItems);
|
||||
if (pathSnippets.length) {
|
||||
|
||||
@ -140,8 +140,8 @@ export default class InterfaceTest extends Component {
|
||||
crossRequest({
|
||||
url: href,
|
||||
method,
|
||||
headers,
|
||||
data: params,
|
||||
headers: this.getHeadersObj(headers),
|
||||
data: this.arrToObj(params),
|
||||
success: (res) => {
|
||||
try {
|
||||
res = JSON.parse(res)
|
||||
@ -266,6 +266,15 @@ export default class InterfaceTest extends Component {
|
||||
return dom.getAttribute('key') === 'yapi';
|
||||
}
|
||||
|
||||
arrToObj(arr) {
|
||||
const obj = {};
|
||||
arr.forEach(item => {
|
||||
if (item.key) {
|
||||
obj[item.key] = item.value || '';
|
||||
}
|
||||
})
|
||||
return obj;
|
||||
}
|
||||
getQueryObj(query) {
|
||||
const queryObj = {};
|
||||
query.forEach(item => {
|
||||
@ -275,6 +284,15 @@ export default class InterfaceTest extends Component {
|
||||
})
|
||||
return queryObj;
|
||||
}
|
||||
getHeadersObj(headers) {
|
||||
const headersObj = {};
|
||||
headers.forEach(item => {
|
||||
if (item.name && item.value) {
|
||||
headersObj[item.name] = item.value;
|
||||
}
|
||||
})
|
||||
return headersObj;
|
||||
}
|
||||
|
||||
render () {
|
||||
|
||||
@ -350,7 +368,7 @@ export default class InterfaceTest extends Component {
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
|
||||
<Button type="primary" icon="plus" onClick={this.addQuery} style={{margin: 10}}>Add query parameter</Button>
|
||||
</Card>
|
||||
<Card title="HEADERS" noHovering style={{marginTop: 10}} >
|
||||
<div className="req-row headers">
|
||||
@ -365,16 +383,18 @@ export default class InterfaceTest extends Component {
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addHeader}>Add header</Button>
|
||||
<Button type="primary" icon="plus" onClick={this.addHeader} style={{margin: 10}}>Add header</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Body" noHovering style={{marginTop: 10}}>
|
||||
<div className="req-row params">
|
||||
<Select defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? '' : 'hidden'}>
|
||||
<div>
|
||||
<Select style={{margin: 10, float: 'right'}} defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? 'floatfix' : 'floatfix hidden'}>
|
||||
<Option value="text">Text</Option>
|
||||
<Option value="file">File</Option>
|
||||
<Option value="form">Form</Option>
|
||||
</Select>
|
||||
</div>
|
||||
{ method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
|
||||
<div>
|
||||
<TextArea
|
||||
@ -405,7 +425,7 @@ export default class InterfaceTest extends Component {
|
||||
)
|
||||
})
|
||||
}
|
||||
<Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
|
||||
<Button type="primary" icon="plus" onClick={this.addParams} style={{margin: 10}}>Add form parameter</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -418,7 +438,7 @@ export default class InterfaceTest extends Component {
|
||||
}
|
||||
{
|
||||
method !== 'POST' && (
|
||||
<div>GET 请求没有 Body。</div>
|
||||
<div style={{margin: 10}}>GET 请求没有 Body。</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -11,3 +11,8 @@
|
||||
color: #108ee9;
|
||||
}
|
||||
}
|
||||
.floatfix:after{
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@ class Interface extends Component {
|
||||
}
|
||||
|
||||
this.props.saveInterfaceProjectId(interfaceId)
|
||||
console.log(params);
|
||||
axios.get('/interface/list', params)
|
||||
.then(result => {
|
||||
result = result.data.data
|
||||
@ -72,13 +71,10 @@ class Interface extends Component {
|
||||
const reg = /project\/(\d+)/g
|
||||
const url = location.href
|
||||
url.match(reg)
|
||||
console.log(url.match(reg));
|
||||
console.log(RegExp.$1);
|
||||
return RegExp.$1
|
||||
}
|
||||
|
||||
render () {
|
||||
console.log('==================');
|
||||
const { interfaceData, projectMember, modalVisible } = this.props
|
||||
return (
|
||||
<div className="g-doc">
|
||||
|
||||
@ -64,11 +64,11 @@ export default class GroupList extends Component {
|
||||
if(this.props.groupList[i].group_name === groupName){
|
||||
currGroup = this.props.groupList[i];
|
||||
}else{
|
||||
this.props.history.replace(`${currGroup.group_name}`);
|
||||
this.props.history.replace(`${currGroup._id}`);
|
||||
}
|
||||
}
|
||||
}else if(!groupName && this.props.groupList.length){
|
||||
this.props.history.push(`/group/${this.props.groupList[0].group_name}`);
|
||||
this.props.history.push(`/group/${this.props.groupList[0]._id}`);
|
||||
}
|
||||
this.setState({groupList: this.props.groupList});
|
||||
this.props.setCurrGroup(currGroup)
|
||||
@ -156,7 +156,7 @@ export default class GroupList extends Component {
|
||||
const groupId = e.key;
|
||||
const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
|
||||
this.props.setCurrGroup(currGroup);
|
||||
this.props.history.replace(`${currGroup.group_name}`);
|
||||
this.props.history.replace(`${currGroup._id}`);
|
||||
}
|
||||
|
||||
@autobind
|
||||
|
||||
@ -42,7 +42,7 @@ const getColumns = (data, props) => {
|
||||
return <Link to={`/project/${record._id}`}>{text}</Link>
|
||||
}
|
||||
},{
|
||||
title: 'Mock链接',
|
||||
title: 'Mock基本URL',
|
||||
key: 'domain',
|
||||
render: (item) => {
|
||||
return 'http://'+ item.prd_host + item.basepath;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user