fix: 顶部消息提示

src/layouts/RightContent.tsx

 import React from 'react'
 import { Link, history } from 'umi'
-import { Menu, Dropdown } from 'antd'
-import { CaretDownOutlined } from '@ant-design/icons'
+import { Menu, Dropdown, List, Typography, Badge, Button, Card } from 'antd'
+import { BellOutlined, CaretDownOutlined } from '@ant-design/icons'
 import styles from './index.less'
 import { removeAuth, getAuth } from '@/utils/auth'
 
@@ -11,6 +11,7 @@ const RightContent: React.FC<{}> = (props) => {
     removeAuth()
     history.replace('/login')
   }
+
   const menu = (
     <Menu>
       <Menu.Item>
@@ -24,8 +25,46 @@ const RightContent: React.FC<{}> = (props) => {
 
   const userInfo = getAuth()
 
+
+  const data = [
+    'Racing car sprays burning fuel into crowd.',
+    'Japanese princess to wed commoner.',
+    'Australian walks 100km afterrafter outback crash.',
+    'Man charged over missing wedding girl.',
+    'Los Angeles battles huge wildfires.',
+  ];
+
+  const menuMessage = (
+    <div title="消息列表" className={styles.noticeBox}>
+      <h3>消息列表</h3>
+      <List
+        itemLayout="horizontal"
+        dataSource={data}
+        footer={<p className={styles.noticeFooter}>
+          <span>清空通知</span>
+          <span>查看更多</span>
+        </p>}
+        renderItem={item => (
+          <List.Item>
+            {item}
+          </List.Item>
+        )}
+      />
+    </div>
+  )
+
   return <div className={styles.lxLayoutRight}>
     <Link to="/home" className={styles.lxLink}>返回首页</Link>
+    <Dropdown overlay={menuMessage} trigger={['click']}>
+      <a
+        href=""
+        rel="noopener noreferrer"
+        className={styles.topMessage}
+      >
+        <BellOutlined />
+        <span className={styles.push}></span>
+      </a>
+    </Dropdown>
     <Dropdown overlay={menu}>
       <div className={styles.avatarWrap}>
         <div className={styles.avatar}></div>

src/layouts/index.less

@@ -29,7 +29,6 @@
       margin-right: 8px;
     }
   }
-
 }
 
 .lx-nav-link {
@@ -80,4 +79,72 @@
   width: 100%;
   flex: 1;
   padding: 24px 0;
+}
+
+.messageDropdown{
+  width: 336px;
+}
+
+.noticeBox{
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 6px 16px -8px rgba(0,0,0,.08), 0 9px 28px 0 rgba(0,0,0,.05), 0 12px 48px 16px rgba(0,0,0,.03);
+  :global{
+    .ant-list-footer{
+      padding: 0;
+    }
+    .ant-list-item{
+      padding: 12px 24px;
+    }
+  }
+  h4{
+    padding-left: 24px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+}
+
+.topMessage{
+  color: rgba(255,255,255,.6);
+  margin-right: 30px;
+  position: relative;
+  :global{
+    .anticon{
+      font-size: 18px;
+    }
+  }
+  .push{
+    display: block;
+    position: absolute;
+    top: 0.9rem;
+    right: 15px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #04ff2f;
+    cursor: pointer;
+    box-shadow: 0 0 0 rgba(4, 255, 47, 0.9);
+    animation: pulse 2s infinite;
+    animation-duration: .9s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
+  }
+}
+
+.noticeFooter{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  border-top: 1px solid #f0f0f0; 
+  text-align: center; 
+  height: 46px;
+  line-height: 46px;
+  font-size: 14px;
+  span{
+    flex: 0 0 50%;
+    &:last-child{
+      border-left: 1px solid #f0f0f0;   
+    }
+    cursor: pointer;
+  }
 }
\ No newline at end of file

src/pages/home/index.tsx

 import React, { useState, useEffect } from 'react'
-import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Button, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge } from 'antd'
+import { Card, Space, Radio, Row, Col, List, Badge } from 'antd'
 import cx from 'classnames'
 
 import styles from './index.less'

src/pages/message/addMessage.tsx

@@ -42,6 +42,12 @@ const AddMessage: React.FC<{}> = () => {
                 type: 'string',
                 title: '发送对象',
                 required: true,
+                enum: [
+                  { label: 'One', value: '1' },
+                  { label: 'Two', value: '2' },
+                  { label: 'Three', value: '3' },
+                  { label: 'Four', value: '4' }
+                ],
               },
               remark: {
                 type: 'textarea',
@@ -62,7 +68,6 @@ const AddMessage: React.FC<{}> = () => {
               role123: {
                 type: 'string',
                 title: '消息跳转链接',
-                required: true,
               },
               remark123: {
                 type: 'textarea',

src/pages/message/index.tsx

@@ -11,9 +11,15 @@ import { PlusOutlined } from '@ant-design/icons'
 import messageIcon1 from '../../asserts/home-icon-1.png'
 import messageIcon2 from '../../asserts/home-icon-2.png'
 import messageIcon3 from '../../asserts/home-icon-8.png'
+import { PublicApi } from '@/services/api'
 
 
 const Message: React.FC<{}> = () => {
+  const [dataSource, setDataSource] = useState<any>()
+  const [pagation, setPagation] = useState({
+    current: 1,
+    pageSize: 10,
+  })
 
   const data = [
     {
@@ -54,6 +60,16 @@ const Message: React.FC<{}> = () => {
     },
   ];
 
+  useEffect(() => {
+    // @ts-ignore
+    PublicApi.getManageMessagePlatformPage(pagation).then(res => {
+      console.log(res)
+      if(res.code===1000){
+        setDataSource(res.data)
+      }
+    })
+  }, [])
+
   const renderMessage = (data) => {
 
     return (
@@ -83,10 +99,11 @@ const Message: React.FC<{}> = () => {
             onChange: page => {
               console.log(page);
             },
-            pageSize: 10,
+            current: pagation.current,
+            pageSize: pagation.pageSize,
             size: "small",
             showQuickJumper: true,
-            total: 4,
+            total: dataSource.totalCount,
             showTotal: showTotal
           }}
           renderItem={item => (