import React , { useEffect } from 'react' ; import { Alert } from 'antd' ; import { get } from 'lodash-es' ; import { NotificationFilled } from '@ant-design/icons' ; import cx from 'classnames' ; import styles from './Announcement.module.less' ; type Props = { message : React . ReactNode ; localStorageId : string ; bannerId : string ; style ? : React . CSSProperties ; } ; description const Announcement = ( { message , bannerId , localStorageId , ... alertProps } ) => { const isBrowser = typeof window !== 'undefined' ; /** 公告 id 更新，更新下本地缓存 */ useEffect ( ( ) => { try { const item = ( isBrowser && localStorage . getItem ( localStorageId ) ) || '{}' ; if ( get ( JSON . parse ( item ) , [ bannerId ] ) !== false && isBrowser ) { localStorage . setItem ( localStorageId , JSON . stringify ( { [ bannerId ] : true } ) ) ; } } catch ( e ) { console . error ( e ) ; } } , [ bannerId ] ) ; return get ( JSON . parse ( ( isBrowser && localStorage . getItem ( localStorageId ) ) || '{}' ) , [ bannerId ] ) ? ( < Alert message = { message } type = "info" showIcon icon = { < NotificationFilled style = { { height : '16px' , color : '#4776E8' } } />} closable className={cx('banner-announcement', styles.bannerAnnouncement)} onClose={() => { if ( isBrowser ) { localStorage . setItem ( localStorageId , JSON . stringify ( { [ bannerId ] : false } ) ) ; } } } { ... alertProps } />) : null; } ; export default Announcement ;