mirror of
https://github.com/YMFE/yapi.git
synced 2025-04-24 15:30:44 +08:00
feat: 分离项目配置与环境配置
This commit is contained in:
wenbo.dong
parent
fb8d41e646
commit
10649924cd
client
@ -1,5 +1,5 @@
|
||||
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 { updateProject, delProject, getProjectMsg, upsetProject } from '../../../../reducer/modules/project';
|
||||
import { fetchGroupMsg } from '../../../../reducer/modules/group';
|
||||
@ -14,6 +14,7 @@ import constants from '../../../../constants/variable.js';
|
||||
const confirm = Modal.confirm;
|
||||
import { nameLengthLimit } from '../../../../common';
|
||||
import '../Setting.scss';
|
||||
const TabPane = Tabs.TabPane;
|
||||
// layout
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
@ -317,148 +318,157 @@ class ProjectMessage extends Component {
|
||||
})}
|
||||
</RadioGroup>);
|
||||
return (
|
||||
<div className="m-panel">
|
||||
<Row className="project-setting">
|
||||
<Col xs={6} lg={{offset: 1, span: 3}} className="setting-logo">
|
||||
<Popover placement="bottom" title={colorSelector} content={iconSelector} trigger="click" overlayClassName="change-project-container">
|
||||
<Icon type={projectMsg.icon || 'star-o'} className="ui-logo" style={{ backgroundColor: constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue }} />
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col xs={18} sm={15} lg={19} className="setting-intro">
|
||||
<h2 className="ui-title">{this.state.currGroup + ' / ' + projectMsg.name}</h2>
|
||||
{/* <p className="ui-desc">{projectMsg.desc}</p> */}
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="breakline" />
|
||||
<Form>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="项目ID"
|
||||
>
|
||||
<span >{this.props.projectMsg._id}</span>
|
||||
<div>
|
||||
<Tabs type="card" className="has-affix-footer">
|
||||
<TabPane tab="项目配置" key="1">
|
||||
<div className="m-panel">
|
||||
<Row className="project-setting">
|
||||
<Col xs={6} lg={{offset: 1, span: 3}} className="setting-logo">
|
||||
<Popover placement="bottom" title={colorSelector} content={iconSelector} trigger="click" overlayClassName="change-project-container">
|
||||
<Icon type={projectMsg.icon || 'star-o'} className="ui-logo" style={{ backgroundColor: constants.PROJECT_COLOR[projectMsg.color] || constants.PROJECT_COLOR.blue }} />
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col xs={18} sm={15} lg={19} className="setting-intro">
|
||||
<h2 className="ui-title">{this.state.currGroup + ' / ' + projectMsg.name}</h2>
|
||||
{/* <p className="ui-desc">{projectMsg.desc}</p> */}
|
||||
</Col>
|
||||
</Row>
|
||||
<hr className="breakline" />
|
||||
<Form>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="项目ID"
|
||||
>
|
||||
<span >{this.props.projectMsg._id}</span>
|
||||
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="项目名称"
|
||||
>
|
||||
{getFieldDecorator('name', {
|
||||
initialValue: initFormValues.name,
|
||||
rules: nameLengthLimit('项目')
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="项目名称"
|
||||
>
|
||||
{getFieldDecorator('name', {
|
||||
initialValue: initFormValues.name,
|
||||
rules: nameLengthLimit('项目')
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="所属分组"
|
||||
>
|
||||
<Input value={this.state.currGroup} disabled={true} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="所属分组"
|
||||
>
|
||||
<Input value={this.state.currGroup} disabled={true} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
接口基本路径
|
||||
<Tooltip title="基本路径为空表示根路径">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
{getFieldDecorator('basepath', {
|
||||
initialValue: initFormValues.basepath,
|
||||
rules: [{
|
||||
required: false, message: '请输入基本路径! '
|
||||
}]
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
接口基本路径
|
||||
<Tooltip title="基本路径为空表示根路径">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
{getFieldDecorator('basepath', {
|
||||
initialValue: initFormValues.basepath,
|
||||
rules: [{
|
||||
required: false, message: '请输入基本路径! '
|
||||
}]
|
||||
})(
|
||||
<Input />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
MOCK地址
|
||||
<Tooltip title="具体使用方法请查看文档">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label={(
|
||||
<span>
|
||||
MOCK地址
|
||||
<Tooltip title="具体使用方法请查看文档">
|
||||
<Icon type="question-circle-o" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
|
||||
<Input disabled value={mockUrl} onChange={()=>{}} />
|
||||
<Input disabled value={mockUrl} onChange={()=>{}} />
|
||||
|
||||
</FormItem>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="描述"
|
||||
>
|
||||
{getFieldDecorator('desc', {
|
||||
initialValue: initFormValues.desc,
|
||||
rules: [{
|
||||
required: false
|
||||
}]
|
||||
})(
|
||||
<TextArea rows={8} />
|
||||
)}
|
||||
</FormItem>
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="描述"
|
||||
>
|
||||
{getFieldDecorator('desc', {
|
||||
initialValue: initFormValues.desc,
|
||||
rules: [{
|
||||
required: false
|
||||
}]
|
||||
})(
|
||||
<TextArea rows={8} />
|
||||
)}
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
{...formItemLayout}
|
||||
label="环境配置"
|
||||
>
|
||||
{envSettingItems}
|
||||
<Button type="default" onClick={this.add} style={{ width: '50%' }}>
|
||||
<Icon type="plus" /> 添加环境配置
|
||||
</Button>
|
||||
</FormItem>
|
||||
<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>
|
||||
|
||||
<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}>
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -169,34 +169,25 @@
|
||||
}
|
||||
.btnwrap-changeproject {
|
||||
text-align: center;
|
||||
padding: .24rem 0;
|
||||
margin: 0 -.24rem;
|
||||
padding: .16rem 0;
|
||||
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;
|
||||
.btn-save {
|
||||
background-color: #32325d;
|
||||
font-size: .15rem;
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
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);
|
||||
transform: translateY(0);
|
||||
transition: all .2s;
|
||||
&:focus {
|
||||
background-color: #43458b;
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
background-color: #43458b;
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
background-color: #32325d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,3 +147,8 @@ em {
|
||||
.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active{
|
||||
border: none;
|
||||
}
|
||||
|
||||
// 页面级底部固定 需要添加padding以保证页面底部不被覆盖
|
||||
.has-affix-footer {
|
||||
padding-bottom: .92rem;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user