Merge branch 'master' of https://github.com/ant-design/test2

src/components/Charts/Radar/index.js

@@ -53,9 +53,11 @@ class Radar extends PureComponent {
       hasLegend = true,
       fit = true,
       tickCount = 4,
-      margin = [16, 30, 16, 30] } = this.props;
+      margin = [24, 30, 16, 30] } = this.props;
 
-    const colors = ['#1890FF', '#FACC14', '#2FC25B'];
+    const colors = [
+      '#1890FF', '#FACC14', '#2FC25B', '#8543E0', '#F04864', '#13C2C2', '#fa8c16', '#a0d911',
+    ];
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -87,16 +89,40 @@ class Radar extends PureComponent {
 
     chart.axis('label', {
       line: null,
+      labelOffset: 8,
+      labels: {
+        label: {
+          fill: 'rgba(0, 0, 0, .65)',
+        },
+      },
+      grid: {
+        line: {
+          stroke: '#e9e9e9',
+          lineWidth: 1,
+          lineDash: [0, 0],
+        },
+      },
     });
 
     chart.axis('value', {
       grid: {
         type: 'polygon',
+        line: {
+          stroke: '#e9e9e9',
+          lineWidth: 1,
+          lineDash: [0, 0],
+        },
+      },
+      labels: {
+        label: {
+          fill: 'rgba(0, 0, 0, .65)',
+        },
       },
     });
 
     chart.line().position('label*value').color('name', colors);
-    chart.point().position('label*value').color('name', colors).shape('circle');
+    chart.point().position('label*value').color('name', colors).shape('circle')
+      .size(3);
 
     chart.render();
 
@@ -129,7 +155,7 @@ class Radar extends PureComponent {
     return (
       <div className={styles.radar} style={{ height }}>
         <div>
-          { title && <h4>{title}</h4>}
+          {title && <h4>{title}</h4>}
           <div ref={this.handleRef} />
           {
             hasLegend && (
@@ -147,9 +173,6 @@ class Radar extends PureComponent {
                           <span>{item.name}</span>
                         </p>
                         <h6>{item.value}</h6>
-                        {
-                          i !== (legendData.length - 1) && <div className={styles.split} />
-                        }
                       </div>
                     </Col>
                   ))

src/components/Charts/Radar/index.less

@@ -7,33 +7,37 @@
     .legendItem {
       position: relative;
       text-align: center;
-      p {
       cursor: pointer;
-      }
+      color: @text-color-secondary;
+      line-height: 22px;
       h6 {
         color: @heading-color;
         padding-left: 16px;
         font-size: 24px;
         line-height: 32px;
-        margin-top: 2px;
+        margin-top: 4px;
       }
-      .split {
+      &:after {
         background-color: @border-color-split;
         position: absolute;
         top: 8px;
         right: 0;
         height: 40px;
         width: 1px;
+        content: '';
+      }
     }
+    > :last-child .legendItem:after {
+      display: none;
     }
     .dot {
-      border-radius: 8px;
+      border-radius: 6px;
       display: inline-block;
-      margin-right: 8px;
+      margin-right: 6px;
       position: relative;
       top: -1px;
-      height: 8px;
-      width: 8px;
+      height: 6px;
+      width: 6px;
     }
   }
 }

src/components/EditableLinkGroup/index.js

 import React, { PureComponent, createElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from 'antd';
+import { Button } from 'antd';
 import styles from './index.less';
 
 // TODO: 添加逻辑
@@ -32,8 +32,8 @@ class EditableLinkGroup extends PureComponent {
           ))
         }
         {
-          <Button size="small" onClick={onAdd}>
-            <Icon type="plus" />添加
+          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
+            添加
           </Button>
         }
       </div>

src/components/EditableLinkGroup/index.less

@@ -8,23 +8,9 @@
     display: inline-block;
     font-size: @font-size-base;
     margin-bottom: 13px;
-    margin-right: 32px;
+    width: 25%;
     &:hover {
       color: @primary-color;
     }
   }
-  & > button {
-    border-color: @primary-color;
-    color: @primary-color;
-    padding-left: 12px;
-    padding-right: 12px;
-    i {
-      position: relative;
-      top: -1px;
-    }
-    span {
-      position: relative;
-      top: -1px;
-    }
-  }
 }

