feat: 新建消息通知-内容表单项使用富文本替换

package.json

@@ -50,7 +50,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.5.0",
     "@ant-design/pro-descriptions": "^1.6.8",
-    "@ant-design/pro-form": "^1.18.3",
+    "@ant-design/pro-form": "1.43.2",
     "@ant-design/pro-layout": "^6.15.3",
     "@ant-design/pro-table": "^2.30.8",
     "@icon-park/react": "^1.3.3",
@@ -60,6 +60,7 @@
     "antd": "^4.14.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
+    "markdown-it": "^12.2.0",
     "moment": "^2.25.3",
     "omit.js": "^2.0.2",
     "rc-queue-anim": "^1.8.5",
@@ -67,6 +68,7 @@
     "react-dev-inspector": "^1.1.1",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.0.4",
+    "react-markdown-editor-lite": "^1.3.1",
     "umi": "3.5.3"
   },
   "devDependencies": {

src/pages/Business/Notification/components/RighEditor.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import MarkdownIt from 'markdown-it'
+import MdEditor from 'react-markdown-editor-lite'
+// 导入编辑器的样式
+import 'react-markdown-editor-lite/lib/index.css'
+
+const mdParser = new MarkdownIt()
+
+const RighEditor = ({ value, onChange }) => {
+  const [cValue, setValue] = useState(value)
+  // 完成！
+  function handleEditorChange({ text }) {
+    setValue(text)
+    onChange(text)
+  }
+  return (
+    <MdEditor
+      style={{ height: '300px' }}
+      value={cValue}
+      renderHTML={text => mdParser.render(text)}
+      onChange={handleEditorChange}
+    />
+  )
+}
+export default RighEditor

src/pages/Business/Notification/index.tsx

@@ -1,12 +1,11 @@
 import React, { useRef } from 'react'
-import { Button, message } from 'antd'
+import { Button, message, Form } from 'antd'
 import {
   ModalForm,
   ProFormDependency,
   ProFormRadio,
   ProFormSelect,
-  ProFormText,
-  ProFormTextArea
+  ProFormText
 } from '@ant-design/pro-form'
 import type { ProFormColumnsType } from '@ant-design/pro-form'
 import ProTable from '@ant-design/pro-table'
@@ -17,6 +16,7 @@ import { queryNoticeList, sendNotice } from '@/services/user/api'
 import consts from '@/utils/consts'
 import { PlusOutlined } from '@ant-design/icons'
 import useWebSocketFn, { cmdType } from '@/hooks/core/useWebSocketFn'
+import RighEditor from './components/RighEditor'
 
 export enum msgTypeEnum {
   Notification = 'notification',
@@ -90,6 +90,7 @@ const Notification: React.FC = () => {
             <div>通知推送</div>
           </div> */}
           <ProTable
+            isKeyPressSubmit
             toolbar={{
               title: '通知推送'
             }}
@@ -100,6 +101,7 @@ const Notification: React.FC = () => {
             toolbar={{
               actions: [
                 <ModalForm
+                  isKeyPressSubmit={false}
                   key="modalForm"
                   trigger={
                     <Button type="primary">
@@ -118,8 +120,18 @@ const Notification: React.FC = () => {
                       return false
                     }
                   }}>
-                  <ProFormText label="标题" name="title" required />
-                  <ProFormTextArea label="内容" name="content" required />
+                  <ProFormText
+                    label="标题"
+                    name="title"
+                    rules={[{ required: true, message: '请输入标题' }]}
+                  />
+                  {/* <ProFormTextArea label="内容" name="content" required /> */}
+                  <Form.Item
+                    label="内容"
+                    name="content"
+                    rules={[{ required: true, message: '请输入通知内容' }]}>
+                    <RighEditor />
+                  </Form.Item>
                   <ProFormRadio.Group
                     label="类型"
                     name="msgType"
@@ -134,6 +146,7 @@ const Notification: React.FC = () => {
                         <ProFormSelect
                           name="media"
                           label="通知类型"
+                          rules={[{ required: true, message: '请选择类型' }]}
                           options={[
                             { label: '版本更新', value: mediaType.VersionUpdate },
                             { label: '节假通知', value: mediaType.HolidayNotice }
@@ -147,6 +160,7 @@ const Notification: React.FC = () => {
                       msgType === msgTypeEnum.Notification && media === mediaType.VersionUpdate ? (
                         <ProFormRadio.Group
                           name="refresh"
+                          rules={[{ required: true, message: '请选择刷新机制' }]}
                           options={[
                             { label: '手动刷新', value: 0 },
                             { label: '强制刷新', value: 1 }