feat: 修改项目头像布局

client/components/ProjectCard/ProjectCard.js

@@ -1,6 +1,6 @@
 import './ProjectCard.scss';
 import React, { Component } from 'react';
-import { Card, Icon, Tooltip, message } from 'antd';
+import { Card, Icon, Tooltip } from 'antd';
 import { connect } from 'react-redux'
 import { delFollow, addFollow } from  '../../reducer/modules/follow';
 // import { Link } from 'react-router-dom';
@@ -42,7 +42,7 @@ class ProjectCard extends Component {
     this.props.delFollow(id).then((res) => {
       if (res.payload.data.errcode === 0) {
         this.props.callbackResult();
-        message.success('已取消关注！');
+        // message.success('已取消关注！');  // 星号已做出反馈 无需重复提醒用户
       }
     });
   }
@@ -53,30 +53,24 @@ class ProjectCard extends Component {
       uid,
       projectid: projectData._id,
       projectname: projectData.name,
-      icon: 'star',
-      color: '#2395f1'
+      icon: projectData.icon,
+      color: projectData.color
     }
     this.props.addFollow(param).then((res) => {
       console.log(res);
       if (res.payload.data.errcode === 0) {
         this.props.callbackResult();
-        message.success('已添加关注！');
+        // message.success('已添加关注！');  // 星号已做出反馈 无需重复提醒用户
       }
     });
   }
-  // <Link to={`/project/${projectData._id}`} className="card-link">
-  //
-  // </Link>
 
-  // <Popconfirm placement="leftBottom" title={<Icon type="up" />} onConfirm={confirm} okText="确认" cancelText="取消">
-  //   <Icon type="star-o" className="icon" onClick={this.clickHandle}/>
-  // </Popconfirm>
   render() {
     const { projectData, inFollowPage } = this.props;
     return (
       <div className="card-container">
         <Card bordered={false} className="m-card" onClick={() => this.props.history.push('/project/' + projectData._id)}>
-          <Icon type="area-chart" className="ui-logo" />
+          <Icon type={projectData.icon || 'star-o'} className="ui-logo" style={{backgroundColor: projectData.color || '#2395f1'}} />
           <h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
         </Card>
         <div className="card-btns" onClick={projectData.follow || inFollowPage ? this.del : this.add}>

client/containers/Group/ProjectList/ProjectList.js

@@ -104,7 +104,6 @@ class ProjectList extends Component {
   }
 
   render() {
-    console.log(this.props);
     const projectData = this.state.projectData;
     return (
       <div className="m-panel card-panel card-panel-s">

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 } from 'antd';
+import { Form, Input, Icon, Tooltip, Select, Button, Row, Col, message, Card, Radio, Alert, Modal, Popover } from 'antd';
 import PropTypes from 'prop-types';
 import { updateProject, delProject, getProjectMsg } from '../../../../reducer/modules/project';
 import { fetchGroupMsg } from '../../../../reducer/modules/group';
@@ -176,12 +176,13 @@ class ProjectMessage extends Component {
     const groupMsg = await this.props.fetchGroupMsg(this.props.projectMsg.group_id);
     this.setState({
       currGroup: groupMsg.payload.data.data.group_name
-    })
+    });
   }
 
   render () {
     const { getFieldDecorator, getFieldValue } = this.props.form;
     const { projectMsg } = this.props;
+    console.log(projectMsg);
     let initFormValues = {};
     let envMessage = [];
     const { name, basepath, desc, env, project_type } = projectMsg;
@@ -289,8 +290,27 @@ class ProjectMessage extends Component {
         </Row>
       );
     });
+
+    const colorSelector = (<RadioGroup onChange={this.onChange} value={1}>
+      <Radio value={1} style={{color: 'red'}}></Radio>
+      <Radio value={2}></Radio>
+      <Radio value={3}></Radio>
+      <Radio value={4}></Radio>
+    </RadioGroup>);
     return (
       <div className="m-panel">
+        <Row className="project-setting">
+          <Col sm={6} lg={3} className="setting-logo">
+            <Popover placement="bottom" title={colorSelector} content={'content'} trigger="click">
+              <Icon type={projectMsg.icon || 'star-o'} className="ui-logo" style={{backgroundColor: projectMsg.color || '#2395f1'}} />
+            </Popover>
+          </Col>
+          <Col sm={18} lg={21} className="setting-intro">
+            <h2 className="ui-title">{projectMsg.group_name + ' / ' + projectMsg.name}</h2>
+            <p className="ui-desc">{projectMsg.desc}</p>
+          </Col>
+        </Row>
+        <hr className="breakline" />
         <Form>
           <FormItem
             {...formItemLayout}
@@ -350,7 +370,7 @@ class ProjectMessage extends Component {
 
           <FormItem
             {...formItemLayout}
-            label="所属分组"
+            label="环境配置"
           >
             {envSettingItems}
           </FormItem>

client/containers/Project/Setting/Setting.scss

@@ -57,3 +57,36 @@
     border-top: 1px solid #eee;
   }
 }
+
+.project-setting {
+  .setting-logo {
+    text-align: right;
+    padding: .24rem;
+    cursor: pointer;
+  }
+  .setting-intro {
+    padding: .24rem;
+    height: 1.48rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .ui-title {
+      font-size: .32rem;
+      font-weight: normal;
+      width: 100%;
+    }
+    .ui-desc {
+      font-size: .16rem;
+    }
+  }
+  .ui-logo {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    font-size: .6rem;
+    color: #fff;
+    background-color: #2395f1;
+    line-height: 1rem;
+    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+  }
+}