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

This commit is contained in:
zwjamnsss 2017-08-15 16:34:59 +08:00
commit 1c105c3079
13 changed files with 496 additions and 42 deletions

View File

@ -0,0 +1,64 @@
import './Activity.scss'
import React, { Component } from 'react'
import TimeTree from './Timeline/Timeline'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
// import Breadcrumb from '../../../components/Breadcrumb/Breadcrumb'
import { Button } from 'antd'
import { getMockUrl } from '../../../reducer/modules/news.js'
@connect(
state => {
return {
uid: state.user.uid + ''
}
},
{
getMockUrl: getMockUrl
}
)
class Activity extends Component {
constructor(props) {
super(props);
this.state = {
mockURL: ""
}
}
static propTypes = {
uid: PropTypes.string,
getMockUrl: PropTypes.func,
match: PropTypes.object
}
componentWillMount(){
const that = this;
this.props.getMockUrl(2724).then(function(data){
const { prd_host, basepath, protocol } = data.payload.data.data;
const mockURL = `${protocol}://${prd_host}${basepath}/{path}`;
that.setState({
mockURL: mockURL
})
})
}
render () {
return (
<div>
<div className="g-row">
<section className="news-box">
<div className="logHead">
{/*<Breadcrumb />*/}
<div className="Mockurl">
<span>Mock地址</span>
<p>{this.state.mockURL}</p>
<Button type="primary"><a href = {`/api/project/download?project_id=${this.props.match.params.id}`}>下载Mock数据</a></Button>
</div>
</div>
<TimeTree typeid = {+this.props.match.params.id} />
</section>
</div>
</div>
)
}
}
export default Activity

View File

@ -0,0 +1,100 @@
.news-box {
display: -webkit-box;
-webkit-box-flex: 1;
margin: 0px auto 0 auto;
font-size: 0.14rem;
background: #FFF;
display: block;
.news-timeline{
padding: 24px;
padding-left: 125px;
color: #6b6c6d;
.ant-timeline-item{
min-height: 60px;
}
.ant-timeline-item-head{
width: 30px;
height: 30px;
left: -8px;
top: -4px;
border-color:#e1e3e4;
}
.logusername{
color: #4eaef3;
padding: 0px 16px 0px 8px;
cursor: pointer;
}
.logtype{
padding-right: 16px;
}
.logtime{
padding-right: 16px;
}
.logcontent{
display: block;
padding-left: 8px;
line-height: 24px;
}
.logoTimeago{
position: absolute;
left: -80px;
top: 5px;
color: #c0c1c1;
}
.logbidden{
color: #c0c1c1;
cursor: default;
line-height: 30px;
padding-left: 30px;
}
.loggetMore{
line-height: 30px;
padding-left: 30px;
color: #4eaef3;
}
}
.logHead{
height: 80px;
width: 100%;
border-bottom: 1px solid #e9e9e9;
padding: 24px 0px;
overflow: hidden;
.breadcrumb-container{
float: left;
min-width:100px;
}
.Mockurl{
width: 500px;
float: right;
color: #7b7b7b;
>span{
float: left;
line-height: 30px;
}
p{
width: 60%;
display: inline-block;
position: relative;
padding: 4px 7px;
height: 28px;
cursor: text;
font-size: 12px;
color: rgba(0,0,0,.65);
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
-webkit-transition: all .3s;
transition: all .3s;
overflow-x:auto;
}
button{
float: right;
}
}
}
}

View File

