mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2025-01-30 13:20:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

opti: 接口集合全部接口的表格样式优化

Browse Source
This commit is contained in:
wenbo.dong 2017-09-07 15:56:29 +08:00
parent 214e798d1d
commit 664c319fa9
19 changed files with 98 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/common.js
View File

@ -85,3 +85,12 @@ exports.handlePath = (path) => {
path = path[path.length - 1] === '/' ? path.substr(0, path.length - 1) : path;
return path;
}
// 返回字符串长度，汉字计数为2
exports.strLength = (str) => {
let length = 0;
for (let i = 0; i < str.length; i++) {
str.charCodeAt(i) > 255 ? length += 2 : length++;
}
return length;
}

32
client/constants/variable.js
View File

@ -77,5 +77,35 @@ export default {
'android-o',
'apple-o'
],
HTTP_REQUEST_HEADER: ["Accept", "Accept-Charset", "Accept-Encoding", "Accept-Language", "Accept-Datetime", "Authorization", "Cache-Control", "Connection", "Cookie", "Content-Disposition", "Content-Length", "Content-MD5", "Content-Type", "Date", "Expect", "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match", "If-Range", "If-Unmodified-Since", "Max-Forwards", "Origin", "Pragma", "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent", "Upgrade", "Via", "Warning", "X-Requested-With", "DNT", "X-Forwarded-For", "X-Forwarded-Host", "X-Forwarded-Proto", "Front-End-Https", "X-Http-Method-Override", "X-ATT-DeviceId", "X-Wap-Profile", "Proxy-Connection", "X-UIDH", "X-Csrf-Token"]
HTTP_REQUEST_HEADER: ["Accept", "Accept-Charset", "Accept-Encoding", "Accept-Language", "Accept-Datetime", "Authorization", "Cache-Control", "Connection", "Cookie", "Content-Disposition", "Content-Length", "Content-MD5", "Content-Type", "Date", "Expect", "From", "Host", "If-Match", "If-Modified-Since", "If-None-Match", "If-Range", "If-Unmodified-Since", "Max-Forwards", "Origin", "Pragma", "Proxy-Authorization", "Range", "Referer", "TE", "User-Agent", "Upgrade", "Via", "Warning", "X-Requested-With", "DNT", "X-Forwarded-For", "X-Forwarded-Host", "X-Forwarded-Proto", "Front-End-Https", "X-Http-Method-Override", "X-ATT-DeviceId", "X-Wap-Profile", "Proxy-Connection", "X-UIDH", "X-Csrf-Token"],
METHOD_COLOR: {
post: {
bac: "#d2eafb",
color: "#108ee9"
},
get: {
bac: "#cfefdf",
color: "#00a854"
},
put: {
bac: "#fff3cf",
color: "#ffbf00"
},
delete: {
bac: "#fcdbd9",
color: "#f04134"
},
head: {
bac: "#fff3cf",
color: "#ffbf00"
},
patch: {
bac: "#fff3cf",
color: "#ffbf00"
},
options: {
bac: "#fff3cf",
color: "#ffbf00"
}
}
}

2
client/containers/Group/GroupList/GroupList.js
View File

