修改首页，拆分组件

src/layouts/RightContent.tsx

 import React from 'react'
 import { Link, history } from 'umi'
-import { Menu, Dropdown, List, Typography, Badge, Button, Card } from 'antd'
+import { Menu, Dropdown, List, Typography, Badge, Button, Avatar } from 'antd'
 import { BellOutlined, CaretDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { removeAuth, getAuth } from '@/utils/auth'
-
+import messageIcon1 from '@/asserts/home-icon-1.png'
 const RightContent: React.FC<{}> = (props) => {
 
   const toLogin = () => {
@@ -35,20 +35,32 @@ const RightContent: React.FC<{}> = (props) => {
   ];
 
   const menuMessage = (
-    <div title="消息列表" className={styles.noticeBox}>
-      <h3>消息列表</h3>
+    <div className={styles.noticeBox}>
+      <div className={styles.header}>消息列表</div>
       <List
         itemLayout="horizontal"
         dataSource={data}
-        footer={<p className={styles.noticeFooter}>
-          <span>清空通知</span>
-          <span>查看更多</span>
-        </p>}
-        renderItem={item => (
-          <List.Item>
-            {item}
-          </List.Item>
-        )}
+        footer={
+          <a className={styles.messageFooter}>
+            {"查看更多 ->"}
+          </a>
+        }
+        renderItem={item => {
+          console.log(item);
+          return (
+            <List.Item>
+              <div className={styles.msgContainer}>
+                <div className={styles.msgItemIcon}>
+                  <Avatar src={messageIcon1} />
+                </div>
+                <div>
+                  <div className={styles.msgTitle}>订单支付</div> 
+                  <div className={styles.msgTime}>2020-08-25 12:58</div> 
+                </div>
+              </div>
+            </List.Item>
+          )
+        }}
       />
     </div>
   )

src/layouts/index.less

@@ -94,13 +94,43 @@
       padding: 0;
     }
     .ant-list-item{
-      padding: 12px 24px;
+      padding: 0;
     }
   }
   h4{
     padding-left: 24px;
     border-bottom: 1px solid #f0f0f0;
   }
+
+  .header {
+    padding: 17px 24px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    border-bottom: 1px solid #EEF0F3;
+  }
+  .messageFooter {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 16px 0;
+  }
+
+  .msgContainer {
+    display: flex;
+    flex-direction: row;
+    padding: 16px 32px 16px 18px;
+    width: 320px;
+
+    .msgItemIcon {
+      margin-right: 8px;
+    }
+
+    .msgTime {
+      color: #909399;
+    }
+  }
 }
 
 .topMessage{

src/pages/home/component/MemberStatistics/index.less

+.lineDesc{
+  display: flex;
+  align-items: center;
+  margin-top: 14px;
+  
+  .icon {
+    display: block;
+    width: 48px;
+    height: 48px;
+    margin: 24px 16px 24px 24px;
+  }
+  .lineDescText{
+    p{
+      margin-bottom: 8px;
+      line-height: 1;
+    }
+    .lineDescTitle{
+      font-size: 24px;
+      font-weight: 500;
+      color: #303133;
+    }
+    .lineDescTip{
+      font-size: 12px;
+      font-weight: 400;
+      color: #909399;
+    }
+  }
+  
+}
\ No newline at end of file

src/pages/home/component/MemberStatistics/index.tsx

+import React, { useState, useEffect } from 'react';
+import { Card, Radio, Row, Col } from 'antd';
+import LineChart from './lineChart';
+import styles from './index.less';
+// 折线图描述
+import todayIcon from '@/asserts/home-icon-24.png'
+import weekIcon from '@/asserts/home-icon-25.png'
+import monthIcon from '@/asserts/home-icon-26.png'
+import totalIcon from '@/asserts/home-icon-27.png'
+
+
+export enum TimeEnum {
+  WEEK = 1,
+  MONTH = 2,
+  YEAR = 3
+}
+
+const MemberStatistics: React.FC = () => {
+  const [timeRadio, setTimeRadio] = useState<TimeEnum>(TimeEnum.WEEK)
+  const handleChangeTime = (e) => {
+    setTimeRadio(e.target.value)
+  }
+  const data = [
+    {
+      icon: todayIcon,
+      value: 86,
+      tips: '今日注册'
+    },
+    {
+      icon: weekIcon,
+      value: 867,
+      tips: '最近7日注册'
+    },
+    {
+      icon: monthIcon,
+      value: 1280,
+      tips: '最近30日注册'
+    },
+    {
+      icon: totalIcon,
+      value: 5686,
+      tips: '累计注册'
+    }
+  ]
+  return (
+    <Card 
+      headStyle={{borderBottom:'none'}} 
+      title="会员统计" 
+      bordered={false}
+      extra={
+        <Radio.Group value={timeRadio} buttonStyle="solid" size="small" onChange={handleChangeTime}>
+          <Radio.Button value={TimeEnum.WEEK}>周</Radio.Button>
+          <Radio.Button value={TimeEnum.MONTH}>月</Radio.Button>
+          <Radio.Button value={TimeEnum.YEAR}>日</Radio.Button>
+        </Radio.Group>
+      }
+    >
+      <Row>
+        <Col span={24}>
+          {/* 折线图 */}
+          <LineChart currentIndex={1} />
+        </Col>
+        <Col span={24}>
+          <Row>
+            {
+              data.map((item) => {
+                return (
+                  <Col span={6} key={item.value}>
+                    <div className={styles.lineDesc}>
+                      <img src={item.icon} className={styles.icon} alt=""/>
+                      <div className={styles.lineDescText}>
+                        <p className={styles.lineDescTitle}>{item.value}</p>
+                        <p className={styles.lineDescTip}>{item.tips}</p>
+                      </div>
+                    </div>
+                  </Col>
+                )
+              })
+            }
+          </Row>
+        </Col>
+      </Row>
+    </Card>
+  )
+}
+
+export default MemberStatistics;
\ No newline at end of file

src/pages/home/component/OrderStatistics/index.less

+.lineDesc{
+  display: flex;
+  align-items: center;
+  margin-top: 14px;
+  
+  .icon {
+    display: block;
+    width: 48px;
+    height: 48px;
+    margin: 24px 16px 24px 24px;
+  }
+  .lineDescText{
+    p{
+      margin-bottom: 8px;
+      line-height: 1;
+    }
+    .lineDescTitle{
+      font-size: 24px;
+      font-weight: 500;
+      color: #303133;
+    }
+    .lineDescTip{
+      font-size: 12px;
+      font-weight: 400;
+      color: #909399;
+    }
+  }
+  
+}
\ No newline at end of file

src/pages/home/component/OrderStatistics/index.tsx

+import React, { useState } from 'react';
+import { Card, Radio, Row, Col } from 'antd';
+import styles from './index.less'
+import ColumnChart from './columnChart';
+
+// 折线图描述
+import todayIcon from '@/asserts/home-icon-24.png'
+import weekIcon from '@/asserts/home-icon-25.png'
+import monthIcon from '@/asserts/home-icon-26.png'
+import totalIcon from '@/asserts/home-icon-27.png'
+
+export enum TimeEnum {
+  WEEK = 1,
+  MONTH = 2,
+  YEAR = 3
+}
+
+const OrderStatistics = () => {
+  const [timeRadio, setTimeRadio] = useState<TimeEnum>(TimeEnum.WEEK)
+  const handleChangeTime = (e) => {
+    setTimeRadio(e.target.value)
+  }
+  const data = [
+    {
+      icon: todayIcon,
+      value: 86,
+      tips: '今日注册'
+    },
+    {
+      icon: weekIcon,
+      value: 867,
+      tips: '最近7日注册'
+    },
+    {
+      icon: monthIcon,
+      value: 1280,
+      tips: '最近30日注册'
+    },
+    {
+      icon: totalIcon,
+      value: 5686,
+      tips: '累计注册'
+    }
+  ]
+  return (
+    <Card 
+      headStyle={{borderBottom:'none'}} 
+      style={{height: '100%'}}
+      title="会员统计" 
+      bordered={false}
+      extra={
+        <Radio.Group value={timeRadio} buttonStyle="solid" size="small" onChange={handleChangeTime}>
+          <Radio.Button value={TimeEnum.WEEK}>周</Radio.Button>
+          <Radio.Button value={TimeEnum.MONTH}>月</Radio.Button>
+          <Radio.Button value={TimeEnum.YEAR}>日</Radio.Button>
+        </Radio.Group>
+      }
+    >
+      <Row style={{margin: '36px 0 0 0'}}>
+        <Col span={24}>
+          {/* 折线图 */}
+          <ColumnChart currentIndex={1} />
+        </Col>
+        <Col span={24}>
+          <Row>
+            {
+              data.map((item) => {
+                return (
+                  <Col span={6} key={item.value}>
+                    <div className={styles.lineDesc}>
+                      <img src={item.icon} className={styles.icon} alt=""/>
+                      <div className={styles.lineDescText}>
+                        <p className={styles.lineDescTitle}>{item.value}</p>
+                        <p className={styles.lineDescTip}>{item.tips}</p>
+                      </div>
+                    </div>
+                  </Col>
+                )
+              })
+            }
+          </Row>
+        </Col>
+      </Row>
+    </Card>
+  )
+}
+
+export default OrderStatistics
\ No newline at end of file

src/pages/home/component/StatisticsColumn/index.less

+.commodityTotalTitle{
+  text-align: center;
+  span{
+    font-size: 12px;
+    font-weight: 400;
+    color: #909399;
+  }
+  p{
+    height: 72px;
+    font-size: 24px;
+    font-weight: 500;
+    color: #303133;
+    line-height: 72px;
+  }
+}
+.commodityTotalDesc{
+  display: flex;
+  justify-content: space-between;
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    
+    &:first-child {
+      margin-right: 15px;
+    }
+    .left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .lineDescText {
+        margin-left: 15px;
+
+        .lineDescTitle {
+          font-size: 24px;
+          font-weight: 500;
+          margin-bottom: 0;
+        }
+
+        .lineDescTip {
+          font-size: 12px;
+          font-weight: 400;
+          color: #909399;
+        }
+      }
+    }
+  }
+  
+
+}