@ -0,0 +1,136 @@
import React, { Component } from 'react'
import { Timeline, Spin } from 'antd'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { formatTime } from '../../../../common.js';
import { Link } from 'react-router-dom'
import { fetchNewsData, fetchMoreNews } from '../../../../reducer/modules/news.js'
function timeago(timestamp) {
let minutes, hours, days, seconds, mouth, year;
const timeNow = parseInt(new Date().getTime() / 1000);
seconds = timeNow - timestamp;
if (seconds > 86400 * 30 * 12) {
year = parseInt(seconds / (86400 * 30 * 12));
} else {
year = 0;
}
if (seconds > 86400 * 30) {
mouth = parseInt(seconds / (86400 * 30));
} else {
mouth = 0;
}
if (seconds > 86400) {
days = parseInt(seconds / (86400));
} else {
days = 0;
}
if (seconds > 3600) {
hours = parseInt(seconds / (3600));
} else {
hours = 0;
}
minutes = parseInt(seconds / 60);
if (year > 0) {
return year + "年前";
} else if (mouth > 0 && year <= 0) {
return mouth + "月前";
} else if (days > 0 && mouth <= 0) {
return days + "天前";
} else if (days <= 0 && hours > 0) {
return hours + "小时前";
} else if (hours <= 0 && minutes > 0) {
return minutes + "分钟前";
} else if (minutes <= 0 && seconds > 0) {
if (seconds < 30) {
return "刚刚";
} else {
return seconds + "秒前";
}
} else {
return new Date(timestamp);
}
}
// timeago(new Date().getTime() - 40);
@connect(
state => {
return {
newsData: state.news.newsData,
curpage: state.news.curpage
}
},
{
fetchNewsData: fetchNewsData,
fetchMoreNews: fetchMoreNews
}
)
class TimeTree extends Component {
static propTypes = {
newsData: PropTypes.object,
fetchNewsData: PropTypes.func,
fetchMoreNews: PropTypes.func,
setLoading: PropTypes.func,
loading: PropTypes.bool,
curpage: PropTypes.number,
typeid: PropTypes.number
}
constructor(props) {
super(props);
this.state = {
bidden: "",
loading: false
}
}
getMore() {
const that = this;
if (this.props.curpage <= this.props.newsData.total) {
this.setState({ loading: true });
this.props.fetchMoreNews(this.props.typeid, 'project', this.props.curpage+1, 8).then(function () {
that.setState({ loading: false });
if (that.props.newsData.total === that.props.curpage) {
that.setState({ bidden: "logbidden" })
}
})
}
}
componentWillMount() {
this.props.fetchNewsData(this.props.typeid, 'project', 1, 8)
}
render() {
let data = this.props.newsData ? this.props.newsData.list : [];
if (data && data.length) {
data = data.map(function (item, i) {
return (<Timeline.Item key={i}>
<span className="logoTimeago">{timeago(item.add_time)}</span>
<span className="logusername"><Link to={`/user/profile/${item.uid}`}>{item.username}</Link></span>
<span className="logtype">{item.type}</span>
<span className="logtime">{formatTime(item.add_time)}</span>
<span className="logcontent">{item.content}</span>
</Timeline.Item>);
});
} else {
data = "";
}
let pending = this.props.newsData.total <= this.props.curpage ? <a className= "logbidden">以上为全部内容</a> : <a className="loggetMore" onClick={this.getMore.bind(this)}></a>;
if (this.state.loading) {
pending = <Spin />
}
return (
<section className="news-timeline">
{data ? <Timeline pending={pending}>{data}</Timeline> : data}
</section>
)
}
}
export default TimeTree

View File

