feat: 优化通知中心-详情内容体高度

src/pages/Hr/Notification/components/MessageDrawer.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useRef, useState, useEffect } from 'react'
 import MarkDown from 'react-markdown'
 import styles from '@/pages/Hr/Notification/index.less'
 import { Tag, Typography } from 'antd'
@@ -6,10 +6,17 @@ import { useIntl } from 'umi'
 import 'vditor/src/assets/scss/index.scss'
 
 const MessageDrawer = props => {
+  const ref = useRef(null)
+  const [tHeight, setTHeight] = useState(0)
   const {
     item: { title, createTime, content, msgType }
   } = props
   const intl = useIntl()
+  useEffect(() => {
+    if (ref?.current) {
+      setTHeight(ref?.current.offsetTop)
+    }
+  }, [])
   return (
     <div className="px-5 vditor-reset">
       <span className="pt-5 block">
@@ -17,10 +24,13 @@ const MessageDrawer = props => {
       </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 className="w-22 h-[1px] bg-hex-ddd mt-3 mb-5 " />
       <div
-        className={['py-3 px-4 bg-hex-f9f9f9 rounded-md', styles.NotificationCont].join(' ')}
-        style={{ height: 'calc(100vh - 180px)', overflowY: 'auto' }}>
+        ref={ref}
+        className={['py-3 px-4 bg-hex-f9f9f9 rounded-md boxShadow', styles.NotificationCont].join(
+          ' '
+        )}
+        style={{ height: `calc(100vh - ${tHeight}px - 1.2rem)`, overflowY: 'auto' }}>
         <Typography.Paragraph>
           <MarkDown>{content}</MarkDown>
         </Typography.Paragraph>