@ -172,7 +172,7 @@ export default class GroupList extends Component {
title: "确认删除 "+that.props.currGroup.group_name+" 分组吗？",
content: <div style={{marginTop:'10px', fontSize: '12px', lineHeight: '25px'}}>
<Alert message="警告：此操作非常危险,会删除该分组下面所有项目和接口，并且无法恢复!" type="warning" />
<div style={{marginTop: '15px'}}>
<div style={{marginTop: '16px'}}>
<p><b>请输入分组名称确认此操作:</b></p>
<Input id="group_name" />
</div>

4
client/containers/Home/Home.scss
View File

@ -351,11 +351,11 @@ $color-bg-lightblue: #c6e2ff;
.ant-card {
font-size: .17rem;
border-radius: .04rem;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
border: none;
}
.ant-card:not(.ant-card-no-hovering):hover {
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
box-shadow: 0 16px 35px rgba(50,50,93,.1), 0 5px 16px rgba(0,0,0,.07);
}
.ant-card-head {
background-color: $color-blue-grey-lighter;

2
client/containers/Project/Activity/Activity.scss
View File

@ -109,7 +109,7 @@
.ant-timeline-item-content{
padding: 0px;
width: auto;
margin-top: 15px;
margin-top: 16px;
.loggetMore{
margin: 0px;
padding: 8px;

2
client/containers/Project/Interface/Interface.js
View File

@ -80,7 +80,7 @@ class Interface extends Component {
const { action } = this.props.match.params;
const activeKey = action === 'api' ? 'api' : 'colOrCase';
// console.log(matchPath(this.props.location.pathname, contentRouter));
return <div className="web-content g-row" style={{ marginBottom: "15px" }}>
return <div className="web-content g-row" style={{ marginBottom: "16px" }}>
<Row gutter={16} >
<Col span={6}>
<div className="left-menu">

4
client/containers/Project/Interface/InterfaceCol/InterfaceColContent.js
View File

@ -87,7 +87,7 @@ export default class InterfaceColContent extends Component {
)
}
}, {
title: '请求方式',
title: '请求方法',
dataIndex: 'method',
key: 'method'
}, {
@ -101,7 +101,7 @@ export default class InterfaceColContent extends Component {
return (
<div>
<div style={{padding:"15px"}}>
<div style={{padding:"16px"}}>
<h2 style={{marginBottom: '10px'}}>测试集合</h2>
<Table dataSource={currCaseList} columns={columns} pagination={false} rowKey="_id"/>
</div>

2
client/containers/Project/Interface/InterfaceCol/InterfaceColMenu.js
View File

@ -217,7 +217,7 @@ export default class InterfaceColMenu extends Component {
<div className="interface-filter">
<Input placeholder="Filter by name" style={{ width: "70%" }} onChange={this.filterCol} />
<Tooltip placement="bottom" title="添加集合">
<Tag color="#108ee9" style={{ marginLeft: "15px" }} onClick={() => this.showColModal('add')} ><Icon type="plus" /></Tag>
<Tag color="#108ee9" style={{ marginLeft: "16px" }} onClick={() => this.showColModal('add')} ><Icon type="plus" /></Tag>
</Tooltip>
</div>
<Tree

20
client/containers/Project/Interface/InterfaceList/Edit.scss
View File

@ -14,4 +14,22 @@
.ant-select-selection__rendered{
line-height: 34px;
}
}
}
.table-interfacelist {
margin-top: .2rem;
white-space: nowrap;
.colValue{
display: inline-block;
border-radius: 4px;
color: #00a854;
background: #cfefdf;
border-color: #cfefdf;
height: 23px;
line-height: 23px;
text-align: center;
font-size: 10px;
margin-right: 7px;
padding: 0 5px;
}
}

29
client/containers/Project/Interface/InterfaceList/InterfaceList.js
View File

@ -5,13 +5,16 @@ import axios from 'axios'
import {
Table, Tag, Button, Modal, message
} from 'antd';
import { formatTime } from '../../../../common.js'
import AddInterfaceForm from './AddInterfaceForm';
import { fetchInterfaceList} from '../../../../reducer/modules/interface.js';
import { Link } from 'react-router-dom';
import variable from '../../../../constants/variable';
import './Edit.scss';
@connect(
state => {
return {
curData: state.inter.curdata,
curProject: state.project.currProject
}
},{
@ -32,6 +35,7 @@ class InterfaceList extends Component {
}
static propTypes = {
curData: PropTypes.object,
match: PropTypes.object,
curProject: PropTypes.object,
history: PropTypes.object,
@ -115,13 +119,19 @@ class InterfaceList extends Component {
return <span>{this.props.curProject.basepath + item}</span>
}
}, {
title: '请求方式',
title: '请求方法',
dataIndex: 'method',
key: 'method'
key: 'method',
width: 100,
render: (item) => {
let methodColor = variable.METHOD_COLOR[item ? item.toLowerCase() : 'get'];
return <span style={{color:methodColor.color,backgroundColor:methodColor.bac}} className="colValue">{item}</span>
}
}, {
title: '状态',
dataIndex: 'status',
key: 'status',
width: 100,
render: (item) => {
return <div>{item === 'done' ?
<Tag color="#87d068">完成</Tag>
@ -137,13 +147,6 @@ class InterfaceList extends Component {
value: 'undone'
}],
onFilter: (value, record) => record.status.indexOf(value) === 0
}, {
title: '更新时间',
dataIndex: 'up_time',
key: 'up_time',
render: (item) => {
return <span>{formatTime(item)}</span>
}
}]
const data = this.state.data.map(item => {
@ -152,10 +155,10 @@ class InterfaceList extends Component {
});
return (
<div style={{ padding: "15px" }}>
<div style={{ padding: "16px" }}>
<h2 style={{ display: 'inline-block'}}>接口列表</h2>
<Button style={{float: "right", marginRight: '10px'}} type="primary" onClick={() => this.setState({ visible: true })}>添加接口</Button>
<Table style={{marginTop: '20px'}} pagination={false} columns={columns} onChange={this.handleChange} dataSource={data} />
<Table className="table-interfacelist" pagination={false} columns={columns} onChange={this.handleChange} dataSource={data} />
<Modal
title="添加接口"
visible={this.state.visible}
@ -169,4 +172,4 @@ class InterfaceList extends Component {
}
}
export default InterfaceList
export default InterfaceList

2
client/containers/Project/Interface/InterfaceList/InterfaceMenu.js
View File

@ -217,7 +217,7 @@ class InterfaceMenu extends Component {
let menuList = this.props.list;
const searchBox = <div className="interface-filter">
<Input onChange={this.onFilter} value={this.state.filter} placeholder="Filter by name" style={{ width: "70%" }} />
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} style={{ marginLeft: "15px" }} ><Icon type="plus" /></Tag>
<Tag color="#108ee9" onClick={() => this.changeModal('add_cat_modal_visible', true)} style={{ marginLeft: "16px" }} ><Icon type="plus" /></Tag>
<Modal
title="添加接口"
visible={this.state.visible}

2
client/containers/Project/Interface/InterfaceList/Run/Run.scss
View File

@ -32,7 +32,7 @@
.col-list {
height: 200px;
overflow: auto;
margin: 7px 0 15px 0;
margin: 7px 0 16px 0;
background: #eaeaea;
.col-item {
padding: 7px 10px 7px 10px;

43
client/containers/Project/Interface/InterfaceList/View.js
View File

@ -6,6 +6,7 @@ import { Table } from 'antd'
const mockEditor = require('./mockEditor.js')
import { formatTime } from '../../../../common.js';
import ErrMsg from '../../../../components/ErrMsg/ErrMsg.js';
import variable from '../../../../constants/variable';
// import { Card } from 'antd'
// import { getMockUrl } from '../../reducer/modules/news.js'
@ -29,8 +30,8 @@ class View extends Component {
}
req_body_form(req_body_type,req_body_form){
if(req_body_type === 'form'){
@ -131,7 +132,7 @@ class View extends Component {
return <Table bordered size="small" pagination = {false} columns= {columns} dataSource = {dataSource} />;
}
countEnter(str){
let i = 0;
let c = 0;
@ -161,7 +162,7 @@ class View extends Component {
}
}
componentDidMount(){
if(this.props.curData.title){
this.bindAceEditor.bind(this)();
}
@ -209,7 +210,7 @@ class View extends Component {
dataIndex: 'value',
key: 'value'
}];
const columns = [{
title: '参数名称',
dataIndex: 'name',
@ -243,39 +244,9 @@ class View extends Component {
done:{
bac: "rgb(135, 208, 104)",
color: "white"
}
}
let methodColor = {
post: {
bac: "#d2eafb",
color: "#108ee9"
},
get: {
bac: "#cfefdf",
color: "#00a854"
},
put: {
bac: "#fff3cf",
color: "#ffbf00"
},
delete: {
bac: "#fcdbd9",
color: "#f04134"
},
head: {
bac: "#fff3cf",
color: "#ffbf00"
},
patch: {
bac: "#fff3cf",
color: "#ffbf00"
},
options: {
bac: "#fff3cf",
color: "#ffbf00"
}
}
methodColor = methodColor[this.props.curData.method?this.props.curData.method.toLowerCase():"get"];
let methodColor = variable.METHOD_COLOR[this.props.curData.method?this.props.curData.method.toLowerCase():"get"];
statusColor = statusColor[this.props.curData.status?this.props.curData.status.toLowerCase():"undone"];
let h = this.countEnter(this.props.curData.req_body_other);
const aceEditor = <div style={{display:this.props.curData.req_body_other&&this.props.curData.req_body_type==="json"?"block":"none"}} className="colBody">

2
client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
View File

@ -142,7 +142,7 @@ class ProjectMessage extends Component {
title: "确认删除 " + that.props.projectMsg.name + " 项目吗？",
content: <div style={{ marginTop: '10px', fontSize: '12px', lineHeight: '25px' }}>
<Alert message="警告：此操作非常危险,会删除该项目下面所有接口，并且无法恢复!" type="warning" banner />
<div style={{ marginTop: '15px' }}>
<div style={{ marginTop: '16px' }}>
<p style={{ marginBottom: '8px' }}><b>请输入项目名称确认此操作:</b></p>
<Input id="project_name" size="large" />
</div>

2
client/containers/User/index.scss
View File

@ -147,7 +147,7 @@
width: 130px;
}
.text{
padding-right: 15px;
padding-right: 16px;
}
.text-button{
color: #657289;

2
client/styles/theme.less
View File

@ -128,7 +128,7 @@
@btn-disable-bg : @disabled-bg;
@btn-disable-border : @border-color-base;
@btn-padding-base : 2px 15px;
@btn-padding-base : 2px 16px;
@btn-font-size-lg : @font-size-lg;
@btn-padding-lg : @btn-padding-base;
@btn-padding-sm : 0 7px;

2
static/doc/source/code.css
View File

File diff suppressed because one or more lines are too long

2
static/doc/source/main.css
View File

File diff suppressed because one or more lines are too long

2
static/doc/source/main.js
View File

File diff suppressed because one or more lines are too long