@ -67,13 +67,31 @@ class InterfaceEditForm extends Component {
if (!err) {
if (values.res_body_type === 'json') values.res_body = this.state.res_body;
values.req_body_json = this.state.res_body;
let isfile = false;
if(values.req_body_type === 'form'){
values.req_body_form.forEach((item)=>{
if(item.type === 'file'){
isfile = true;
}
})
values.req_headers.filter( (item)=>{
item.name !== 'Content-Type'
})
values.req_headers.unshift({
name: 'Content-Type',
value: isfile? 'multipart/form-data': 'application/x-www-form-urlencoded'
})
}
this.props.onSubmit(values)
}
});
}
componentDidMount() {
let that = this;
let that = this, mockPreview, resBodyEditor;
mockEditor({
container: 'req_body_json',
data: that.state.req_body_json,
@ -83,12 +101,12 @@ class InterfaceEditForm extends Component {
})
}
})
let resBodyEditor = mockEditor({
resBodyEditor = mockEditor({
container: 'res_body_json',
data: that.state.res_body,
onChange: function (d) {
mockPreview.editor.setValue(d.mockText)
that.setState({
res_body: d.text,
res_body_mock: d.mockText
@ -96,11 +114,11 @@ class InterfaceEditForm extends Component {
}
})
that.setState({
res_body_mock: resBodyEditor.curData.mockText
mockPreview = mockEditor({
container: 'mock-preview',
data: resBodyEditor.curData.mockText,
readOnly: true
})
}
addParams = (name) => {
@ -267,18 +285,18 @@ class InterfaceEditForm extends Component {
{getFieldDecorator('method', {
initialValue: 'GET'
})(
<Select style={{ width: "75px" }}>
<Select style={{ width: "15%" }}>
<Option value="GET">GET</Option>
<Option value="POST">POST</Option>
<Option value="PUT">PUT</Option>
<Option value="DELETE">DELETE</Option>
</Select>
)}
<Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '100px', marginRight: "10px", marginLeft: "10px" }} />
<Input value={this.props.basepath} readOnly onChange={() => { }} style={{ width: '25%'}} />
{getFieldDecorator('path', {
initialValue: this.state.path
})(
<Input placeholder="/path" style={{ width: '350px' }} />
<Input placeholder="/path" style={{ width: '60%' }} />
)}
</InputGroup>
@ -383,7 +401,7 @@ class InterfaceEditForm extends Component {
{this.props.form.getFieldValue('req_body_type') === 'file' ?
<Row className="interface-edit-item" >
<Col span={14} offset={6}>
<Col span={18} offset={4}>
{getFieldDecorator('req_body_other', { initialValue: this.state.req_body_other })(
<Input.TextArea placeholder="备注信息" />
)}
@ -423,8 +441,8 @@ class InterfaceEditForm extends Component {
</FormItem>
<Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'json' ? 'block' : 'none' }}>
<Col span={18} offset={4} id="res_body_json" style={{ minHeight: "300px" }}>
<Col span={17} offset={4} >
<div id="res_body_json" style={{ minHeight: "300px" }} ></div>
</Col>
</Row>
@ -443,16 +461,16 @@ class InterfaceEditForm extends Component {
{...formItemLayout}
label="预览"
>
<pre style={{ backgroundColor: "#eee", lineHeight: "20px" }}>
{this.state.res_body_mock || " "}
</pre>
<div id="mock-preview" style={{ backgroundColor: "#eee", lineHeight: "20px", minHeight: "300px" }}>
</div>
</FormItem>
<Row className="interface-edit-item" style={{ display: this.props.form.getFieldValue('res_body_type') === 'raw' ? 'block' : 'none' }}>
<Col span={18} offset={4} >
{getFieldDecorator('res_body', { initialValue: this.state.res_body })(
<Input.TextArea placeholder="备注信息" />
<Input.TextArea style={{minHeight: "150px"}} placeholder="备注信息" />
)}
</Col>

View File

@ -1,27 +1,85 @@
import React,{Component} from 'react'
import '../interface.scss'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { connect } from 'react-redux';
import { formatTime } from '../../../../common.js';
@connect(
state => {
return {
curdata: state.inter.curdata
}
// import { Card } from 'antd'
// import { getMockUrl } from '../../reducer/modules/news.js'
@connect()
class View extends Component {
constructor(props) {
super(props);
}
)
class InterfaceView extends Component{
static propTypes = {
curdata: PropTypes.object
viewData: PropTypes.object
}
render(){
console.log(this.props.curdata)
let view = JSON.stringify(this.props.curdata, null, " ");
return <pre>
{view}
</pre>
render () {
return <div className="caseContainer">
{/*<Card title={`接口名:${this.props.viewData.casename}`}></Card>*/}
<div className="casename">
<span className="colKey">接口名</span>
<span className="colValue">{this.props.viewData.casename}</span>
</div>
<div className="colTime">
<span className="colKey">添加时间</span>
<span className="colValue">{formatTime(this.props.viewData.add_time/1000)}</span>
</div>
<div className="colTime">
<span className="colKey">更新时间</span>
<span className="colValue">{formatTime(this.props.viewData.up_time/1000)}</span>
</div>
<div className="colEnv">
<span className="colKey">测试环境</span>
<span className="colValue">{this.props.viewData.env}</span>
</div>
<div className="colDomain">
<span className="colKey">域名</span>
<span className="colValue">{this.props.viewData.domain}</span>
</div>
<div className="colPath">
<span className="colKey">路径</span>
<span className="colValue">{this.props.viewData.path}</span>
</div>
<div className="colMethod">
<span className="colKey">请求方法</span>
<span className="colValue">{this.props.viewData.method}</span>
</div>
</div>
}
}
export default InterfaceView;
View.defaultProps = {
viewData: {
casename:"caename",
uid: 107,
col_id: 211,
index: 0,
project_id: 112,
add_time: new Date().getTime(),
up_time: new Date().getTime(),
env: "测试环境",
domain: "域名",
path: "路径",
method: "GET",
req_query: [{
name: "String",
value: "String"
}],
req_headers: [{
name: "String",
value: "String"
}],
req_body_type: "json",
res_body_form: [{
name: "String",
value: "String"
}],
res_body_other: "String"
}
}
export default View

View File

@ -67,10 +67,15 @@ function run(options) {
wordList.push(options.wordList);
}
data = options.data || '';
options.readOnly = options.readOnly || false;
editor = ace.edit(container)
editor.$blockScrolling = Infinity;
editor.getSession().setMode('ace/mode/javascript');
//editor.renderer.setShowGutter(true);
if(options.readOnly === true){
editor.setReadOnly(true);
}
editor.setTheme('ace/theme/xcode');
editor.setOptions({
enableBasicAutocompletion: true,
@ -134,5 +139,15 @@ function handleJson(json) {
}
}
/**
* mockEditor({
container: 'req_body_json', //dom的id
data: that.state.req_body_json, //初始化数据
onChange: function (d) {
that.setState({
req_body_json: d.text
})
}
})
*/
module.exports = run;

View File

@ -65,6 +65,19 @@
}
}
}
.caseContainer{
padding: 24px;
font-size: 12px;
>div{
margin: 8px 0px;
padding: 12px;
background-color: #ececec;
.colKey{
font-weight: bolder;
margin-right: 16px;
}
}
}

View File

@ -5,7 +5,7 @@ import { Route, Switch, Redirect } from 'react-router-dom';
import { Subnav } from '../../components/index'
import { getProject } from '../../reducer/modules/project';
import Interface from './Interface/Interface.js'
import { Activity } from './Activity/Activity.js'
import Activity from './Activity/Activity.js'
import { Setting } from './Setting/Setting.js'

View File

@ -1,6 +1,6 @@
// Actions
const FETCH_NEWS_DATA = 'yapi/news/FETCH_NEWS_DATA';
const FETCH_MORE_NEWS = 'yapi/news/FETCH_MORE_NEWS'
// Reducer
const initialState = {
newsData: {
@ -13,6 +13,21 @@ const initialState = {
export default (state = initialState, action) => {
switch (action.type) {
case FETCH_NEWS_DATA: {
const list = action.payload.data.data.list;
state.newsData.list = list;
state.curpage = 1;
state.newsData.list.sort(function(a,b){
return b.add_time - a.add_time;
})
return {
...state,
newsData: {
total:action.payload.data.data.total,
list: state.newsData.list
}
};
}
case FETCH_MORE_NEWS: {
const list = action.payload.data.data.list;
state.newsData.list.push(...list);
state.newsData.list.sort(function(a,b){
@ -27,7 +42,7 @@ export default (state = initialState, action) => {
total:action.payload.data.data.total,
list: state.newsData.list
}
};
}
}
default:
return state;
@ -52,6 +67,20 @@ export function fetchNewsData (typeid,type,page,limit) {
})
};
}
export function fetchMoreNews (typeid,type,page,limit) {
const param = {
typeid: typeid,
type: type,
page: page,
limit: limit?limit:variable.PAGE_LIMIT
}
return {
type: FETCH_MORE_NEWS,
payload: axios.get('/api/log/list',{
params: param
})
};
}
export function getMockUrl(project_id){
const params = {id: project_id};

View File

@ -61,6 +61,15 @@ class followModel extends baseModel {
projectid: projectid
});
}
updateById(id,data){
return this.model.update({
_id: id
},{
icon: data.icon,
color: data.color
});
}
}
module.exports = followModel;

View File

@ -60,7 +60,8 @@ class logModel extends baseModel {
limit = parseInt(limit);
return this.model.find({
type: type
type: type,
typeid: typeid
}).skip((page - 1) * limit).limit(limit).exec();
}

View File

@ -104,6 +104,16 @@ var followModel = function (_baseModel) {
projectid: projectid
});
}
}, {
key: 'updateById',
value: function updateById(id, data) {
return this.model.update({
_id: id
}, {
icon: data.icon,
color: data.color
});
}
}]);
return followModel;
}(_base2.default);

View File

@ -104,7 +104,8 @@ var logModel = function (_baseModel) {
limit = parseInt(limit);
return this.model.find({
type: type
type: type,
typeid: typeid
}).skip((page - 1) * limit).limit(limit).exec();
}
}, {