消息添加增加富文本

video-gen-admin/src/pages/AdminNotificationManager.tsx

@@ -5,6 +5,8 @@ import {
 import {
   BellOutlined, PlusOutlined, DeleteOutlined, SendOutlined, EyeOutlined, TeamOutlined,
 } from '@ant-design/icons';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
 import { getAdminNotifications, createAdminNotification, deleteAdminNotification, getAdminUsers, getNotificationReadUsers } from '../api';
 import { formatDate } from '../utils/formatDate';
 
@@ -131,6 +133,7 @@ const AdminNotificationManager: React.FC = () => {
     },
     {
       title: '内容', dataIndex: 'content', ellipsis: true,
+      render: (v: string) => <div style={{ maxWidth: 300 }} dangerouslySetInnerHTML={{ __html: v }} />,
     },
     {
       title: '类型', dataIndex: 'type', width: 80,
@@ -210,8 +213,8 @@ const AdminNotificationManager: React.FC = () => {
             <Input placeholder="请输入消息标题" size="large" />
           </Form.Item>
           <Form.Item name="content" label="消息内容"
-            rules={[{ required: true, message: '请输入内容' }]}>
-            <Input.TextArea rows={4} placeholder="请输入消息内容" size="large" />
+            rules={[{ required: true, validator: (_, v) => v && v !== '<p><br></p>' ? Promise.resolve() : Promise.reject('请输入内容') }]}>
+            <ReactQuill theme="snow" placeholder="请输入消息内容（支持富文本：加粗、斜体、颜色、链接等)" style={{ height: 180, marginBottom: 40 }} />
           </Form.Item>
           <div style={{ display: 'flex', gap: 16 }}>
             <Form.Item name="type" label="消息类型" style={{ flex: 1 }}