src/routes/Dashboard/Workplace.js

@@ -106,7 +106,7 @@ export default class Workplace extends PureComponent {
     const pageHeaderContent = (
       <div className={styles.pageHeaderContent}>
         <div className={styles.avatar}>
-          <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
+          <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/TmNVmrOsXeZwnvvZMNmo.png" />
         </div>
         <div className={styles.content}>
           <p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</p>
@@ -120,12 +120,10 @@ export default class Workplace extends PureComponent {
         <div>
           <p>项目数</p>
           <p>56</p>
-          <em />
         </div>
         <div>
           <p>团队内排名</p>
           <p>8<span> / 24</span></p>
-          <em />
         </div>
         <div>
           <p>项目访问</p>
@@ -156,18 +154,20 @@ export default class Workplace extends PureComponent {
                     <Card bodyStyle={{ padding: 0 }} bordered={false}>
                       <Card.Meta
                         title={(
-                          <span className={styles.cardTitle}>
+                          <div className={styles.cardTitle}>
                             <Avatar size="small" src={item.logo} />
                             <Link to={item.href}>{item.title}</Link>
-                          </span>
+                          </div>
                         )}
                         description={item.description}
                       />
                       <div className={styles.projectItemContent}>
                         <Link to={item.memberLink}>{item.member || ''}</Link>
-                        {
-                          item.updatedAt && <span>{moment(item.updatedAt).fromNow()}</span>
-                        }
+                        {item.updatedAt && (
+                          <span className={styles.datetime} title={item.updatedAt}>
+                            {moment(item.updatedAt).fromNow()}
+                          </span>
+                        )}
                       </div>
                     </Card>
                   </Card.Grid>
@@ -189,11 +189,19 @@ export default class Workplace extends PureComponent {
                         <List.Item.Meta
                           avatar={<Avatar src={item.user.avatar} />}
                           title={
-                            <p>
-                              <a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
-                            </p>
+                            <span>
+                              <a className={styles.username}>{item.user.name}</a>
+                              &nbsp;
+                              <span className={styles.operation}>
+                                在 <a>xx</a> 新建了项目 <a>xxxx</a>
+                              </span>
+                            </span>
+                          }
+                          description={
+                            <span className={styles.datetime} title={item.updatedAt}>
+                              {moment(item.updatedAt).fromNow()}
+                            </span>
                           }
-                          description={moment(item.updatedAt).fromNow()}
                         />
                       </List.Item>
                     ))
@@ -218,21 +226,15 @@ export default class Workplace extends PureComponent {
             <Card
               style={{ marginBottom: 24 }}
               bordered={false}
-              title="xx 指数"
+              title="XX 指数"
               loading={radarData.length === 0}
             >
               <div className={styles.chart}>
-                {
-                  <Radar
-                    hasLegend
-                    height={286}
-                    data={radarData}
-                  />
-                }
+                <Radar hasLegend height={286} data={radarData} />
               </div>
             </Card>
             <Card
-              bodyStyle={{ paddingBottom: 0 }}
+              bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
               bordered={false}
               title="团队"
             >
@@ -242,8 +244,8 @@ export default class Workplace extends PureComponent {
                     members.map(item => (
                       <Col span={12} key={`members-item-${item.id}`}>
                         <Link to={item.link}>
-                          <img src={item.logo} alt={item.title} />
-                          <span>{item.title}</span>
+                          <Avatar src={item.logo} size="small" />
+                          <span className={styles.member}>{item.title}</span>
                         </Link>
                       </Col>
                     ))

src/routes/Dashboard/Workplace.less

@@ -2,11 +2,12 @@
 @import "../../utils/utils.less";
 
 .activitiesList {
-  padding: 0 24px 24px 24px;
-  :global {
-    .ant-list-item-meta-title:hover {
+  padding: 0 24px 8px 24px;
+  .username {
     color: @text-color;
   }
+  .operation {
+    font-weight: normal;
   }
 }
 
@@ -14,7 +15,7 @@
   display: flex;
   .avatar {
     flex: 0 1 72px;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     & > span {
       border-radius: 72px;
       display: block;
@@ -24,12 +25,14 @@
   }
   .content {
     position: relative;
-    top: 8px;
+    top: 4px;
     margin-left: 24px;
     flex: 1 1 auto;
     color: @text-color-secondary;
+    line-height: 22px;
     .contentTitle {
       font-size: 20px;
+      line-height: 28px;
       font-weight: 500;
       color: @heading-color;
       margin-bottom: 12px;
@@ -40,7 +43,6 @@
 .pageHeaderExtra {
   .clearfix();
   float: right;
-  margin-right: 8px;
   & > div {
     padding: 0 32px;
     position: relative;
@@ -60,43 +62,40 @@
         font-size: 20px;
       }
     }
-    & > em {
+    &:after {
       background-color: @border-color-split;
       position: absolute;
       top: 8px;
       right: 0;
       width: 1px;
       height: 40px;
+      content: '';
     }
   }
   & > div:last-child {
     padding-right: 0;
+    &:after {
+      display: none;
+    }
   }
 }
 
 .members {
-  margin-bottom: 35px;
   a {
     display: block;
-    margin-bottom: 24px;
+    margin: 12px 0;
     line-height: 24px;
     height: 24px;
     .textOverflow();
-    img {
-      border-radius: 24px;
-      display: inline;
-      position: relative;
-      top: -2px;
-      width: 24px;
-      height: 24px;
-      margin-right: 12px;
-      vertical-align: middle;
-    }
-    span {
+    .member {
       font-size: @font-size-base;
       color: @text-color;
       line-height: 24px;
       max-width: 100px;
+      vertical-align: top;
+      margin-left: 12px;
+      transition: all .3s;
+      display: inline-block;
       .textOverflow();
     }
     &:hover {
@@ -111,20 +110,21 @@
   :global {
     .ant-card-meta-description {
       color: @text-color-secondary;
-      min-height: 42px;
+      height: 44px;
+      line-height: 22px;
+      overflow: hidden;
     }
   }
   .cardTitle {
-    font-size: 14px;
-    :global {
-      .ant-avatar {
-        position: relative;
-        top: 5px;
-      }
-    }
+    font-size: 0;
     a {
       color: @heading-color;
       margin-left: 12px;
+      line-height: 24px;
+      height: 24px;
+      display: inline-block;
+      vertical-align: top;
+      font-size: @font-size-base;
       &:hover {
         color: @primary-color;
       }
@@ -135,7 +135,7 @@
   }
   .projectItemContent {
     display: flex;
-    margin-top: 12px;
+    margin-top: 8px;
     overflow: hidden;
     font-size: 12px;
     height: 20px;
@@ -150,14 +150,18 @@
         color: @primary-color;
       }
     }
-    span {
-      color: @text-color-secondary;
+    .datetime {
+      color: @disabled-color;
       flex: 0 0 auto;
       float: right;
     }
   }
 }
 
+.datetime {
+  color: @disabled-color;
+}
+
 @media screen and (max-width: @screen-xl)  and (min-width: @screen-lg) {
   .activeCard {
     margin-bottom: 24px;
@@ -186,7 +190,7 @@
     & > div {
       padding: 0 16px;
       text-align: left;
-      & > em {
+      &:after {
         display: none;
       }
     }