update list style

mock/api.js

@@ -2,13 +2,13 @@ import { imgMap, getUrlParams } from './utils';
 
 export function fakeList(count) {
   const titles = [
-    '凤蝶',
+    'Vue',
     'AntDesignPro',
     'DesignLab',
-    'Basement',
+    'Angular',
     'AntDesign',
-    '云雀',
-    '体验云',
+    'React',
+    'Alipay',
     'AntDesignMobile',
   ];
   const avatars = [
@@ -18,10 +18,10 @@ export function fakeList(count) {
     'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab
   ];
   const covers = [
-    'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/xMPpMvGSIXusgtgUPAdw.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/hQReiajgtqzIVFjLXjHp.png',
-    'https://gw.alipayobjects.com/zos/rmsportal/nczfTaXEzhSpvgZZjBev.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/nQIAJyTLNeVJfUpTskWk.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/pnhtvpOTzypPvmHVrfKN.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/SVrKVZEFDnhDTNpkplZj.png',
+    'https://gw.alipayobjects.com/zos/rmsportal/bUIOUkPTHgfGdDhgsAgE.png',
   ];
 
   const list = [];
@@ -48,20 +48,16 @@ export function fakeList(count) {
       content: '段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
       members: [
         {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png',
-          name: '王昭君',
-        },
-        {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png',
-          name: '王昭君',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+          name: '曲丽丽',
         },
         {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
           name: '王昭君',
         },
         {
-          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png',
-          name: '王昭君',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+          name: '董娜娜',
         },
       ],
     });
@@ -136,7 +132,7 @@ export const getNotice = [
     logo: imgMap.c,
     description: '这是一条描述信息这是一条描述信息',
     updatedAt: new Date('2017-07-23 06:23:00'),
-    member: '成都超级小分队',
+    member: '成都小分队',
   },
 ];
 

mock/rule.js