src/pages/home/component/StatisticsColumn/index.tsx

+import React from 'react';
+import { Row, Col, Card, Space } from 'antd'
+import styles from './index.less';
+import cx from 'classnames';
+import { RightOutlined } from '@ant-design/icons'
+
+import totalIcona3 from '@/asserts/home-icon-10.png'
+import totalCommdity from '@/asserts/home-icon-13.png'
+import totalBrand1 from '@/asserts/home-icon-21.png'
+import totalBrand2 from '@/asserts/home-icon-22.png'
+
+const StatisticsColumn = () => {
+  const data = [
+    {
+      title: '商品统计',
+      value: '124,754',
+      icon: totalCommdity,
+      addIcon: totalIcona3,
+    },
+    {
+      title: '品牌统计',
+      value: '124,754',
+      icon: totalBrand1,
+      addIcon: totalBrand2,
+    }
+  ]
+  return (
+    <Row gutter={[24, 12]}>
+    {
+      data.map((item, key) => {
+        return (
+          <Col span={12} key={key}>
+            <Row>
+              <Col span={24}>
+                <Card
+                  headStyle={{borderBottom:'none'}}
+                  title={item.title} 
+                  bordered={false}
+                >
+                  <div className={styles.commodityTotalTitle}>
+                    <span>全部商品</span>
+                    <p>124,754</p>
+                  </div>
+                  <div className={styles.commodityTotalDesc}>
+                    <div className={styles.container}>
+                      <div className={styles.left}>
+                        <img src={item.icon} alt=""/>
+                        <div className={styles.lineDescText}>
+                          <p className={styles.lineDescTitle}>86</p>
+                          <p className={styles.lineDescTip}>待审核商品</p>
+                        </div>
+                      </div>
+                      <a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
+                    </div>
+                    <div className={styles.container}>
+                      <div className={styles.left}>
+                        <img src={item.addIcon} alt=""/>
+                        <div className={styles.lineDescText}>
+                          <p className={styles.lineDescTitle}>86</p>
+                          <p className={styles.lineDescTip}>待审核商品</p>
+                        </div>
+                      </div>
+                      <a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+          </Col>
+        )
+      })
+    }
+  </Row>
+  )
+}
+
+export default StatisticsColumn
\ No newline at end of file

