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

feat: 分离项目配置与环境配置

Browse Source
This commit is contained in:
wenbo.dong 2017-09-21 12:44:10 +08:00
parent fb8d41e646
commit 10649924cd
3 changed files with 149 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card, Radio, Alert, Modal, Popover, Affix } from 'antd'; import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card, Radio, Alert, Modal, Popover, Tabs, Affix } from 'antd';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { updateProject, delProject, getProjectMsg, upsetProject } from '../../../../reducer/modules/project'; import { updateProject, delProject, getProjectMsg, upsetProject } from '../../../../reducer/modules/project';
import { fetchGroupMsg } from '../../../../reducer/modules/group'; import { fetchGroupMsg } from '../../../../reducer/modules/group';
@ -14,6 +14,7 @@ import constants from '../../../../constants/variable.js';
const confirm = Modal.confirm; const confirm = Modal.confirm;
import { nameLengthLimit } from '../../../../common'; import { nameLengthLimit } from '../../../../common';
import '../Setting.scss'; import '../Setting.scss';
const TabPane = Tabs.TabPane;
// layout // layout
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
@ -317,148 +318,157 @@ class ProjectMessage extends Component {
})} })}
</RadioGroup>); </RadioGroup>);
return ( return (
<div className="m-panel"> <div>
<Row className="project-setting"> <Tabs type="card" className="has-affix-footer">
<Col xs={6} lg={{offset: 1, span: 3}} className="setting-logo"> <TabPane tab="项目配置" key="1">
<Popover placement="bottom" title={colorSelector} content={iconSelector} trigger="click" overlayClassName="change-project-container"> <div className="m-panel">
<Icon type={projectMsg.icon || 'star-o'} className="ui-logo" style={{ backgroundColor: constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue }} /> <Row className="project-setting">
</Popover> <Col xs={6} lg={{offset: 1, span: 3}} className="setting-logo">
</Col> <Popover placement="bottom" title={colorSelector} content={iconSelector} trigger="click" overlayClassName="change-project-container">
<Col xs={18} sm={15} lg={19} className="setting-intro"> <Icon type={projectMsg.icon || 'star-o'} className="ui-logo" style={{ backgroundColor: constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue }} />
<h2 className="ui-title">{this.state.currGroup + ' / ' + projectMsg.name}</h2> </Popover>
{/* <p className="ui-desc">{projectMsg.desc}</p> */} </Col>
</Col> <Col xs={18} sm={15} lg={19} className="setting-intro">
</Row> <h2 className="ui-title">{this.state.currGroup + ' / ' + projectMsg.name}</h2>
<hr className="breakline" /> {/* <p className="ui-desc">{projectMsg.desc}</p> */}
<Form> </Col>
<FormItem </Row>
{...formItemLayout} <hr className="breakline" />
label="项目ID" <Form>
> <FormItem
<span >{this.props.projectMsg._id}</span> {...formItemLayout}
label="项目ID"
>
<span >{this.props.projectMsg._id}</span>
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label="项目名称" label="项目名称"
> >
{getFieldDecorator('name', { {getFieldDecorator('name', {
initialValue: initFormValues.name, initialValue: initFormValues.name,
rules: nameLengthLimit('项目') rules: nameLengthLimit('项目')
})( })(
<Input /> <Input />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label="所属分组" label="所属分组"
> >
<Input value={this.state.currGroup} disabled={true} /> <Input value={this.state.currGroup} disabled={true} />
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={( label={(
<span> <span>
接口基本路径&nbsp; 接口基本路径&nbsp;
<Tooltip title="基本路径为空表示根路径"> <Tooltip title="基本路径为空表示根路径">
<Icon type="question-circle-o" /> <Icon type="question-circle-o" />
</Tooltip> </Tooltip>
</span> </span>
)} )}
> >
{getFieldDecorator('basepath', { {getFieldDecorator('basepath', {
initialValue: initFormValues.basepath, initialValue: initFormValues.basepath,
rules: [{ rules: [{
required: false, message: '请输入基本路径! ' required: false, message: '请输入基本路径! '
}] }]
})( })(
<Input /> <Input />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label={( label={(
<span> <span>
MOCK地址&nbsp; MOCK地址&nbsp;
<Tooltip title="具体使用方法请查看文档"> <Tooltip title="具体使用方法请查看文档">
<Icon type="question-circle-o" /> <Icon type="question-circle-o" />
</Tooltip> </Tooltip>
</span> </span>
)} )}
> >
<Input disabled value={mockUrl} onChange={()=>{}} /> <Input disabled value={mockUrl} onChange={()=>{}} />
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label="描述" label="描述"
> >
{getFieldDecorator('desc', { {getFieldDecorator('desc', {
initialValue: initFormValues.desc, initialValue: initFormValues.desc,
rules: [{ rules: [{
required: false required: false
}] }]
})( })(
<TextArea rows={8} /> <TextArea rows={8} />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
{...formItemLayout} {...formItemLayout}
label="环境配置" label="权限"
> >
{envSettingItems} {getFieldDecorator('project_type', {
<Button type="default" onClick={this.add} style={{ width: '50%' }}> rules: [{
<Icon type="plus" /> 添加环境配置 required: true
</Button> }],
</FormItem> initialValue: initFormValues.project_type
})(
<RadioGroup>
<Radio value="private" className="radio">
<Icon type="lock" />私有<br /><span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
</Radio>
<br />
<Radio value="public" className="radio">
<Icon type="unlock" />公开<br /><span className="radio-desc">任何人都可以索引并查看项目信息</span>
</Radio>
</RadioGroup>
)}
</FormItem>
</Form>
<FormItem
{...formItemLayout}
label="危险操作"
className="danger-container"
>
<Card noHovering={true} className="card-danger">
<div className="card-danger-content">
<h3>删除项目</h3>
<p>项目一旦删除，将无法恢复数据，请慎重操作！</p>
</div>
<Button type="danger" ghost className="card-danger-btn" onClick={this.showConfirm}>删除</Button>
</Card>
</FormItem>
</div>
</TabPane>
<TabPane tab="环境配置" key="2">
<div className="m-panel">
<FormItem
{...formItemLayout}
>
{envSettingItems}
<Button type="default" onClick={this.add} style={{ width: '50%' }}>
<Icon type="plus" /> 添加环境配置
</Button>
</FormItem>
</div>
</TabPane>
</Tabs>
<FormItem
{...formItemLayout}
label="权限"
>
{getFieldDecorator('project_type', {
rules: [{
required: true
}],
initialValue: initFormValues.project_type
})(
<RadioGroup>
<Radio value="private" className="radio">
<Icon type="lock" />私有<br /><span className="radio-desc">只有组长和项目开发者可以索引并查看项目信息</span>
</Radio>
<br />
<Radio value="public" className="radio">
<Icon type="unlock" />公开<br /><span className="radio-desc">任何人都可以索引并查看项目信息</span>
</Radio>
</RadioGroup>
)}
</FormItem>
</Form>
<Affix offsetBottom={0}> <Affix offsetBottom={0}>
<div className="btnwrap-changeproject"> <div className="btnwrap-changeproject">
<Button className="m-btn btn-save" icon="save" type="primary" onClick={this.handleOk} >保 存</Button> <Button className="m-btn btn-save" icon="save" type="primary" size="large" onClick={this.handleOk} >保 存</Button>
</div> </div>
</Affix> </Affix>
<FormItem
{...formItemLayout}
label="危险操作"
className="danger-container"
>
<Card noHovering={true} className="card-danger">
<div className="card-danger-content">
<h3>删除项目</h3>
<p>项目一旦删除，将无法恢复数据，请慎重操作！</p>
</div>
<Button type="danger" ghost className="card-danger-btn" onClick={this.showConfirm}>删除</Button>
</Card>
</FormItem>
</div> </div>
) )
} }

17
client/containers/Project/Setting/Setting.scss
View File

@ -169,34 +169,25 @@
} }
.btnwrap-changeproject { .btnwrap-changeproject {
text-align: center; text-align: center;
padding: .24rem 0; padding: .16rem 0;
margin: 0 -.24rem;
background: #fff; background: #fff;
background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 0),linear-gradient(45deg, transparent 75%, #d9d9d9 0); background-color: #fff;
margin: 0 -.4rem;
// background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 0),linear-gradient(45deg, transparent 75%, #d9d9d9 0);
background-size: 4px 4px; background-size: 4px 4px;
.btn-save { .btn-save {
background-color: #32325d;
font-size: .15rem; font-size: .15rem;
font-weight: 200; font-weight: 200;
letter-spacing: 1px; letter-spacing: 1px;
border: none; border: none;
line-height: .4rem;
height: .4rem;
padding: 0 .24rem;
margin-right: .24rem;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
transform: translateY(0); transform: translateY(0);
transition: all .2s; transition: all .2s;
&:focus {
background-color: #43458b;
}
&:hover { &:hover {
transform: translateY(-1px); transform: translateY(-1px);
background-color: #43458b;
} }
&:active { &:active {
transform: translateY(1px); transform: translateY(1px);
background-color: #32325d;
} }
} }
} }

5
client/styles/common.scss
View File

@ -147,3 +147,8 @@ em {
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{ .ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
border: none; border: none;
} }
// 页面级底部固定 需要添加padding以保证页面底部不被覆盖
.has-affix-footer {
padding-bottom: .92rem;
}