feat: 消息中心新建通知

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

@@ -1,10 +1,27 @@
 import React from 'react'
+import MarkdownIt from 'markdown-it'
+import ModalDragForm from '@/components/Modal/src/components/ModalDragForm'
+import MdEditor from 'react-markdown-editor-lite'
+import 'react-markdown-editor-lite/lib/index.css'
 
-const RighEditor = () => {
+const mdParser = new MarkdownIt()
+
+const RighEditor = ({ value, onChange }) => {
+  const [cValue, setValue] = useState(value)
+  // 完成！
+  function handleEditorChange({ text, html }) {
+    setValue(text)
+    onChange(JSON.stringify(html))
+  }
   return (
-    <div>
-      <span>编辑</span>
-    </div>
+    <ModalDragForm>
+      <MdEditor
+        style={{ height: '300px' }}
+        value={cValue}
+        renderHTML={text => mdParser.render(text)}
+        onChange={handleEditorChange}
+      />
+    </ModalDragForm>
   )
 }
 

src/pages/Hr/Notification/index.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { List, Avatar, Tag, Skeleton, Divider } from 'antd'
+import { List, Avatar, Tag, Skeleton, Divider, Button } from 'antd'
+import { Plus } from '@icon-park/react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { queryMessage } from '@/services/staff'
 import consts from '@/consts'
@@ -41,8 +42,14 @@ const Notification = () => {
     initData({ current: state.current + 1 })
   }
   return (
-    <div className="bg-hex-ffffff rounded-md px-6 pb-6">
+    <div className="bg-hex-ffffff rounded-md px-6 pb-6 relative">
       <h4 className="py-4 text-xl">通知中心</h4>
+      <div className="absolute top-4 right-6">
+        <Button type="primary">
+          <Plus className="mr-1" />
+          新建通知
+        </Button>
+      </div>
       <div id="scrollableDiv" style={{ height: 'calc(100vh - 125px - 3.5rem)', overflowY: 'auto' }}>
         <InfiniteScroll
           dataLength={state.total}
@@ -50,8 +57,7 @@ const Notification = () => {
           hasMore={state.hasMore}
           loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
           endMessage={<Divider plain>别再滚啦，已是尽头</Divider>}
-          scrollableTarget="scrollableDiv"
-        >
+          scrollableTarget="scrollableDiv">
           <List
             itemLayout="horizontal"
             // pagination={{ pageSize: 5 }}