opti: 设置页布局调整

client/components/ErrMsg/ErrMsg.js

@@ -46,6 +46,10 @@ class ErrMsg extends Component {
           title = '你还没有关注项目呢';
           desc = <span>先去 <a onClick={() => this.props.history.push('/group')}>“项目广场”</a> 逛逛吧, 那里可以添加关注。</span>;
           break;
+        case 'noInterface':
+          title = '该项目还没有接口呢';
+          desc = '在左侧 “接口列表” 中添加接口';
+          break;
         case 'noMemberInProject':
           title = '该项目还没有成员呢';
           break;

client/components/ProjectCard/ProjectCard.js

@@ -54,8 +54,8 @@ class ProjectCard extends Component {
       uid,
       projectid: projectData._id,
       projectname: projectData.name,
-      icon: projectData.icon,
-      color: projectData.color
+      icon: projectData.icon || constants.PROJECT_ICON[0],
+      color: projectData.color || constants.PROJECT_COLOR.blue
     }
     this.props.addFollow(param).then((res) => {
       if (res.payload.data.errcode === 0) {

client/containers/Project/Setting/ProjectMember/ProjectMember.js

@@ -215,7 +215,7 @@ class ProjectMember extends Component {
             </Col>
           </Row>
         </Modal>
-        <Table columns={columns} dataSource={this.state.projectMemberList} pagination={false} locale={{emptyText: <ErrMsg type="noMemberInProject"/>}} />
+        <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">

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 } from 'antd';
+import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card, Radio, Alert, Modal, Popover, Affix } from 'antd';
 import PropTypes from 'prop-types';
 import { updateProject, delProject, getProjectMsg, upsetProject } from '../../../../reducer/modules/project';
 import { fetchGroupMsg } from '../../../../reducer/modules/group';
@@ -214,7 +214,7 @@ class ProjectMessage extends Component {
       const secondIndex = 'next' + index; // 为保证key的唯一性
       return (
         <Row key={index} type="flex" justify="space-between" align={index === 0 ? 'middle' : 'top'}>
-          <Col span={10} offset={2}>
+          <Col span={11}>
             <FormItem
               label={index === 0 ? (
                 <span>环境名称</span>) : ''}
@@ -248,7 +248,7 @@ class ProjectMessage extends Component {
                 )}
             </FormItem>
           </Col>
-          <Col span={10}>
+          <Col span={11}>
             <FormItem
               label={index === 0 ? (
                 <span>环境域名</span>) : ''}
@@ -395,16 +395,11 @@ class ProjectMessage extends Component {
             label="环境配置"
           >
             {envSettingItems}
+            <Button type="default" onClick={this.add} style={{ width: '50%' }}>
+              <Icon type="plus" /> 添加环境配置
+            </Button>
           </FormItem>
 
-          <Row>
-            <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
-              <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
-                <Icon type="plus" /> 添加环境配置
-              </Button>
-            </Col>
-          </Row>
-
           <FormItem
             {...formItemLayout}
             label="权限"
@@ -427,19 +422,16 @@ class ProjectMessage extends Component {
             )}
           </FormItem>
         </Form>
-        <Row>
-          <Col sm={{ offset: 6 }} lg={{ offset: 3 }}>
-            <Button className="m-btn" icon="save" type="primary"
-              onClick={this.handleOk}
-              >保存</Button>
-          </Col>
-        </Row>
-
-        <hr className="breakline" />
+        <Affix offsetBottom={0}>
+          <div className="btnwrap-changeproject">
+            <Button className="m-btn btn-save" icon="save" type="primary" onClick={this.handleOk} >保 存</Button>
+          </div>
+        </Affix>
 
         <FormItem
           {...formItemLayout}
           label="危险操作"
+          className="danger-container"
         >
           <Card noHovering={true} className="card-danger">
             <div className="card-danger-content">

client/containers/Project/Setting/Setting.scss

@@ -14,6 +14,7 @@
   .ant-card-body {
     display: flex;
     align-items: center;
+    padding: .24rem !important;
   }
   .card-danger-content {
     flex: 1;
@@ -24,7 +25,14 @@
   }
 }
 
+.setting-project-member {
+  border: 1px solid #e9e9e9;
+  border-radius: 2px;
+}
+
 .setting-group {
+  margin-top: .48rem;
+  border-radius: 2px;
   .ant-card-head {
     background-color: #eee;
   }
@@ -150,3 +158,40 @@
     }
   }
 }
+
+.danger-container {
+  margin-top: .48rem;
+}
+.btnwrap-changeproject {
+  text-align: center;
+  padding: .24rem 0;
+  margin: 0 -.24rem;
+  background: #fff;
+  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;
+    }
+  }
+}

client/styles/theme.less

@@ -174,6 +174,10 @@
 @label-required-color        : @highlight-color;
 @label-color                 : @heading-color;
 @form-item-margin-bottom     : 24px;
+// 处理添加环境配置下边距重合的 bug
+.ant-form-item > .ant-form-item, .ant-form-item :not(.ant-form) > .ant-form-item {
+  margin-bottom: 16px;
+}
 @form-item-trailing-colon    : true;
 
 // Input
@@ -250,11 +254,11 @@
 
 // Table
 // --
-@table-header-bg: @background-color-base;
+@table-header-bg: #eee;
 @table-header-sort-bg: @background-color-active;
 @table-row-hover-bg: @primary-1;
 @table-selected-row-bg: #fafafa;
-@table-padding-vertical: 16px + 2px;
+@table-padding-vertical: 16px;
 @table-padding-horizontal: 8px + 2px;
 
 // Tag