From 9c901447af84f6c4b0d1b2c9f932d60551e88120 Mon Sep 17 00:00:00 2001
From: admin <1297598740@qq.com>
Date: Thu, 29 Jan 2026 13:54:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=91=98?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E5=8F=91=E5=B8=83=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=92=B0=E5=86=99=E5=92=8C=E5=B9=BF=E6=92=AD?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E9=80=9A=E7=9F=A5=E5=B9=B6=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Notifications/NotificationPublish.tsx     | 109 +++++++++++++-----
 1 file changed, 78 insertions(+), 31 deletions(-)

diff --git a/src/pages/Notifications/NotificationPublish.tsx b/src/pages/Notifications/NotificationPublish.tsx
index aa8852a..861d27e 100644
--- a/src/pages/Notifications/NotificationPublish.tsx
+++ b/src/pages/Notifications/NotificationPublish.tsx
@@ -1,15 +1,44 @@
-import React, { useState } from 'react';
-import { Form, Input, Select, Button, message, Card, Alert, Row, Col } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Select, Button, message, Card, Alert, Row, Col, Empty, Spin } from 'antd';
 import { Icon } from '@iconify/react';
 import request from '../../utils/request';
 
 const { TextArea } = Input;
 const { Option } = Select;
 
+interface Announcement {
+    id: number;
+    title: string;
+    content: string;
+    type: string;
+    sent_count: number;
+    created_at: string;
+}
+
 const NotificationPublish: React.FC = () => {
     const [loading, setLoading] = useState(false);
+    const [historyLoading, setHistoryLoading] = useState(false);
+    const [history, setHistory] = useState<Announcement[]>([]);
     const [form] = Form.useForm();
 
+    const fetchHistory = async () => {
+        setHistoryLoading(true);
+        try {
+            const res: any = await request.get('/notifications/announcements?limit=5');
+            if (res && res.announcements) {
+                setHistory(res.announcements);
+            }
+        } catch (error) {
+            console.error('获取历史记录失败:', error);
+        } finally {
+            setHistoryLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchHistory();
+    }, []);
+
     const onFinish = async (values: any) => {
         setLoading(true);
         try {
@@ -19,6 +48,7 @@ const NotificationPublish: React.FC = () => {
                 style: { marginTop: '10vh' }
             });
             form.resetFields();
+            fetchHistory(); // Refresh history after publish
         } catch (error) {
             console.error('发布失败:', error);
         } finally {
@@ -26,6 +56,16 @@ const NotificationPublish: React.FC = () => {
         }
     };
 
+    const formatTime = (timeStr: string) => {
+        const date = new Date(timeStr);
+        return date.toLocaleString('zh-CN', {
+            month: 'numeric',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
     return (
         <div style={{ maxWidth: 1000, margin: '0 auto' }}>
             <div style={{ marginBottom: 32 }}>
@@ -113,7 +153,7 @@ const NotificationPublish: React.FC = () => {
                 <Col lg={10}>
                     <Alert
                         title="安全提示"
-                        description="全员公告将穿透所有用户的勿扰模式（如果适用），发送前请仔细检查文案拼写和逻辑，发布后无法撤回。"
+                        description="全员公告将穿透所有用户的勿扰模式，发布后无法撤回，请反复通过侧边栏历史核对文案。"
                         type="info"
                         showIcon
                         icon={<Icon icon="solar:info-circle-bold-duotone" width="24" />}
@@ -127,36 +167,43 @@ const NotificationPublish: React.FC = () => {
                                 <span>最近发布历史</span>
                             </div>
                         }
+                        extra={<Button type="link" size="small" onClick={fetchHistory} loading={historyLoading}>刷新</Button>}
                         variant="borderless"
                     >
-                        {[
-                            { title: '系统性能优化完成', time: '1小时前', type: 'info' },
-                            { title: '夜间数据库升级', time: '昨天', type: 'alert' },
-                            { title: '欢迎新用户加入', time: '3天前', type: 'system' }
-                        ].map((item, idx) => (
-                            <div key={idx} style={{
-                                padding: '12px 0',
-                                borderBottom: idx === 2 ? 'none' : '1px solid #f1f5f9',
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'center'
-                            }}>
-                                <div>
-                                    <div style={{ fontWeight: 500, fontSize: 14 }}>{item.title}</div>
-                                    <div style={{ fontSize: 12, color: '#94a3b8' }}>{item.time}</div>
-                                </div>
-                                <div style={{
-                                    padding: '2px 8px',
-                                    borderRadius: 4,
-                                    fontSize: 11,
-                                    background: item.type === 'alert' ? '#fee2e2' : item.type === 'info' ? '#dcfce7' : '#e0e7ff',
-                                    color: item.type === 'alert' ? '#ef4444' : item.type === 'info' ? '#10b981' : '#6366f1'
-                                }}>
-                                    {item.type.toUpperCase()}
-                                </div>
-                            </div>
-                        ))}
-                        <Button type="link" block style={{ marginTop: 12 }}>查看更多记录</Button>
+                        <Spin spinning={historyLoading}>
+                            {history.length === 0 ? (
+                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无发布记录" />
+                            ) : (
+                                history.map((item, idx) => (
+                                    <div key={item.id} style={{
+                                        padding: '12px 0',
+                                        borderBottom: idx === history.length - 1 ? 'none' : '1px solid #f1f5f9',
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        alignItems: 'center'
+                                    }}>
+                                        <div style={{ overflow: 'hidden', marginRight: 12 }}>
+                                            <div style={{ fontWeight: 500, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                                {item.title}
+                                            </div>
+                                            <div style={{ fontSize: 12, color: '#94a3b8' }}>
+                                                {formatTime(item.created_at)} · 推送 {item.sent_count} 人
+                                            </div>
+                                        </div>
+                                        <div style={{
+                                            padding: '2px 8px',
+                                            borderRadius: 4,
+                                            fontSize: 10,
+                                            flexShrink: 0,
+                                            background: item.type === 'alert' ? '#fee2e2' : item.type === 'info' ? '#dcfce7' : '#e0e7ff',
+                                            color: item.type === 'alert' ? '#ef4444' : item.type === 'info' ? '#10b981' : '#6366f1'
+                                        }}>
+                                            {item.type.toUpperCase()}
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </Spin>
                     </Card>
                 </Col>
             </Row>