mirror/yapi
2
0
Fork 0
mirror of https://github.com/YMFE/yapi.git synced 2024-12-03 04:50:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

opti: 布局调整为100% 宽度

Browse Source
This commit is contained in:
wenbo.dong 2017-09-19 20:04:18 +08:00
parent bcf3148138
commit ad6f9a68d3
20 changed files with 258 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/Header/Header.js
View File

@ -14,7 +14,7 @@ import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
const MenuUser = (props) => (
<Menu theme="dark" className="user-menu" >
<Menu.Item style={{"background":"#202d3a"}} key="0">
<Menu.Item style={{"background":"#32363a"}} key="0">
<Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user"/>个人中心</Link>
</Menu.Item>
<Menu.Item key="1">

1
client/components/Header/Header.scss
View File

@ -15,7 +15,6 @@
line-height: .56rem;
height: .56rem;
width: 56px;
border-left: 1px solid #55616d;
border-right: 1px solid #55616d;
&:hover{
background-color: #38495a;

1
client/components/Subnav/Subnav.scss
View File

@ -12,6 +12,7 @@
.item {
line-height: .54rem;
padding: 0 .36rem;
font-weight: normal;
}
}
}

2
client/containers/Follows/Follows.js
View File

@ -70,7 +70,7 @@ class Follows extends Component {
path: '/follow'
}]}/>*/}
<div className="g-row">
<Row gutter={24} className="follow-box card-panel pannel-without-tab">
<Row gutter={24} className="follow-box pannel-without-tab">
{data.length ? data.map((item, index) => {
return (
<Col span={6} key={index}>

5
client/containers/Follows/Follows.scss
View File

@ -7,8 +7,3 @@
background-color: #fff;
margin-top: 32px;
}
.card-panel {
border-radius: 4px;
box-shadow: $box-shadow-panel;
}

6
client/containers/Group/Group.js
View File

@ -19,11 +19,11 @@ export default class Group extends Component {
const GroupContent = (
<Layout>
<Sider style={{ height: 'auto'}} width={300}>
<Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '56px', marginLeft: '16px', marginTop: '24px' }} width={300}>
<div className="logo" />
<GroupList></GroupList>
</Sider>
<Layout>
<Layout style={{ marginLeft: 316 }}>
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<Tabs type="card" className="m-tab">
<TabPane tab="项目列表" key="1"><ProjectList/></TabPane>
@ -31,7 +31,7 @@ export default class Group extends Component {
</Tabs>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©2016 Created by Ant UED
© 2017 YMFE 京ICP备17044220号
</Footer>
</Layout>
</Layout>

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

@ -232,22 +232,23 @@ export default class GroupList extends Component {
return (
<div className="m-group">
<div className="group-bar">
<div className="curr-group">
<div className="curr-group-name">
<div className="text" title={currGroup.group_name}>{currGroup.group_name}</div>
{
this.props.curUserRole === "admin" ? (editmark) : ''
}
{
this.props.curUserRole === "admin" || currGroup.role ==='owner' ? (delmark) : ''
}
{
this.props.curUserRole === 'admin' ? (addmark) : ''
}
{
this.props.curUserRole === "admin" || currGroup.role ==='owner' ?
<div className="curr-group">
<div className="curr-group-name">{currGroup.group_name} 分组管理：
{
this.props.curUserRole === "admin" ? (editmark) : ''
}
{
this.props.curUserRole === "admin" || currGroup.role ==='owner' ? (delmark) : ''
}
{
this.props.curUserRole === 'admin' ? (addmark) : ''
}
</div>
</div> : ''
}
</div>
<div className="curr-group-desc" title={currGroup.group_desc}>简介：{currGroup.group_desc}</div>
</div>
<div className="group-operate">
<div className="search">
<Search placeholder="Filter by name" onChange={this.searchGroup} onSearch={(v) => this.searchGroup(null, v)} />
@ -296,7 +297,7 @@ export default class GroupList extends Component {
</Row>
</Modal>:''
}
<Modal
title="编辑分组"
visible={this.state.editGroupModalVisible}

10
client/containers/Group/GroupList/GroupList.scss
View File

@ -1,16 +1,14 @@
@import '../../../styles/mixin.scss';
.group-bar {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background-color: #fff;
min-height: 5rem;
.curr-group {
background: $color-bg-dark;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
SimSun, sans-serif;
.curr-group-name {
padding: .08rem;
font-size: .14rem;
.text {
display: inline-block;
overflow: hidden;
@ -20,9 +18,6 @@
font-weight: 200;
vertical-align: bottom;
}
color: #fff;
font-size: 24px;
}
.curr-group-desc {
color: #fff;
@ -48,7 +43,6 @@
.group-operate {
height: 48px;
padding: 10px 6px;
background: #eee;
display: flex;
justify-content: space-around;
.search {

4
client/containers/Group/MemberList/MemberList.scss
View File

@ -3,11 +3,9 @@
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 4.68rem;
margin-top: 0;
box-shadow: $box-shadow-panel;
// box-shadow: $box-shadow-panel;
}
.m-tab {

2
client/containers/Group/ProjectList/ProjectList.scss
View File

@ -7,8 +7,6 @@
.m-panel{
background-color: #fff;
padding: 24px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
border-radius: 4px;
min-height: 4.68rem;
margin-top: 0;
}

2
client/containers/News/News.js
View File

@ -57,7 +57,7 @@ class News extends Component {
path: '/follow'
}]}/>
<div className="g-row">
<section className="news-box">
<section className="news-box m-panel">
<div className="logHead">
<Breadcrumb />
<div className="Mockurl">

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

@ -29,7 +29,7 @@ class Activity extends Component {
let {currProject} = this.props;
return (
<div className="g-row">
<section className="news-box">
<section className="news-box m-panel">
<div style={{display: "none"}} className="logHead">
{/*<Breadcrumb />*/}
<div className = "projectDes">

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

@ -1,8 +1,9 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Row, Col, Tabs } from 'antd';
import { Tabs, Layout } from 'antd';
import { Route, Switch, matchPath } from 'react-router-dom';
import { connect } from 'react-redux';
const { Content, Footer, Sider } = Layout;
import './interface.scss'
@ -80,9 +81,9 @@ 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: "16px" }}>
<Row gutter={16} >
<Col span={6}>
return (
<Layout style={{marginTop: '-24px'}}>
<Sider style={{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: '112px', marginLeft: '16px', marginTop: '24px' }} width={300}>
<div className="left-menu">
<Tabs type="card" activeKey={activeKey} onChange={this.onChange}>
<Tabs.TabPane tab="接口列表" key="api">
@ -93,19 +94,21 @@ class Interface extends Component {
</Tabs.TabPane>
</Tabs>
</div>
</Col>
<Col span={18} >
<div className="right-content">
<Switch>
<Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
<Route {...contentRouter} component={InterfaceRoute} />
</Switch>
</div>
</Col>
</Row>
</div>
</Sider>
<Layout style={{ marginLeft: 316 }}>
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="right-content">
<Switch>
<Route exact path="/project/:id/interface/:action" component={InterfaceRoute} />
<Route {...contentRouter} component={InterfaceRoute} />
</Switch>
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
© 2017 YMFE 京ICP备17044220号
</Footer>
</Layout>
</Layout>)
}
}

247
client/containers/Project/Interface/interface.scss
View File

@ -1,132 +1,127 @@
.web-content{
.left-menu{
min-height: 5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF;
border-radius:5px;
margin: 3px;
// .item-all-interface {
// background-color: red;
// }
// .ant-tabs-bar{
// border-bottom: none;
// margin-bottom: 0
// }
.ant-tabs-nav{
width:100%;
}
.ant-tabs-tab{
min-width: 50%;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
height: 39px;
background: #fff;
border: 1px solid #d9d9d9;
border-bottom: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:nth-of-type(2) {
border-left: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-of-type {
border-right: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
height: 40px;
background-color: #efefef;
color:#021b2d;
font-weight: 500;
// margin-bottom: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container{
height: 40px;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar{
text-align: center;
background: #ececec;
}
.ant-tabs-nav-wrap{
height: 40px;
line-height: 31px;
// border-bottom: 1px solid #d9d9d9;
}
.ant-input {
width: 100%;
}
.interface-filter{
padding-top:7px;
padding-left: 10px;
padding-right: 50px;
height:45px;
line-height: 32px;
background-color: #efefef;
position: relative;
}
.btn-filter {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.interface-list{
.cat_switch_hidden{
.ant-tree-switcher{
visibility: hidden;
}
}
a{
color: #333
}
.btn-http{
height: 23px;
font-size: 10px;
margin-right: 7px;
padding: 0 5px;
width:auto !important;
}
.interface-item{
display: inline-block;
overflow: hidden;
top: 0px;
line-height: 100%;
}
.interface-item-nav{
line-height:25px;
}
.ant-tree-node-content-wrapper{
width: 100%
}
.interface-delete-icon{
position: relative;
right: 21px;
// top: 2px;
float: right;
line-height: 25px;
width: 30px;
}
}
.left-menu{
min-height: 5rem;
// background: #FFF;
// .item-all-interface {
// background-color: red;
// }
// .ant-tabs-bar{
// border-bottom: none;
// margin-bottom: 0
// }
.ant-tabs-nav{
width:100%;
}
.ant-tabs-tab{
min-width: 50%;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab{
height: 39px;
// background: #fff;
border: 1px solid #d9d9d9;
border-bottom: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:nth-of-type(2) {
border-left: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab:last-of-type {
border-right: 0;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
height: 40px;
// background-color: #efefef;
// color:#021b2d;
font-weight: 500;
// margin-bottom: 0;
}
.right-content{
margin:3px;
min-height: 5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #FFF;
border-radius:5px;
.interface-content{
.ant-tabs-nav{
width:100%
}
.ant-tabs-nav-wrap{
text-align: left;
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container{
height: 40px;
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar{
text-align: center;
// background: #ececec;
}
.ant-tabs-nav-wrap{
height: 40px;
line-height: 31px;
// border-bottom: 1px solid #d9d9d9;
}
.ant-input {
width: 100%;
}
.interface-filter{
padding-top:7px;
padding-left: 10px;
padding-right: 50px;
height:45px;
line-height: 32px;
background-color: #efefef;
position: relative;
}
.btn-filter {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.interface-list{
.cat_switch_hidden{
.ant-tree-switcher{
visibility: hidden;
}
}
a{
color: #333
}
.btn-http{
height: 23px;
font-size: 10px;
margin-right: 7px;
padding: 0 5px;
width:auto !important;
}
.interface-item{
display: inline-block;
overflow: hidden;
top: 0px;
line-height: 100%;
}
.interface-item-nav{
line-height:25px;
}
.ant-tree-node-content-wrapper{
width: 100%
}
.interface-delete-icon{
position: relative;
right: 21px;
// top: 2px;
float: right;
line-height: 25px;
width: 30px;
}
}
}
.right-content{
margin:3px;
min-height: 5rem;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
background: #fff;
border-radius:5px;
.interface-content{
.ant-tabs-nav{
width:100%
}
.ant-tabs-nav-wrap{
text-align: left;
}
}
}

76
client/containers/Project/Setting/ProjectData/ProjectData.js
View File

@ -117,9 +117,9 @@ class ProjectData extends Component {
}
/**
*
*
* @returns
*
*
* @returns
* @memberof ProjectData
*/
render() {
@ -132,42 +132,44 @@ class ProjectData extends Component {
onChange: this.uploadChnange.bind(this)
}
return (
<div className="m-panel g-row" style={{ paddingTop: '15px' }}>
<div className="postman-dataImport">
<div className="dataImportCon">
<div ><h3>数据导入</h3></div>
<div className="dataImportTile">
<Select placeholder="请选择导入数据的方式" onChange={this.handleImportType}>
{Object.keys(importDataModule).map((name) => {
return <Option key={name} value={name}>{importDataModule[name].name}</Option>
})}
<div className="g-row">
<div className="m-panel" style={{ paddingTop: '15px' }}>
<div className="postman-dataImport">
<div className="dataImportCon">
<div ><h3>数据导入</h3></div>
<div className="dataImportTile">
<Select placeholder="请选择导入数据的方式" onChange={this.handleImportType}>
{Object.keys(importDataModule).map((name) => {
return <Option key={name} value={name}>{importDataModule[name].name}</Option>
})}
</Select>
</div>
<div className="catidSelect">
<Select
showSearch
style={{ width: '100%' }}
placeholder="请选择数据导入的接口分类"
optionFilterProp="children"
onChange={this.selectChange.bind(this)}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.state.menuList.map((item, key) => {
return <Option key={key} value={item._id + ""}>{item.name}</Option>;
})}
</Select>
</div>
<div className="catidSelect">
<Select
showSearch
style={{ width: '100%' }}
placeholder="请选择数据导入的接口分类"
optionFilterProp="children"
onChange={this.selectChange.bind(this)}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
{this.state.menuList.map((item, key) => {
return <Option key={key} value={item._id + ""}>{item.name}</Option>;
})}
</Select>
</div>
<div style={{ marginTop: 16, height: 180 }}>
<Dragger {...uploadMess}>
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
</p>
<p className="ant-upload-text">点击或者拖拽文件到上传区域</p>
<p className="ant-upload-hint">{this.state.curImportType ? importDataModule[this.state.curImportType].desc : null}</p>
</Dragger>
</Select>
</div>
<div style={{ marginTop: 16, height: 180 }}>
<Dragger {...uploadMess}>
<p className="ant-upload-drag-icon">
<Icon type="inbox" />
</p>
<p className="ant-upload-text">点击或者拖拽文件到上传区域</p>
<p className="ant-upload-hint">{this.state.curImportType ? importDataModule[this.state.curImportType].desc : null}</p>
</Dragger>
</div>
</div>
</div>
</div>
@ -176,4 +178,4 @@ class ProjectData extends Component {
}
}
export default ProjectData;
export default ProjectData;

74
client/containers/Project/Setting/ProjectMember/ProjectMember.js
View File

@ -50,7 +50,7 @@ class ProjectMember extends Component {
visible: false,
dataSource: [],
inputUid: 0,
inputRole: 'dev'
inputRole: 'dev'
}
}
static propTypes = {
@ -150,7 +150,7 @@ class ProjectMember extends Component {
})
}
async componentWillMount() {
async componentWillMount() {
await this.props.getProject(this.props.match.params.id)
const groupMemberList = await this.props.fetchGroupMemberList(this.props.projectMsg.group_id);
const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
@ -205,40 +205,42 @@ class ProjectMember extends Component {
}
}];
return (
<div className="m-panel g-row" style={{paddingTop: '15px'}}>
<Modal
title="添加成员"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">用户名: </div></Col>
<Col span="15">
<UsernameAutoComplete callbackState={this.onUserSelect} />
</Col>
</Row>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">权限: </div></Col>
<Col span="15">
<Select size="large" defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
<Option value="owner">组长</Option>
<Option value="dev">开发者</Option>
</Select>
</Col>
</Row>
</Modal>
<Table columns={columns} dataSource={this.state.projectMemberList} pagination={false} locale={{emptyText: <ErrMsg type="noMemberInProject"/>}} className="setting-project-member"/>
<Card title={this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'} noHovering className="setting-group">
{this.state.groupMemberList.length ? this.state.groupMemberList.map((item, index) => {
return (<div key={index} className="card-item">
<img src={location.protocol + '//' + location.host + '/api/user/avatar?uid=' + item.uid} className="item-img" />
<p className="item-name">{item.username}{item.uid === this.props.uid ? <Badge count={'我'} style={{ backgroundColor: '#689bd0', fontSize: '12px', marginLeft: '8px', borderRadius: '4px' }} /> : null}</p>
{item.role === 'owner' ? <p className="item-role">组长</p> : null}
{item.role === 'dev' ? <p className="item-role">开发者</p> : null}
</div>);
}): <ErrMsg type="noMemberInGroup"/>}
</Card>
<div className="g-row">
<div className="m-panel" style={{paddingTop: '15px'}}>
<Modal
title="添加成员"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">用户名: </div></Col>
<Col span="15">
<UsernameAutoComplete callbackState={this.onUserSelect} />
</Col>
</Row>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">权限: </div></Col>
<Col span="15">
<Select size="large" defaultValue="dev" className="select" onChange={this.changeNewMemberRole}>
<Option value="owner">组长</Option>
<Option value="dev">开发者</Option>
</Select>
</Col>
</Row>
</Modal>
<Table columns={columns} dataSource={this.state.projectMemberList} pagination={false} locale={{emptyText: <ErrMsg type="noMemberInProject"/>}} className="setting-project-member"/>
<Card title={this.state.groupName + ' 分组成员 ' + '(' + this.state.groupMemberList.length + ') 人'} noHovering className="setting-group">
{this.state.groupMemberList.length ? this.state.groupMemberList.map((item, index) => {
return (<div key={index} className="card-item">
<img src={location.protocol + '//' + location.host + '/api/user/avatar?uid=' + item.uid} className="item-img" />
<p className="item-name">{item.username}{item.uid === this.props.uid ? <Badge count={'我'} style={{ backgroundColor: '#689bd0', fontSize: '12px', marginLeft: '8px', borderRadius: '4px' }} /> : null}</p>
{item.role === 'owner' ? <p className="item-role">组长</p> : null}
{item.role === 'dev' ? <p className="item-role">开发者</p> : null}
</div>);
}): <ErrMsg type="noMemberInGroup"/>}
</Card>
</div>
</div>
)
}

7
client/containers/Project/Setting/Setting.js
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react'
import { Tabs } from 'antd';
import PropTypes from 'prop-types';
const TabPane = Tabs.TabPane;
import ProjectMessage from './ProjectMessage/ProjectMessage.js';
import './Setting.scss';
@ -14,10 +12,7 @@ class Setting extends Component {
const id = this.props.match.params.id;
return (
<div className="g-row">
<Tabs type="card" className="m-tab">
<TabPane tab="项目信息" key="1"><ProjectMessage projectId={+id}/></TabPane>
</Tabs>
<ProjectMessage projectId={+id}/>
</div>
)
}

6
client/styles/common.scss
View File

@ -13,7 +13,7 @@ html, body {
}
html {
// background-color: #202d3a;
// background-color: #32363a;
}
::selection {
@ -69,7 +69,6 @@ em {
// 布局容器 guitter: 16px
.g-row {
max-width: 12.08rem; // Col宽度 (1208+16)/24 = 51
min-width: 7.52rem; // Col宽度 (752+16)/24 = 32
margin: 0 auto;
padding: 0 .24rem;
@ -96,9 +95,6 @@ em {
.pannel-without-tab {
min-height: 5rem;
}
.ant-tabs-tabpane .m-panel {
border-top-left-radius: 0px;
}
@media (max-width: 768px) {
html {

2
client/styles/mixin.scss
View File

@ -4,7 +4,7 @@ $color-blue: #2395f1;
$color-blue-deeper: #34495E;
$color-grey-deep: #929aac;
$color-black-light: #404040;
$color-bg-dark: #202d3a; // 背景色 - header 用的深蓝色
$color-bg-dark: #32363a; // 背景色 - header 用的深蓝色
$box-shadow-panel: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
@mixin row-width-limit {

10
client/styles/theme.less
View File

@ -150,11 +150,13 @@
// Layout
// @layout-body-background : #ececec;
@layout-header-background : #202d3a;
@layout-header-background : #32363a;
@layout-header-height : 56px;
@layout-header-padding : 0 0;
// @layout-footer-padding : 24px 50px;
// @layout-sider-background : @layout-header-background;
// 侧栏背景颜色
@layout-sider-background : #fff;
// @layout-trigger-height : 48px;
// @layout-trigger-background : tint(@heading-color, 20%);
// @layout-trigger-color : #fff;
@ -242,6 +244,12 @@
@menu-dark-bg: @layout-header-background;
@menu-dark-submenu-bg: #333;
@menu-collapsed-width: 64px;
// .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
// background-color: rgba(35,149,241, .15);
// }
// .ant-menu-item:active, .ant-menu-submenu-title:active {
// background-color: rgba(35,149,241, .15);
// }
// Spin
// ---