列表页视觉 review 优化

src/routes/List/CardList.js

 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
+import { Link } from 'dva/router';
 import { Card, Avatar, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -65,7 +66,9 @@ export default class CardList extends PureComponent {
             {
               list && list.map(item => (
                 <List.Item key={item.id}>
+                  <Link to="/list/card-list">
                     <Card
+                      noHovering={false}
                       actions={[<a>操作一</a>, <a>操作二</a>]}
                     >
                       <Card.Meta
@@ -78,6 +81,7 @@ export default class CardList extends PureComponent {
                         )}
                       />
                     </Card>
+                  </Link>
                 </List.Item>
               ))
             }

src/routes/List/CardList.less

@@ -31,6 +31,7 @@
 
 .cardDescription {
   .textOverflowMulti();
+  color: @text-color;
 }
 
 .pageHeaderContent {

src/routes/List/CoverCardList.js

@@ -161,9 +161,15 @@ export default class CoverCardList extends PureComponent {
                       <TagOption value="cat2">类目二</TagOption>
                       <TagOption value="cat3">类目三</TagOption>
                       <TagOption value="cat4">类目四</TagOption>
-                      <TagExpand>
                       <TagOption value="cat5">类目五</TagOption>
                       <TagOption value="cat6">类目六</TagOption>
+                      <TagOption value="cat7">类目七</TagOption>
+                      <TagOption value="cat8">类目八</TagOption>
+                      <TagOption value="cat9">类目九</TagOption>
+                      <TagOption value="cat10">类目十</TagOption>
+                      <TagExpand>
+                        <TagOption value="cat11">类目十一</TagOption>
+                        <TagOption value="cat12">类目十二</TagOption>
                       </TagExpand>
                     </TagSelect>
                   )}

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, Spin, Icon, Avatar } from 'antd';
+import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -199,15 +199,21 @@ export default class FilterCardList extends PureComponent {
               </StandardFormRow>
             </Form>
           </Card>
-          <Row gutter={16} style={{ marginTop: 16 }}>
-            {
-              loading && <Spin />
-            }
+          <List
+            style={{ marginTop: 16 }}
+            grid={{ gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
+            loading={loading}
+          >
             {
-              !loading && list && list.map(item => (
-                <Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
+              list && list.map(item => (
+                <List.Item key={item.id}>
                   <Card
-                    actions={[<Icon type="copy" />, <Icon type="solution" />, <Icon type="setting" />, <Icon type="delete" />]}
+                    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>,
+                    ]}
                   >
                     <Card.Meta
                       avatar={<Avatar size="large" src={item.avatar} />}
@@ -220,10 +226,10 @@ export default class FilterCardList extends PureComponent {
                       />
                     </div>
                   </Card>
-                </Col>
+                </List.Item>
               ))
             }
-          </Row>
+          </List>
         </div>
       </PageHeaderLayout>
     );