diff --git a/client/Application.js b/client/Application.js index 11d5477e..8212403e 100644 --- a/client/Application.js +++ b/client/Application.js @@ -46,16 +46,17 @@ export default class App extends Component {
- - {/**/} - - - - - - - - +
+ + + + + + + + + +
diff --git a/client/actions/interfaceAction.js b/client/actions/interfaceAction.js index 196feff1..53ddaaca 100644 --- a/client/actions/interfaceAction.js +++ b/client/actions/interfaceAction.js @@ -2,7 +2,8 @@ import { FETCH_INTERFACE_DATA, LIST_INTERFACE_CLICK, PROJECT_MEMBER_INTERFACE, - DELETE_INTERFACE_DATA + DELETE_INTERFACE_DATA, + SAVE_INTERFACE_PROJECT_ID } from '../constants/action-types.js' export function fetchInterfaceData (value) { @@ -30,3 +31,10 @@ export function deleteInterfaceData (value) { payload: value } } + +export function saveInterfaceProjectId (value) { + return { + type: SAVE_INTERFACE_PROJECT_ID, + payload: value + } +} diff --git a/client/components/Header/Header.js b/client/components/Header/Header.js index bfc5bb36..e308d072 100644 --- a/client/components/Header/Header.js +++ b/client/components/Header/Header.js @@ -11,12 +11,16 @@ import Srch from './Search/Search' const { Header } = Layout; const MenuUser = (props) => ( - - - { props.user } + + + 个人中心 - - 退出 + + 退出 ); @@ -34,17 +38,19 @@ const ToolUser = (props)=> (
  • - + }> - +
    • @@ -82,6 +88,9 @@ class HeaderCom extends Component { } linkTo = (e) =>{ this.props.changeMenuItem(e.key); + if(!this.props.login){ + message.info('请先登录',1); + } } relieveLink = () => { this.props.changeMenuItem(""); @@ -119,40 +128,48 @@ class HeaderCom extends Component { } render () { const { login, user, msg, uid, curKey } = this.props; + const headerStyle = { + 'background': 'url(./image/bg-img.jpg) no-repeat center', + 'backgroundSize':'cover' + } return ( - - -
    -
    -
    - YAPI -
    - - - 项目广场 - - -
    - {login? - - :""} -
    + +
    +
    +
    + YAPI
    -
    - + + + 项目广场 + + +
    + {login? + + :""} +
    +
    +
    ) } diff --git a/client/components/Header/Header.scss b/client/components/Header/Header.scss index 5a890c64..df310905 100644 --- a/client/components/Header/Header.scss +++ b/client/components/Header/Header.scss @@ -5,10 +5,18 @@ $color-blue-deeper: #34495E; $color-grey-deep : #929aac; $color-black-light : #404040; /* .header-box.css */ + +//.light{ +// background-color: #f7fafc; +// color: $color-blue; +//} +//.dark { +// background-color: $color-black-light; +// color: $color-white; +//} .header-box { display: block; font-size: 0.14rem; - color: $color-white; z-index: 99; // 内容宽度 .content { @@ -17,7 +25,6 @@ $color-black-light : #404040; zoom: 1; overflow: hidden; } - .logo { font-size: .3rem; float: left; @@ -51,7 +58,7 @@ $color-black-light : #404040; } float: left; margin: 0 0 0 .12rem; - font-size: .14rem; + font-size: .2rem; cursor: pointer; color: $color-white; &:not(:last-child){ @@ -75,11 +82,7 @@ $color-black-light : #404040; i{ margin-right: .03rem; } - .dropdown-link{ - i{ - font-size: .2rem; - } - } } } } + diff --git a/client/constants/action-types.js b/client/constants/action-types.js index 12a7d58b..4e28de56 100644 --- a/client/constants/action-types.js +++ b/client/constants/action-types.js @@ -3,7 +3,8 @@ export const FETCH_INTERFACE_DATA = 'FETCH_INTERFACE_DATA' export const LIST_INTERFACE_CLICK = 'LIST_INTERFACE_CLICK' export const PROJECT_MEMBER_INTERFACE = 'PROJECT_MEMBER_INTERFACE' export const PUSH_INTERFACE_NAME = 'PUSH_INTERFACE_NAME' -export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA' +export const DELETE_INTERFACE_DATA = 'DELETE_INTERFACE_DATA' +export const SAVE_INTERFACE_PROJECT_ID = 'SAVE_INTERFACE_PROJECT_ID' // addInterFace export const FETCH_ADD_INTERFACE_INPUT = 'FETCH_ADD_INTERFACE_INPUT' diff --git a/client/containers/AddInterface/AddInterface.js b/client/containers/AddInterface/AddInterface.js index 8697a273..74e2229b 100644 --- a/client/containers/AddInterface/AddInterface.js +++ b/client/containers/AddInterface/AddInterface.js @@ -11,6 +11,7 @@ import ReqHeader from './ReqHeader/ReqHeader.js' import ReqParams from './ReqParams/ReqParams.js' import ResParams from './ResParams/ResParams.js' import Result from './Result/Result.js' +import MockUrl from './MockUrl/MockUrl.js' import InterfaceTest from './InterfaceTest/InterfaceTest.js' import { saveForms, @@ -23,6 +24,7 @@ import { pushInterfaceMethod } from '../../actions/addInterface.js' +let projectId = '' const success = () => { message.success('保存成功!') } @@ -71,7 +73,8 @@ class AddInterface extends Component { this.state = { isLoading: '', isSave: false, - mockJson: '' + mockJson: '', + mockURL: '' } } @@ -106,7 +109,6 @@ class AddInterface extends Component { url.match(regTwo) return RegExp.$1 } - } verificationURL () { @@ -117,9 +119,22 @@ class AddInterface extends Component { } } + getMockURL (project_id, result) { + const params = {id: project_id} + axios.get('/project/get', {params: params}). + then( data => { + const { protocol, prd_host, basepath } = data.data.data + const mockURL = `${protocol}://${prd_host}${basepath}${result.path}` + this.setState({ + mockURL: mockURL + }) + }) + } + editState (data) { const props = this.props const { path, title, req_params_other, res_body, req_headers, project_id, method } = data + props.pushInputValue(path) props.pushInterfaceMethod(method) props.pushInterfaceName(title) @@ -127,6 +142,7 @@ class AddInterface extends Component { props.getResParams(res_body) props.addReqHeader(req_headers) props.fetchInterfaceProject(project_id) + projectId = project_id } initInterfaceData (interfaceId) { @@ -142,6 +158,8 @@ class AddInterface extends Component { this.editState(result) // 初始化 mock this.mockData() + + this.getMockURL(projectId, result) }) .catch(e => { console.log(e) @@ -175,7 +193,6 @@ class AddInterface extends Component { resParams = JSON.parse(this.props.resParams) json = JSON.stringify(Mock.mock(resParams), null, 2) } - console.log('json', json) this.setState({ mockJson: json }) @@ -184,13 +201,13 @@ class AddInterface extends Component { @autobind saveForms () { let postURL = undefined - const { interfaceName, url, seqGroup, reqParams, resParams } = this.props + const { interfaceName, url, seqGroup, reqParams, resParams, method } = this.props const ifTrue = this.verificationURL() const interfaceId = this.getInterfaceId() const params = { title: interfaceName, path: url, - method: 'POST', + method: method, req_headers: seqGroup, project_id: interfaceId, req_params_type: 'json', @@ -221,8 +238,8 @@ class AddInterface extends Component { render () { const TabPane = Tabs.TabPane - const { isLoading, isSave, mockJson='' } = this.state - console.log('mockJson', mockJson) + const { isLoading, isSave, mockJson='', mockURL } = this.state + return (
    @@ -235,6 +252,7 @@ class AddInterface extends Component { + { // mock diff --git a/client/containers/AddInterface/AddInterface.scss b/client/containers/AddInterface/AddInterface.scss index f2c24971..2bee99f2 100644 --- a/client/containers/AddInterface/AddInterface.scss +++ b/client/containers/AddInterface/AddInterface.scss @@ -169,6 +169,23 @@ color: #CCC; } } + + /* .mock-url-box.css */ + .mock-url-box { + clear: both; + padding: 10px 0 0 0; + margin: 0 0 0 20px; + p { + width: 70%; + height: 35px; + line-height: 35px; + border: 1px #DDD solid; + display: inline-block; + vertical-align: -4px; + margin: 0 10px 0 0; + padding: 0 0 0 10px; + } + } .loading { display: none; diff --git a/client/containers/AddInterface/InterfaceTest/InterfaceTest.js b/client/containers/AddInterface/InterfaceTest/InterfaceTest.js index a9c3b59c..82c90b3c 100644 --- a/client/containers/AddInterface/InterfaceTest/InterfaceTest.js +++ b/client/containers/AddInterface/InterfaceTest/InterfaceTest.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { Button, Input, Select } from 'antd' +import { Button, Input, Select, Card } from 'antd' import { autobind } from 'core-decorators'; import crossRequest from 'cross-request'; import { withRouter } from 'react-router'; @@ -90,8 +90,8 @@ export default class InterfaceTest extends Component { a:1 }, success: (res, header) => { - this.setState({res}) console.log(header) + this.setState({res}) } }) } @@ -116,6 +116,12 @@ export default class InterfaceTest extends Component { }) } + const headers = {} + seqGroup.forEach((headerItem) => { + if (headerItem.name) { + headers[headerItem.name] = headerItem.value; + } + }) const search = URL.format({ query @@ -138,40 +144,50 @@ export default class InterfaceTest extends Component {
    -
    - HEADERS： - { - seqGroup.map((headerItem, index) => { - return ( - headerItem.name ? (
    - {' = '} - -
    ) : '' - ) - }) - } -
    -
    - 请求参数： - { - Object.keys(reqParams).map((key, index) => { - const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString(); - return ( -
    - {' = '} - -
    - ) - }) - } -
    + +
    + HEADERS： + { + Object.keys(headers).map((key, index) => { + return ( +
    + {' = '} + +
    + ) + }) + } +
    +     + +
    + 请求参数： + { + Object.keys(reqParams).map((key, index) => { + const value = typeof reqParams[key] === 'object' ? JSON.stringify(reqParams[key]) : reqParams[key].toString(); + return ( +
    + {' = '} + +
    + ) + }) + } +
    +     -
    - 返回结果： -
    - + +
    + 返回结果： +
    + +
    -
    +
    ) } diff --git a/client/containers/AddInterface/MockUrl/MockUrl.js b/client/containers/AddInterface/MockUrl/MockUrl.js new file mode 100644 index 00000000..cfc8b81b --- /dev/null +++ b/client/containers/AddInterface/MockUrl/MockUrl.js @@ -0,0 +1,46 @@ +import '../AddInterface.scss' +import React, { Component } from 'react' +import { Button, message } from 'antd' +import Clipboard from 'clipboard' +import PropTypes from 'prop-types' + +const success = () => { + message.success('复制成功!') +} + +class MockUrl extends Component { + static propTypes = { + mockURL: PropTypes.string + } + + constructor(props) { + super(props) + } + + componentDidMount () { + setTimeout(this.clipboard, 500) + } + + clipboard () { + const btn = document.querySelector('#mock-clipboard') + const txt = document.querySelector('#mock-p').innerHTML + console.log('txt', txt) + new Clipboard(btn, { + text: () => txt, + target () { + success() + } + }) + } + + render () { + return ( +
    +

    {this.props.mockURL}

    + +
    + ) + } +} + +export default MockUrl \ No newline at end of file diff --git a/client/containers/AddInterface/ReqHeader/ReqHeader.js b/client/containers/AddInterface/ReqHeader/ReqHeader.js index bb69af71..d3e39576 100644 --- a/client/containers/AddInterface/ReqHeader/ReqHeader.js +++ b/client/containers/AddInterface/ReqHeader/ReqHeader.js @@ -11,7 +11,6 @@ import { // 重新渲染页面 const getReqList = function (self) { const [reqList, seqGroup] = [[], self.props.seqGroup] - console.log('seqGroup', seqGroup) seqGroup.map((value, key) => { reqList.push() }) diff --git a/client/containers/AddInterface/ReqMethod/ReqMethod.js b/client/containers/AddInterface/ReqMethod/ReqMethod.js index 3e838275..286120a8 100644 --- a/client/containers/AddInterface/ReqMethod/ReqMethod.js +++ b/client/containers/AddInterface/ReqMethod/ReqMethod.js @@ -57,20 +57,15 @@ class ReqMethod extends Component { render () { const { Option } = Select - const { url, interfaceName } = this.props + const { url, interfaceName, method } = this.props return ( -
    -

    YAPI

    -
    一个高效，易用，可部署的Api管理系统
    -
    - - - - - - - -
    - -
    - - +
    +
    +
    + +
    +
    +

    YAPI

    +
    一个高效，易用，可部署的Api管理系统
    +
    + + + + + + + + + + +
    + +
    + + + + +
    { result = result.data.data diff --git a/client/containers/Interface/InterfaceList/InterfaceList.js b/client/containers/Interface/InterfaceList/InterfaceList.js index 8d278db9..6be4b0e0 100644 --- a/client/containers/Interface/InterfaceList/InterfaceList.js +++ b/client/containers/Interface/InterfaceList/InterfaceList.js @@ -22,7 +22,7 @@ class InterfaceList extends Component { render () { const { projectMember } = this.props const getInterfaceId = this.getInterfaceId() - console.log(`/AddInterface/${getInterfaceId}`) + return (
    diff --git a/client/containers/Interface/InterfaceTable/InterfaceTable.js b/client/containers/Interface/InterfaceTable/InterfaceTable.js index a65ca614..4e3d26ac 100644 --- a/client/containers/Interface/InterfaceTable/InterfaceTable.js +++ b/client/containers/Interface/InterfaceTable/InterfaceTable.js @@ -1,7 +1,8 @@ import React, { Component } from 'react' -import { Table, Button } from 'antd' +import { Table, Popconfirm, message } from 'antd' import PropTypes from 'prop-types' import axios from 'axios' +import { autobind } from 'core-decorators' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import { deleteInterfaceData } from '../../../actions/interfaceAction.js' @@ -21,6 +22,7 @@ class InterfaceTable extends Component { static propTypes = { interfaceData: PropTypes.array, data: PropTypes.array, + projectId: PropTypes.string, deleteInterfaceData: PropTypes.func } @@ -28,6 +30,12 @@ class InterfaceTable extends Component { super(props) } + @autobind + confirm (interfaceId) { + this.deleteInterface(interfaceId) + message.success('删除成功!'); + } + deleteInterfaceData (interfaceId) { let interfaceArr = [] let { interfaceData } = this.props @@ -69,13 +77,17 @@ class InterfaceTable extends Component { title: '功能', 'key': 'action', render: (data) => { - const deleteInterface = this.deleteInterface.bind(this, data._id) + // const deleteInterface = this.deleteInterface.bind(this, data._id) + const confirm = this.confirm.bind(this, data._id) return ( - - + 编辑 + + 测试 + + + 删除 + ) } diff --git a/client/containers/Login/Login.scss b/client/containers/Login/Login.scss index c3856295..8c4420c7 100644 --- a/client/containers/Login/Login.scss +++ b/client/containers/Login/Login.scss @@ -15,17 +15,19 @@ margin-bottom: .1rem; } -.qsso-breakline { - position: relative; - text-align: center; - margin: .24rem auto; - height: 1px; - background-color: #bbb; - .qsso-breakword { +.qsso-breakline{ + display: flex; + align-items: center; + color: #999; + margin: .2rem auto; + &:before, &:after{ + content: ""; display: inline-block; - transform: translateY(-50%); - background-color: #f7f7f7; - padding: 0 .08rem; - color: #999; + height: .02rem; + flex: 1; + border-top: .01rem solid #bbb; + } + .qsso-breakword{ + padding: 0 .1rem; } } diff --git a/client/containers/ProjectGroups/ProjectList/ProjectList.scss b/client/containers/ProjectGroups/ProjectList/ProjectList.scss index 95ba4487..5950d67b 100644 --- a/client/containers/ProjectGroups/ProjectList/ProjectList.scss +++ b/client/containers/ProjectGroups/ProjectList/ProjectList.scss @@ -4,7 +4,6 @@ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); border-radius: 4px; text-align: right; - min-height: 700px;; } .m-table { diff --git a/client/containers/User/LeftMenu.js b/client/containers/User/LeftMenu.js index 2dc2d6c3..5a3acec9 100644 --- a/client/containers/User/LeftMenu.js +++ b/client/containers/User/LeftMenu.js @@ -10,7 +10,8 @@ const Option = AutoComplete.Option; state => { console.log(state); return { - curUid: state.login.uid + '' + curUid: state.login.uid + '', + curUserName: state.login.userName } } ) @@ -26,7 +27,8 @@ class LeftMenu extends Component { } static propTypes = { - curUid: PropTypes.string + curUid: PropTypes.string, + curUserName: PropTypes.string } //延迟搜索 @@ -80,6 +82,9 @@ class LeftMenu extends Component { const { dataSource } = this.state; return (
    +
    +
    用户名 : {`${this.props.curUserName}`}
    +
    @@ -98,7 +103,7 @@ class LeftMenu extends Component {
    - + {content} diff --git a/client/containers/User/Profile.js b/client/containers/User/Profile.js index c2a0e528..b8de8a2e 100644 --- a/client/containers/User/Profile.js +++ b/client/containers/User/Profile.js @@ -1,5 +1,5 @@ import React, { Component } from 'react' -import { Row, Col, Icon, Input, Button, Select, message } from 'antd' +import { Row, Col, Input, Button, Select, message } from 'antd' import axios from 'axios'; import {formatTime} from '../../common.js' import PropTypes from 'prop-types' @@ -131,7 +131,8 @@ class Profile extends Component { if (this.state.usernameEdit === false) { userNameEditHtml =
    {userinfo.username}   - { this.handleEdit('usernameEdit', true) }}>修改 + {/* { this.handleEdit('usernameEdit', true) }}>修改*/} +
    } else { userNameEditHtml =
    @@ -146,7 +147,8 @@ class Profile extends Component { if (this.state.emailEdit === false) { emailEditHtml =
    {userinfo.email}   - { this.handleEdit('emailEdit', true) }} >修改 + {/* { this.handleEdit('emailEdit', true) }} >修改*/} +
    } else { emailEditHtml =
    @@ -161,7 +163,8 @@ class Profile extends Component { if (this.state.roleEdit === false) { roleEditHtml =
    {roles[userinfo.role]}   - { this.handleEdit('roleEdit', true) }} >修改 + {/* { this.handleEdit('roleEdit', true) }} >修改*/} +
    } else { roleEditHtml =
    协议 : - 请求协议 - 请求方式 - diff --git a/client/containers/Home/Home.js b/client/containers/Home/Home.js index 56383d10..478963de 100644 --- a/client/containers/Home/Home.js +++ b/client/containers/Home/Home.js @@ -13,34 +13,51 @@ import QueueAnim from 'rc-queue-anim'; const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' }; +const imgAnim = { y: '+=50', opacity: 0, type: 'from', ease: 'easeOutQuad', duration: '1500'}; +const style = { + 'height':'100%', + 'width':'100%', + 'background': 'url(./image/bg-img.jpg) no-repeat center', + 'backgroundSize':'cover' +} const HomeGuest = (props) => (
    -
    -
    - -