feat: 增加消息Notice组件以及websockit实例

src/components/RightContent/NoticeIcon/NoticeIcon.tsx

@@ -118,7 +118,7 @@ const NoticeIcon: React.FC<NoticeIconProps> & {
 }
 
 NoticeIcon.defaultProps = {
-  emptyImage: '/public/notice_empty.svg'
+  emptyImage: 'https://zhcld.com/static/notice_bell.png'
 }
 
 NoticeIcon.Tab = NoticeList

src/components/RightContent/NoticeIcon/index.tsx

@@ -6,8 +6,9 @@ import { useModel } from 'umi'
 import NoticeIcon from './NoticeIcon'
 import styles from './index.less'
 import dayjs from 'dayjs'
-import { queryNoticeList } from '@/services/login'
+import { queryNoticeList, updateNotice } from '@/services/login'
 import consts from '@/consts'
+import useWebSocketFn from '@/hooks/core/useWebSocketFn'
 
 export type GlobalHeaderRightProps = {
   fetchingNotices?: boolean
@@ -75,6 +76,7 @@ const NoticeIconView = () => {
   const { initialState } = useModel('@@initialState')
   const { currentUser } = initialState || {}
   const [notices, setNotices] = useState([])
+  useWebSocketFn()
   const getNotices = useCallback(async () => {
     const { code = -1, data } = await queryNoticeList()
     if (code === consts.RET_CODE.SUCCESS) {
@@ -88,16 +90,19 @@ const NoticeIconView = () => {
   const noticeData = getNoticeData(notices)
   const unreadMsg = getUnreadData(noticeData || {})
 
-  const changeReadState = (id: string) => {
-    setNotices(
-      notices.map(item => {
-        const notice = { ...item }
-        if (notice.id === id) {
-          notice.isRead = true
-        }
-        return notice
-      })
-    )
+  const changeReadState = async (id: string) => {
+    const { code = -1 } = await updateNotice({ id })
+    if (code === consts.RET_CODE.SUCCESS) {
+      setNotices(
+        notices.map(item => {
+          const notice = { ...item }
+          if (notice.id === id) {
+            notice.isRead = true
+          }
+          return notice
+        })
+      )
+    }
   }
 
   const clearReadState = (title: string, key: string) => {

src/components/RightContent/index.tsx

@@ -60,7 +60,7 @@ const GlobalHeaderRight: React.FC = () => {
       >
         <QuestionCircleOutlined />
       </span> */}
-      <Notify />
+      {/* <Notify /> */}
       <Avatar />
       {REACT_APP_ENV && REACT_APP_ENV !== 'prod' && (
         <span>