diff --git a/src/components/AnnouncementDetail.jsx b/src/components/AnnouncementDetail.jsx
index 8e90672..ac3b92c 100644
--- a/src/components/AnnouncementDetail.jsx
+++ b/src/components/AnnouncementDetail.jsx
@@ -1,12 +1,19 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { getAnnouncementDetail } from '../api/announcement';
+import { message } from 'antd';
 import './AnnouncementDetail.css';
 
 const AnnouncementDetail = () => {
   const navigate = useNavigate();
-const location = useLocation();
+  const { id } = useParams();
+  const [announcement, setAnnouncement] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const location = useLocation();
   const { state } = useLocation();
-  const announcement = state?.announcement;
+  
+  
   const handleBack = () => {
     const fromTab = location.state?.fromTab; // 从跳转时传递的 state 中获取
     if (fromTab) {
@@ -15,16 +22,36 @@
         navigate(-1); // 保底策略
     }
 }
+  useEffect(() => {
+    const fetchAnnouncement = async () => {
+      try {
+        setLoading(true);
+        const response = await getAnnouncementDetail(id);
+        if (response.data.code === 200) {
+          setAnnouncement(response.data.data.announcement);
+        } else {
+          setError(response.data.message || '获取公告详情失败');
+        }
+      } catch (err) {
+        setError('获取公告详情失败');
+        message.error('获取公告详情失败');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAnnouncement();
+  }, [id]);
   
     
 
-  if (!announcement) {
+  if (error || !announcement) {
     return (
       <div className="announcement-container">
-        <button className="back-button" onClick={() => navigate(-1)}>
-          &larr; 返回公告区
+        <button className="back-button" onClick={handleBack}>
+          &larr; 返回
         </button>
-        <div className="error-message">公告加载失败，请返回重试</div>
+        <div className="error-message">{error || '公告不存在'}</div>
       </div>
     );
   }
@@ -39,9 +66,7 @@
         <div className="announcement-header">
           <h1>{announcement.title}</h1>
           <div className="announcement-meta">
-            <span className="category-badge">{announcement.category}</span>
-            <span>发布人：{announcement.author}</span>
-            <span>发布日期：{announcement.date}</span>
+            <span>发布日期：{announcement.createTime}</span>
           </div>
         </div>