feat: 通知中心详情

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import MarkDown from 'react-markdown'
+import styles from '@/pages/Hr/Notification/index.less'
+
+const MessageDrawer = props => {
+  const {
+    item: { title, createTime, content }
+  } = props
+  return (
+    <div className="px-5">
+      <h1 className="pt-4 text-xl pr-6">{title}</h1>
+      <div className="text-blueGray-500 py-1">{createTime}</div>
+      <div
+        className={['py-3', styles.NotificationCont].join(' ')}
+        style={{ height: 'calc(100vh - 120px)', overflowY: 'auto' }}>
+        <MarkDown>{content}</MarkDown>
+      </div>
+    </div>
+  )
+}
+
+export default MessageDrawer

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

@@ -16,7 +16,7 @@ const RighEditor = ({ value, onChange }) => {
     //   renderHTML={text => mdParser.render(text)}
     //   onChange={handleEditorChange}
     // />
-    <SimpleMDE value={cValue} onChange={handleEditorChange} style={{ height: '350px' }} />
+    <SimpleMDE value={cValue} onChange={handleEditorChange} />
   )
 }
 

src/pages/Hr/Notification/index.jsx

@@ -1,14 +1,16 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { List, Avatar, Tag, Skeleton, Divider, message } from 'antd'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { queryMessageList, sendMessage } from '@/services/staff'
 import AddMessage from './components/AddMessage'
 import consts from '@/consts'
 import { useRequest } from 'umi'
+import { useModal } from '@/components/Modal'
+import MessageDrawer from './components/MessageDrawer'
 // import MarkDown from 'react-markdown'
 
 const Notification = () => {
-  const tRef = useRef(null)
+  const { toggleDrawer, setDrawerProps } = useModal()
   // const { sendMsg } = useWebSocketFn()
   const msgTypeEnum = {
     message: '通知',
@@ -61,6 +63,20 @@ const Notification = () => {
     }
   })
 
+  // 展示drawer
+  const showMessageDrawer = item => {
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh'
+        // overflowY: 'hidden'
+      },
+      children: <MessageDrawer item={item} />
+    })
+    toggleDrawer()
+  }
+
   return (
     <div className="bg-hex-ffffff rounded-md px-6 pb-6">
       <div className="flex justify-between items-center">
@@ -83,7 +99,13 @@ const Notification = () => {
               <List.Item key={item.id}>
                 <List.Item.Meta
                   avatar={<Avatar src={item.avatar} />}
-                  title={<a href="#">{item.title}</a>}
+                  title={
+                    <span
+                      className="cursor-pointer text-primary"
+                      onClick={() => showMessageDrawer(item)}>
+                      {item.title}
+                    </span>
+                  }
                   description={
                     <div className="mb-1">
                       <Tag color="purple">{msgTypeEnum[item.msgType]}</Tag> '发布于',

src/pages/Hr/Notification/index.less

@@ -0,0 +1,7 @@
+.NotificationCont {
+  ul,
+  ol {
+    padding-left: 1rem;
+    list-style: decimal;
+  }
+}