@@ -5,6 +5,7 @@ let tableListDataSource = [];
 for (let i = 0; i < 46; i += 1) {
   tableListDataSource.push({
     key: i,
+    disabled: ((i % 6) === 0),
     href: 'https://ant.design',
     avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2],
     no: `TradeCode ${i}`,
@@ -12,7 +13,7 @@ for (let i = 0; i < 46; i += 1) {
     owner: '曲丽丽',
     description: '这是一段描述',
     callNo: Math.floor(Math.random() * 1000),
-    status: Math.floor(Math.random() * 10) % 2,
+    status: Math.floor(Math.random() * 10) % 4,
     updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`),
     createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`),
     progress: Math.ceil(Math.random() * 100),

src/components/AvatarList/index.less

@@ -10,8 +10,8 @@
 }
 
 .avatarItem {
+  border: 1px solid #fff;
   display: inline-block;
-  overflow: hidden;
   font-size: @font-size-base;
   margin-left: -8px;
   width: @avatar-size-base;

src/components/StandardTable/index.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 import { Table, Alert, Badge } from 'antd';
 import styles from './index.less';
 
+const statusMap = ['default', 'processing', 'success', 'error'];
 class StandardTable extends PureComponent {
   state = {
     selectedRowKeys: [],
@@ -43,7 +44,7 @@ class StandardTable extends PureComponent {
     const { selectedRowKeys, totalCallNo } = this.state;
     const { data: { list, pagination }, loading } = this.props;
 
-    const status = ['关闭', '运行中'];
+    const status = ['关闭', '运行中', '已上线', '异常'];
 
     const columns = [
       {
@@ -76,13 +77,17 @@ class StandardTable extends PureComponent {
             text: status[1],
             value: 1,
           },
+          {
+            text: status[2],
+            value: 2,
+          },
+          {
+            text: status[3],
+            value: 3,
+          },
         ],
         render(val) {
-          if (val === 0) {
-            return <Badge status="default" text={status[val]} />;
-          } else {
-            return <Badge status="processing" text={status[val]} />;
-          }
+          return <Badge status={statusMap[val]} text={status[val]} />;
         },
       },
       {
@@ -112,6 +117,9 @@ class StandardTable extends PureComponent {
     const rowSelection = {
       selectedRowKeys,
       onChange: this.handleRowSelectChange,
+      getCheckboxProps: record => ({
+        disabled: record.disabled,
+      }),
     };
 
     return (

src/routes/List/BasicList.js

@@ -112,10 +112,11 @@ export default class BasicList extends PureComponent {
           <Card
             bordered={false}
             title="基础列表"
-            style={{ marginTop: 16 }}
+            style={{ marginTop: 24 }}
+            bodyStyle={{ padding: '16px 32px 40px 32px' }}
             extra={extraContent}
           >
-            <Button type="dashed" style={{ width: '100%' }}>
+            <Button type="dashed" style={{ width: '100%', marginBottom: 12 }}>
               <Icon type="plus" /> 添加
             </Button>
             <List

src/routes/List/BasicList.less

@@ -3,6 +3,12 @@
 
 .standardList {
   :global {
+    .ant-card-head {
+      border-bottom: none;
+    }
+    .ant-card-head-title {
+      line-height: 32px;
+    }
     .ant-list-pagination {
       text-align: right;
     }

src/routes/List/CardList.js

@@ -44,7 +44,7 @@ export default class CardList extends PureComponent {
 
     const extraContent = (
       <div className={styles.extraImg}>
-        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/QfpzdhbrqRtdSyZHKhjp.png" />
+        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
       </div>
     );
 
@@ -58,12 +58,12 @@ export default class CardList extends PureComponent {
           <List
             rowKey="id"
             loading={loading}
-            grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
+            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
             dataSource={['', ...list]}
             renderItem={item => (item ? (
               <List.Item key={item.id}>
                 <Link to="/list/card-list">
-                  <Card actions={[<a>操作一</a>, <a>操作二</a>]}>
+                  <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
                     <Card.Meta
                       avatar={<Avatar size="large" src={item.avatar} />}
                       title={item.title}

src/routes/List/CardList.less

@@ -2,6 +2,7 @@
 @import "../../utils/utils.less";
 
 .cardList {
+  margin-bottom: -24px;
   :global {
     .ant-card-meta-content {
       margin-top: 0;
@@ -19,14 +20,11 @@
 }
 
 .newButton {
-  background-color: transparent;
+  background-color: #fff;
   border-color: @border-color-base;
   color: @text-color-secondary;
   width: 100%;
   height: 178px;
-  &:hover {
-    background-color: transparent;
-  }
 }
 
 .cardDescription {

src/routes/List/CoverCardList.js

 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { routerRedux } from 'dva/router';
+import { Link, routerRedux } from 'dva/router';
 import { Row, Col, Form, Card, Select, List, Input } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -74,34 +74,37 @@ export default class CoverCardList extends PureComponent {
       <List
         rowKey="id"
         loading={loading}
-        grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
+        grid={{ gutter: 24, lg: 4, md: 3, sm: 2, xs: 1 }}
         dataSource={list}
         renderItem={item => (
           <List.Item>
-            <Card
-              cover={<img alt={item.title} src={item.cover} />}
-            >
-              <Card.Meta
-                title={item.title}
-                description={item.subDescription}
-              />
-              <div className={styles.cardItemContent}>
-                <span>{moment(item.updatedAt).fromNow()}</span>
-                <div className={styles.avatarList}>
-                  <AvatarList size="small">
-                    {
-                      item.members.map((member, i) => (
-                        <AvatarList.Item
-                          key={`${item.id}-avatar-${i}`}
-                          src={member.avatar}
-                          tips={member.name}
-                        />
-                      ))
-                    }
-                  </AvatarList>
+            <Link>
+              <Card
+                hoverable
+                cover={<img alt={item.title} src={item.cover} />}
+              >
+                <Card.Meta
+                  title={item.title}
+                  description={item.subDescription}
+                />
+                <div className={styles.cardItemContent}>
+                  <span>{moment(item.updatedAt).fromNow()}</span>
+                  <div className={styles.avatarList}>
+                    <AvatarList size="small">
+                      {
+                        item.members.map((member, i) => (
+                          <AvatarList.Item
+                            key={`${item.id}-avatar-${i}`}
+                            src={member.avatar}
+                            tips={member.name}
+                          />
+                        ))
+                      }
+                    </AvatarList>
+                  </div>
                 </div>
-              </div>
-            </Card>
+              </Card>
+            </Link>
           </List.Item>
         )}
       />
@@ -179,7 +182,7 @@ export default class CoverCardList extends PureComponent {
                 grid
                 last
               >
-                <Row gutter={16}>
+                <Row gutter={24}>
                   <Col lg={8} md={10} sm={10} xs={24}>
                     <FormItem
                       {...formItemLayout}

src/routes/List/CoverCardList.less

@@ -2,6 +2,7 @@
 @import "../../utils/utils.less";
 
 .coverCardList {
+  margin-bottom: -24px;
   :global {
     .ant-card-meta-description {
       font-size: 12px;
@@ -9,13 +10,13 @@
   }
   .cardItemContent {
     display: flex;
-    margin-top: 8px;
+    margin-top: 12px;
     line-height: 20px;
     height: 20px;
-    span {
+    & > span {
+      color: @disabled-color;
       flex: 1;
       font-size: 12px;
-      color: @disabled-color;
     }
     .avatarList {
       flex: 0 1 auto;

src/routes/List/FilterCardList.js

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import numeral from 'numeral';
 import { connect } from 'dva';
 import { routerRedux } from 'dva/router';
-import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input } from 'antd';
+import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input, Dropdown, Menu } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -102,7 +102,6 @@ export default class FilterCardList extends PureComponent {
         <div>
           <p>活跃用户</p>
           <p>{activeUser}</p>
-          <span />
         </div>
         <div>
           <p>新增用户</p>
@@ -130,6 +129,20 @@ export default class FilterCardList extends PureComponent {
       },
     };
 
+    const itemMenu = (
+      <Menu>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
+        </Menu.Item>
+        <Menu.Item>
+          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3d menu item</a>
+        </Menu.Item>
+      </Menu>
+    );
+
     return (
       <PageHeaderLayout
         title="带筛选卡片列表"
@@ -201,22 +214,22 @@ export default class FilterCardList extends PureComponent {
           </Card>
           <List
             rowKey="id"
-            style={{ marginTop: 16 }}
-            grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+            style={{ marginTop: 24 }}
+            grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
             loading={loading}
             dataSource={list}
             renderItem={item => (
               <List.Item key={item.id}>
                 <Card
                   actions={[
-                    <Tooltip title="复制"><Icon type="copy" /></Tooltip>,
-                    <Tooltip title="用户"><Icon type="solution" /></Tooltip>,
-                    <Tooltip title="设置"><Icon type="setting" /></Tooltip>,
-                    <Tooltip title="删除"><Icon type="delete" /></Tooltip>,
+                    <Tooltip title="下载"><Icon type="download" /></Tooltip>,
+                    <Tooltip title="编辑"><Icon type="edit" /></Tooltip>,
+                    <Tooltip title="分享"><Icon type="share-alt" /></Tooltip>,
+                    <Dropdown overlay={itemMenu}><Icon type="ellipsis" /></Dropdown>,
                   ]}
                 >
                   <Card.Meta
-                    avatar={<Avatar size="large" src={item.avatar} />}
+                    avatar={<Avatar size="small" src={item.avatar} />}
                     title={item.title}
                   />
                   <div className={styles.cardItemContent}>

src/routes/List/FilterCardList.less

@@ -2,43 +2,30 @@
 @import "../../utils/utils.less";
 
 .filterCardList {
+  margin-bottom: -24px;
   :global {
-    .ant-card-meta-title {
-      position: relative;
-      top: 8px;
-    }
     .ant-card-meta-content {
       margin-top: 0;
     }
   }
   .cardInfo {
     .clearfix();
-    border: 1px solid @border-color-base;
-    border-radius: @border-radius-base;
-    padding: 8px 0;
-    margin-top: 16px;
-    width: 100%;
+    margin-top: 12px;
+    margin-left: 40px;
     & > div {
       position: relative;
-      text-align: center;
+      text-align: left;
       float: left;
       width: 50%;
-      & > span {
-        background-color: @border-color-split;
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 1px;
-        height: 44px;
-      }
       p {
-        color: @text-color-secondary;
+        color: @text-color;
         line-height: 32px;
         font-size: 24px;
       }
       p:first-child {
         font-size: 12px;
         line-height: 20px;
+        margin-bottom: 4px;
       }
     }
   }

src/routes/List/SearchList.js

@@ -167,7 +167,7 @@ export default class SearchList extends Component {
     };
 
     const loadMore = showLoadMore ? (
-      <div style={{ textAlign: 'center', marginTop: 8 }}>
+      <div style={{ textAlign: 'center', marginTop: 16 }}>
         <Button onClick={this.handleLoadMore}>
           {loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
           {!loadingMore && (<span>加载更多</span>)}
@@ -202,7 +202,7 @@ export default class SearchList extends Component {
                 </FormItem>
               </StandardFormRow>
               <StandardFormRow
-                title="Owner"
+                title="owner"
                 grid
               >
                 <Row>
@@ -276,9 +276,13 @@ export default class SearchList extends Component {
               </StandardFormRow>
             </Form>
           </Card>
-          <Card style={{ marginTop: 16 }} bordered={false}>
+          <Card
+            style={{ marginTop: 24 }}
+            bordered={false}
+            bodyStyle={{ padding: '12px 24px 32px 24px' }}
+          >
             <List
-              loading={loading}
+              loading={!loadingMore && loading}
               rowKey="id"
               itemLayout="vertical"
               loadMore={loadMore}

src/routes/List/SearchList.less

@@ -10,7 +10,7 @@
     margin-top: 16px;
     height: 22px;
     line-height: 22px;
-    img {
+    & > img {
       margin-right: 16px;
     }
     & > span {
@@ -18,6 +18,9 @@
       margin-right: 16px;
       width: 20px;
       height: 20px;
+      & > img {
+        vertical-align: top;
+      }
     }
     & > em {
       color: @disabled-color;