cldV2react/src/pages/Hr/Notification/components/MessageDetail.jsx

import styles from '@/pages/Hr/Notification/index.less'
import { Drawer, Tag, Typography } from 'antd'
import { useIntl } from '@umijs/max'
import MarkDown from 'react-markdown'

const MessageDetail = props => {
  const { item: { id, title, createTime, content, msgType } = {}, ...otherProps } = props
  const intl = useIntl()
  if (!id) return null
  return (
    <Drawer {...otherProps} className="zh-drawer" getContainer={() => document.getElementById('root')}>
      <div className="px-5 vditor-reset h-full">
        <div className="max-h-20vh">
          <span className="pt-5 block">
            <Tag color="purple">{intl.formatMessage({ id: `component.globalHeader.${msgType}` })}</Tag>
          </span>
          <h1 className={['text-xl pr-6 mt-3', styles.NotificationCont].join(' ')}>{title}</h1>
          <span className="text-hex-aaa">{createTime}</span>
          <div className="w-22 h-[1px] bg-hex-ddd mt-3 mb-5 " />
        </div>
        <div
          className={[
            'overflow-y-auto max-h-80vh py-3 px-4 bg-hex-f9f9f9 rounded-md boxShadow',
            styles.NotificationCont
          ].join(' ')}
        >
          <Typography.Paragraph>
            <MarkDown>{content}</MarkDown>
          </Typography.Paragraph>
        </div>
      </div>
    </Drawer>
  )
}

export default MessageDetail