Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

2024-12-15 05:10:47 +08:00 · 2017-09-21 17:04:06 +08:00 · 2017-09-21 17:04:06 +08:00 · dfb105527b
commit dfb105527b
parent fa9902991b 1fd34320ce
6 changed files with 163 additions and 162 deletions
--- a/client/Application.js
+++ b/client/Application.js
@ -5,7 +5,7 @@ import { Route, BrowserRouter as Router } from 'react-router-dom';
 import { Home, Group, Project, Follows, AddProject, Login } from './containers/index';
 import User from './containers/User/User.js';
 import Header from './components/Header/Header';
-// import Footer from './components/Footer/Footer';
+import Footer from './components/Footer/Footer';
 import Loading from './components/Loading/Loading';
 import { checkLoginState } from './reducer/modules/user';
 import { requireAuthentication } from './components/AuthenticatedComponent';
@ -61,6 +61,7 @@ export default class App extends Component {
                <Route path="/login" component={Login} />
              </div>
            </div>
+            <Footer/>
          </div>
        </Router>

--- a/client/containers/Group/Group.js
+++ b/client/containers/Group/Group.js
@ -4,7 +4,7 @@ import ProjectList from './ProjectList/ProjectList.js';
 import MemberList from './MemberList/MemberList.js';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { Tabs, Layout } from 'antd';
-const { Content, Footer, Sider } = Layout;
+const { Content, Sider } = Layout;
 const TabPane = Tabs.TabPane;

 import './Group.scss';
@ -29,9 +29,6 @@ export default class Group extends Component {
              <TabPane tab="成员列表" key="2"><MemberList/></TabPane>
            </Tabs>
          </Content>
-          <Footer style={{ textAlign: 'center' }}>
-            © 2017 YMFE 京ICP备17044220号
-          </Footer>
        </Layout>
      </Layout>
    )
--- a/client/containers/Project/Interface/Interface.js
+++ b/client/containers/Project/Interface/Interface.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Tabs, Layout } from 'antd';
 import { Route, Switch, matchPath } from 'react-router-dom';
 import { connect } from 'react-redux';
-const { Content, Footer, Sider } = Layout;
+const { Content, Sider } = Layout;

 import './interface.scss'

@ -104,9 +104,6 @@ class Interface extends Component {
              </Switch>
            </div>
          </Content>
-          <Footer style={{ textAlign: 'center' }}>
-            © 2017 YMFE 京ICP备17044220号
-          </Footer>
        </Layout>
      </Layout>)
  }
--- a/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
+++ b/client/containers/Project/Setting/ProjectMessage/ProjectMessage.js
@ -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>
-                接口基本路径&nbsp;
-                <Tooltip title="基本路径为空表示根路径">
-                  <Icon type="question-circle-o" />
-                </Tooltip>
-              </span>
-            )}
-          >
-            {getFieldDecorator('basepath', {
-              initialValue: initFormValues.basepath,
-              rules: [{
-                required: false, message: '请输入基本路径! '
-              }]
-            })(
-              <Input />
-              )}
-          </FormItem>
+                <FormItem
+                  {...formItemLayout}
+                  label={(
+                    <span>
+                      接口基本路径&nbsp;
+                      <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地址&nbsp;
-                <Tooltip title="具体使用方法请查看文档">
-                  <Icon type="question-circle-o" />
-                </Tooltip>
-              </span>
-            )}
-          >
+                <FormItem
+                  {...formItemLayout}
+                  label={(
+                    <span>
+                      MOCK地址&nbsp;
+                      <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>
    )
  }
--- a/client/containers/Project/Setting/Setting.scss
+++ b/client/containers/Project/Setting/Setting.scss
@ -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;
    }
  }
 }
--- a/client/styles/common.scss
+++ b/client/styles/common.scss
@ -69,17 +69,17 @@ em {
 }
 // 页面最外层元素 样式
 .router-main {
-  // padding-bottom: .24rem;
-  // min-height: 100%;
-  // height: auto !important;
-  // height: 100%;
-  // margin-bottom: -2.4rem;
+  padding-bottom: .24rem;
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin-bottom: -2.4rem;
  background-color: #ececec;
-  // &::after {
-  //   content: '';
-  //   display: block;
-  //   height: 2.4rem;
-  // }
+  &::after {
+    content: '';
+    display: block;
+    height: 2.4rem;
+  }
 }

 .hidden {
@ -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;
+}