Merge pull request #2 from ant-design/List_Dashboard-optimize-again

修复二次List 和 Dashboard 的二次确认优化

src/components/Charts/index.less

@@ -1,4 +1,5 @@
 .miniChart {
+  overflow: hidden;
   position: relative;
   width: 100%;
   & > div {

src/routes/Dashboard/Analysis.less

@@ -72,6 +72,9 @@
 }
 
 @media screen and (max-width: @screen-lg) {
+  .salesExtra {
+    display: none;
+  }
   .rankingList {
     li {
       span:first-child {

src/routes/Dashboard/Monitor.js

@@ -3,7 +3,6 @@ import { connect } from 'dva';
 import { Row, Col, Card } from 'antd';
 import numeral from 'numeral';
 
-import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import { NumberInfo, MiniArea, Pie, WaterWave, Gauge } from '../../components/Charts';
 import MapChart from '../../components/MapChart';
 import TagCloud from '../../components/TagCloud';
@@ -45,12 +44,10 @@ export default class Monitor extends PureComponent {
     const { tags } = monitor;
 
     return (
-      <PageHeaderLayout
-        title="大盘监控"
-      >
+      <div>
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="活动实时交易情况">
+            <Card title="活动实时交易情况" bordered={false}>
               <Row>
                 <Col sm={6} xs={12}>
                   <NumberInfo
@@ -85,7 +82,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col lg={8} md={24} sm={24} xs={24}>
-            <Card title="活动情况预测" style={{ marginBottom: 24 }}>
+            <Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
               <div className={styles.activeChart}>
                 <NumberInfo
                   subTitle="目标评估"
@@ -125,7 +122,12 @@ export default class Monitor extends PureComponent {
                 }
               </div>
             </Card>
-            <Card title="券核效率" style={{ marginBottom: 24 }} bodyStyle={{ textAlign: 'center' }}>
+            <Card
+              title="券核效率"
+              style={{ marginBottom: 24 }}
+              bodyStyle={{ textAlign: 'center' }}
+              bordered={false}
+            >
               <Gauge
                 title="跳出率"
                 height={164}
@@ -136,7 +138,11 @@ export default class Monitor extends PureComponent {
         </Row>
         <Row gutter={24}>
           <Col sm={8} xs={24}>
-            <Card title="各品类占比" style={{ marginBottom: 24 }}>
+            <Card
+              title="各品类占比"
+              style={{ marginBottom: 24 }}
+              bordered={false}
+            >
               <Row style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
                   <Pie
@@ -168,7 +174,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索">
+            <Card title="热门搜索" bordered={false}>
               <TagCloud
                 data={tags}
                 height={161}
@@ -176,7 +182,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="资源剩余" bodyStyle={{ textAlign: 'center' }}>
+            <Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}>
               <WaterWave
                 height={161}
                 title="补贴资金剩余"
@@ -185,7 +191,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
         </Row>
-      </PageHeaderLayout>
+      </div>
     );
   }
 }

src/routes/List/BasicList.js

@@ -95,7 +95,7 @@ export default class BasicList extends PureComponent {
     return (
       <PageHeaderLayout>
         <div className={styles.standardList}>
-          <Card>
+          <Card bordered={false}>
             <Row>
               <Col sm={8} xs={24}>
                 <Info title="我的代办" value="8个任务" bordered />
@@ -110,6 +110,7 @@ export default class BasicList extends PureComponent {
           </Card>
 
           <Card
+            bordered={false}
             title="基础列表"
             style={{ marginTop: 16 }}
             extra={extraContent}

src/routes/List/CardList.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'dva';
-import { Row, Col, Card, Avatar, Spin, Button, Icon } from 'antd';
+import { Card, Avatar, Button, Icon, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 
@@ -42,7 +42,7 @@ export default class CardList extends PureComponent {
 
     const extraContent = (
       <div className={styles.extraImg}>
-        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/tTIFdlIcZFvvmCROhyBg.png" />
+        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/QfpzdhbrqRtdSyZHKhjp.png" />
       </div>
     );
 
@@ -53,37 +53,35 @@ export default class CardList extends PureComponent {
         extraContent={extraContent}
       >
         <div className={styles.cardList}>
-          {
-            loading ?
-              <Spin />
-              :
-              <Row gutter={16}>
-                <Col lg={8} md={12} sm={12} xs={24} style={{ marginBottom: 16 }}>
-                  <Button type="dashed" className={styles.newButton}>
-                    <Icon type="plus" /> 新增产品
-                  </Button>
-                </Col>
-                {
-                  list && list.map(item => (
-                    <Col lg={8} md={12} sm={12} xs={24} key={item.id} style={{ marginBottom: 16 }}>
-                      <Card
-                        actions={[<a>操作一</a>, <a>操作二</a>]}
-                      >
-                        <Card.Meta
-                          avatar={<Avatar size="large" src={item.avatar} />}
-                          title={item.title}
-                          description={(
-                            <p className={styles.cardDescription}>
-                              <span>{item.description}</span>
-                            </p>
-                          )}
-                        />
-                      </Card>
-                    </Col>
-                  ))
-                }
-              </Row>
-          }
+          <List
+            loading={loading}
+            grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
+          >
+            <List.Item>
+              <Button type="dashed" className={styles.newButton}>
+                <Icon type="plus" /> 新增产品
+              </Button>
+            </List.Item>
+            {
+              list && list.map(item => (
+                <List.Item key={item.id}>
+                  <Card
+                    actions={[<a>操作一</a>, <a>操作二</a>]}
+                  >
+                    <Card.Meta
+                      avatar={<Avatar size="large" src={item.avatar} />}
+                      title={item.title}
+                      description={(
+                        <p className={styles.cardDescription}>
+                          <span>{item.description}</span>
+                        </p>
+                      )}
+                    />
+                  </Card>
+                </List.Item>
+              ))
+            }
+          </List>
         </div>
       </PageHeaderLayout>
     );

src/routes/List/CardList.less

@@ -12,6 +12,10 @@
 .extraImg {
   margin-top: -60px;
   text-align: center;
+  width: 195px;
+  img {
+    width: 100%;
+  }
 }
 
 .newButton {

src/routes/List/CoverCardList.js

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { Row, Col, Form, Card, Select, Spin } from 'antd';
+import { routerRedux } from 'dva/router';
+import { Row, Col, Form, Card, Select, List } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
 import StandardFormRow from '../../components/StandardFormRow';
@@ -49,15 +50,35 @@ export default class CoverCardList extends PureComponent {
     }, 0);
   }
 
+  handleTabChange = (key) => {
+    const { dispatch } = this.props;
+    switch (key) {
+      case 'doc':
+        dispatch(routerRedux.push('/list/search'));
+        break;
+      case 'app':
+        dispatch(routerRedux.push('/list/filter-card-list'));
+        break;
+      case 'project':
+        dispatch(routerRedux.push('/list/cover-card-list'));
+        break;
+      default:
+        break;
+    }
+  }
+
   render() {
     const { list: { list = [], loading }, form } = this.props;
     const { getFieldDecorator } = form;
 
     const cardList = list ? (
-      <Row gutter={16} style={{ marginTop: 16 }}>
+      <List
+        loading={loading}
+        grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
+      >
         {
           list.map(item => (
-            <Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
+            <List.Item key={item.id}>
               <Card
                 cover={<img alt={item.title} src={item.cover} />}
               >
@@ -82,15 +103,15 @@ export default class CoverCardList extends PureComponent {
                   </div>
                 </div>
               </Card>
-            </Col>
+            </List.Item>
           ))
         }
-      </Row>
+      </List>
     ) : null;
 
     const tabList = [
       {
-        key: 'docs',
+        key: 'doc',
         tab: '文章',
       },
       {
@@ -100,6 +121,7 @@ export default class CoverCardList extends PureComponent {
       {
         key: 'project',
         tab: '项目',
+        default: true,
       },
     ];
 
@@ -121,9 +143,11 @@ export default class CoverCardList extends PureComponent {
         title="带封面的卡片列表"
         content={pageHeaderContent}
         tabList={tabList}
+        onTabChange={this.handleTabChange}
       >
         <div className={styles.coverCardList}>
           <Card
+            bordered={false}
             noHovering
           >
             <Form
@@ -188,17 +212,9 @@ export default class CoverCardList extends PureComponent {
               </StandardFormRow>
             </Form>
           </Card>
-          {
-            loading && (list.length > 0) && <Spin>
-              {cardList}
-            </Spin>
-          }
-          {
-            loading && (list.length < 1) && <div style={{ marginTop: 16 }}><Spin /></div>
-          }
-          {
-            !loading && cardList
-          }
+          <div className={styles.cardList}>
+            { cardList }
+          </div>
         </div>
       </PageHeaderLayout>
     );

src/routes/List/CoverCardList.less

@@ -21,4 +21,7 @@
       flex: 0 1 auto;
     }
   }
+  .cardList {
+    margin-top: 24px;
+  }
 }

src/routes/List/FilterCardList.js

@@ -1,6 +1,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 PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -60,22 +61,39 @@ export default class FilterCardList extends PureComponent {
     }, 0);
   }
 
+  handleTabChange = (key) => {
+    const { dispatch } = this.props;
+    switch (key) {
+      case 'doc':
+        dispatch(routerRedux.push('/list/search'));
+        break;
+      case 'app':
+        dispatch(routerRedux.push('/list/filter-card-list'));
+        break;
+      case 'project':
+        dispatch(routerRedux.push('/list/cover-card-list'));
+        break;
+      default:
+        break;
+    }
+  }
+
   render() {
     const { list: { list, loading }, form } = this.props;
     const { getFieldDecorator } = form;
 
     const tabList = [
       {
-        key: 'docs',
+        key: 'doc',
         tab: '文章',
       },
       {
-        key: 'apps',
+        key: 'app',
         tab: '应用',
         default: true,
       },
       {
-        key: 'projects',
+        key: 'project',
         tab: '项目',
       },
     ];
@@ -112,10 +130,12 @@ export default class FilterCardList extends PureComponent {
         title="带筛选卡片列表"
         content={pageHeaderContent}
         tabList={tabList}
+        onTabChange={this.handleTabChange}
       >
         <div className={styles.filterCardList}>
           <Card
             noHovering
+            bordered={false}
           >
             <Form
               layout="inline"

src/routes/List/SearchList.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
 import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col } from 'antd';
 
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@@ -70,6 +71,23 @@ export default class SearchList extends Component {
     });
   }
 
+  handleTabChange = (key) => {
+    const { dispatch } = this.props;
+    switch (key) {
+      case 'docs':
+        dispatch(routerRedux.push('/list/search'));
+        break;
+      case 'app':
+        dispatch(routerRedux.push('/list/filter-card-list'));
+        break;
+      case 'project':
+        dispatch(routerRedux.push('/list/cover-card-list'));
+        break;
+      default:
+        break;
+    }
+  }
+
   render() {
     const { showLoadMore, loadingMore } = this.state;
     const { form, list: { list } } = this.props;
@@ -100,7 +118,7 @@ export default class SearchList extends Component {
 
     const tabList = [
       {
-        key: 'docs',
+        key: 'doc',
         tab: '文章',
       },
       {
@@ -148,9 +166,10 @@ export default class SearchList extends Component {
         title="搜索列表"
         content={pageHeaderContent}
         tabList={tabList}
+        onTabChange={this.handleTabChange}
       >
         <div>
-          <Card noHovering>
+          <Card noHovering bordered={false}>
             <Form layout="inline">
               <StandardFormRow title="所属类目" block>
                 <FormItem>
@@ -243,7 +262,7 @@ export default class SearchList extends Component {
               </StandardFormRow>
             </Form>
           </Card>
-          <Card style={{ marginTop: 16 }}>
+          <Card style={{ marginTop: 16 }} bordered={false}>
             <List
               loadingMore={loadingMore}
               showLoadMore={(list.length > 0) && showLoadMore}

src/routes/List/TableList.js

@@ -164,15 +164,13 @@ export default class TableList extends PureComponent {
     const menu = (
       <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
         <Menu.Item key="remove">删除</Menu.Item>
-        {
-          selectedRows.length > 1 && <Menu.Item key="approval">批量审批</Menu.Item>
-        }
+        <Menu.Item key="approval">批量审批</Menu.Item>
       </Menu>
     );
 
     return (
       <PageHeaderLayout title="标准表格">
-        <Card noHovering>
+        <Card noHovering bordered={false}>
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>
               <Form onSubmit={this.handleSearch}>
@@ -229,12 +227,16 @@ export default class TableList extends PureComponent {
             </div>
             <div className={styles.tableListOperator}>
               <Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>新建</Button>
-              <Button>批量操作</Button>
-              <Dropdown overlay={menu}>
-                <Button>
-                  更多操作 <Icon type="down" />
-                </Button>
-              </Dropdown>
+              {
+                selectedRows.length > 0 && <span>
+                  <Button>批量操作</Button>
+                  <Dropdown overlay={menu}>
+                    <Button>
+                      更多操作 <Icon type="down" />
+                    </Button>
+                  </Dropdown>
+                </span>
+              }
             </div>
             <StandardTable
               selectedRows={selectedRows}