src/pages/home/component/TodayAdd/index.less

+.homeCard{
+  padding: 24px;
+  border-radius: 3px;
+  background: #fff;
+
+  .body {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40px;
+    .content {
+      .title {
+        font-size: 12px;
+        color: #909399;
+        margin-bottom: 24px;
+      }
+
+      .number {
+        font-size: 32px;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+    .icon{
+      height: 48px;
+      width: 48px;
+    }
+  }
+
+}
\ No newline at end of file

src/pages/home/component/TodayAdd/index.tsx

+import React from 'react';
+import { Row, Col, Card } from 'antd';
+import { CaretUpOutlined } from '@ant-design/icons';
+import StatusTag from '@/components/StatusTag'
+import styles from './index.less';
+// 图标图片集
+import orderIcon from '@/asserts/home-icon-23.png'
+import memberIcon from '@/asserts/home-icon-12.png'
+import productIcon from '@/asserts/home-icon-10.png'
+import brandIcon from '@/asserts/home-icon-11.png'
+
+const TodayAdd: React.FC = () => {
+  const data = [
+    {
+      title: '今日新增订单（元）',
+      number: '102,086.00',
+      icon: orderIcon,
+      percent: '3.4%'
+    },
+    {
+      title: '今日新增会员',
+      number: '45.00',
+      icon: memberIcon,
+      percent: '3.4%'
+    },
+    {
+      title: '今日新增商品',
+      number: '88.00',
+      icon: productIcon,
+      percent: '3.4%'
+    },
+    {
+      title: '今日新增品牌',
+      number: '20',
+      icon: brandIcon,
+      percent: '3.4%'
+    }
+  ]
+  return (
+    <Row gutter={[24, 12]}>
+      {
+        data.map((item, key) => {
+          return (
+            <Col span={6} key={key}>
+              <div className={styles.homeCard}>
+                <div className={styles.body}>
+                  <div className={styles.content}>
+                    <div className={styles.title}>{item.title}</div>
+                    <div className={styles.number}>{item.number}</div>
+                  </div>
+                  <div className={styles.icon}>
+                    <img src={item.icon} alt=""/>
+                  </div>
+                </div>
+                <div className={styles.footer}>
+                  <StatusTag title={<><CaretUpOutlined />{item.percent}</>} type="success" />
+                  <span>&nbsp;&nbsp;相比昨日</span>
+                </div>
+              </div>
+            </Col>
+          )
+        })
+      }
+    </Row>
+  )
+}
+
+export default TodayAdd
\ No newline at end of file

src/pages/home/index.less

@@ -70,7 +70,7 @@
 }
 .sideAdBox{
   height: 100px;
-  margin: 22px 24px 13px;
+  margin: 22px 0px 13px 0;
   border-radius: 5px;
   background-color: #6C9CEB;
   position: relative;
@@ -89,28 +89,28 @@
   }
 }
 
