Add new avatar pictures

mock/api.js

@@ -2,20 +2,24 @@ import { imgMap, getUrlParams } from './utils';
 
 export function fakeList(count) {
   const titles = [
-    'Vue',
-    'Ant Design Pro',
-    'Bootstrap',
+    'Alipay',
     'Angular',
+    'Ant Design Pro',
     'Ant Design',
+    'Bootstrap',
     'React',
-    'Alipay',
-    'Ant Design Mobile',
+    'Vue',
+    'Webpack',
   ];
   const avatars = [
-    'https://gw.alipayobjects.com/zos/rmsportal/hYjIZrUoBfNxOAYBVDfc.png', // 凤蝶
-    'https://gw.alipayobjects.com/zos/rmsportal/HHWPIzPLCLYmVuPivyiA.png', // 云雀
-    'https://gw.alipayobjects.com/zos/rmsportal/irqByKtOdKfDojxIWTXF.png', // Basement
-    'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab
+    'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+    'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+    'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+    'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+    'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+    'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+    'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+    'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
   ];
   const covers = [
     'https://gw.alipayobjects.com/zos/rmsportal/HrxcVbrKnCJOZvtzSqjN.png',
@@ -50,11 +54,11 @@ export function fakeList(count) {
       id: `fake-list-${i}`,
       owner: user[i % 10],
       title: titles[i % 8],
-      avatar: avatars[i % 4],
-      cover: (i / 4) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+      avatar: avatars[i % 8],
+      cover: parseInt(i / 4, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
       status: ['active', 'exception', 'normal'][i % 3],
       percent: Math.ceil(Math.random() * 50) + 50,
-      logo: ['https://gw.alipayobjects.com/zos/rmsportal/KoJjkdbuTFxzJmmjuDVR.png', 'https://gw.alipayobjects.com/zos/rmsportal/UxGORCvEXJEsxOfEKZiA.png'][i % 2],
+      logo: avatars[i % 8],
       href: 'https://ant.design',
       updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),
       createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2 * i)),

src/routes/List/BasicList.js

@@ -117,8 +117,8 @@ export default class BasicList extends PureComponent {
             bodyStyle={{ padding: '0 32px 40px 32px' }}
             extra={extraContent}
           >
-            <Button type="dashed" style={{ width: '100%', marginBottom: 12 }}>
-              <Icon type="plus" /> 添加
+            <Button type="dashed" style={{ width: '100%', marginBottom: 12 }} icon="plus">
+              添加
             </Button>
             <List
               size="large"

src/routes/List/CardList.less

@@ -30,6 +30,7 @@
 .cardAvatar {
   width: 48px;
   height: 48px;
+  border-radius: 48px;
 }
 
 .cardDescription {

src/routes/List/SearchList.js

@@ -137,8 +137,8 @@ export default class SearchList extends Component {
 
     const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
       <div className={styles.listContent}>
-        <p>{content}</p>
-        <div>
+        <p className={styles.description}>{content}</p>
+        <div className={styles.extra}>
           <Avatar src={avatar} size="small" /><a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
           <em>{moment(updatedAt).format('YYYY-MM-DD hh:mm')}</em>
         </div>
@@ -305,7 +305,13 @@ export default class SearchList extends Component {
                     title={(
                       <a className={styles.listItemMetaTitle} href={item.href}>{item.title}</a>
                     )}
-                    description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
+                    description={
+                      <span>
+                        <Tag>Ant Design</Tag>
+                        <Tag>设计语言</Tag>
+                        <Tag>蚂蚁金服</Tag>
+                      </span>
+                    }
                   />
                   <ListContent data={item} />
                 </List.Item>

src/routes/List/SearchList.less

@@ -2,41 +2,31 @@
 @import "../../utils/utils.less";
 
 .listContent {
-  p {
-    line-height: 24px;
+  .description {
+    line-height: 22px;
     max-width: 720px;
   }
-  & > div {
+  .extra {
     color: @text-color-secondary;
     margin-top: 16px;
     height: 22px;
     line-height: 22px;
-    & > img {
-      margin-right: 16px;
-    }
-    & > span {
+    & > :global(.ant-avatar) {
       vertical-align: top;
       margin-right: 8px;
       width: 20px;
       height: 20px;
-      & > img {
-        vertical-align: top;
-      }
+      position: relative;
+      top: 1px;
     }
     & > em {
       color: @disabled-color;
       font-style: normal;
       margin-left: 16px;
     }
-    a {
-      color: @text-color-secondary;
-      &:hover {
-        color: @primary-color;
-      }
-    }
   }
 }
-.listItemMetaTitle {
+a.listItemMetaTitle {
   color: @heading-color;
 }
 .listItemExtra {