diff --git a/src/components/AnnouncementDetail.jsx b/src/components/AnnouncementDetail.jsx
new file mode 100644
index 0000000..8e90672
--- /dev/null
+++ b/src/components/AnnouncementDetail.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import './AnnouncementDetail.css';
+
+const AnnouncementDetail = () => {
+  const navigate = useNavigate();
+const location = useLocation();
+  const { state } = useLocation();
+  const announcement = state?.announcement;
+  const handleBack = () => {
+    const fromTab = location.state?.fromTab; // 从跳转时传递的 state 中获取
+    if (fromTab) {
+    navigate(`/dashboard/${fromTab}`); // 明确返回对应标签页
+    } else {
+        navigate(-1); // 保底策略
+    }
+}
+  
+    
+
+  if (!announcement) {
+    return (
+      <div className="announcement-container">
+        <button className="back-button" onClick={() => navigate(-1)}>
+          &larr; 返回公告区
+        </button>
+        <div className="error-message">公告加载失败，请返回重试</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="announcement-container">
+      <button className="back-button" onClick={handleBack}>
+        &larr; 返回
+      </button>
+
+      <div className="announcement-detail">
+        <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>
+          </div>
+        </div>
+
+        <div className="announcement-content">
+          {announcement.content.split('\n').map((paragraph, i) => (
+            <p key={i}>{paragraph}</p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AnnouncementDetail;
+
+
+    
\ No newline at end of file