-.commodityTotalTitle{
-  text-align: center;
-  span{
-    font-size: 12px;
-    font-weight: 400;
-    color: #909399;
-  }
-  p{
-    height: 72px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #303133;
-    line-height: 72px;
-  }
-}
-.commodityTotalDesc{
-  display: flex;
-  flex: 1;
-  .aHalfOfWidth {
-    width: 50%;
-  }
-}
+// .commodityTotalTitle{
+//   text-align: center;
+//   span{
+//     font-size: 12px;
+//     font-weight: 400;
+//     color: #909399;
+//   }
+//   p{
+//     height: 72px;
+//     font-size: 24px;
+//     font-weight: 500;
+//     color: #303133;
+//     line-height: 72px;
+//   }
+// }
+// .commodityTotalDesc{
+//   display: flex;
+//   flex: 1;
+//   .aHalfOfWidth {
+//     width: 50%;
+//   }
+// }
 
 // 便签样式
 .notePaperBox{

src/pages/message/index.tsx

@@ -103,7 +103,7 @@ const Message: React.FC<{}> = () => {
             pageSize: pagation.pageSize,
             size: "small",
             showQuickJumper: true,
-            total: dataSource.totalCount,
+            total: dataSource?.totalCount || 0,
             showTotal: showTotal
           }}
           renderItem={item => (