diff --git a/src/components/Personal/Notice.jsx b/src/components/Personal/Notice.jsx
index 55bc955..05198f9 100644
--- a/src/components/Personal/Notice.jsx
+++ b/src/components/Personal/Notice.jsx
@@ -1,57 +1,106 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { notificationApi } from '../../api/notification';
 import './personalSubpage.css';
 
 const Notice = ({ onLogout }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  // 模拟数据
-  const [notices] = React.useState([
-    { 
-      id: 1, 
-      title: '积分奖励到账', 
-      content: '您上传的资源《盗梦空间》获得100积分奖励',
-      date: '2023-10-20',
-      read: false
-    },
-    { 
-      id: 2, 
-      title: '系统通知', 
-      content: '服务器将于今晚2:00-4:00进行维护',
-      date: '2023-10-18',
-      read: true
+  const [notices, setNotices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // 获取当前用户ID（根据你的实际应用获取方式）
+  const userId = localStorage.getItem('username') || 'default-user-id';
+
+  // 获取通知列表
+  const fetchNotifications = async () => {
+    try {
+      setLoading(true);
+      const response = await notificationApi.getNotifications(userId);
+      setNotices(response.data.notifications || []);
+    } catch (err) {
+      setError('获取通知失败，请稍后重试');
+      console.error(err);
+    } finally {
+      setLoading(false);
     }
-  ]);
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+  }, [userId]);
 
   const handleBack = () => {
-    // 返回个人中心，并携带来源标记
     navigate('/personal', { 
       state: { 
-        fromSubpage: true,  // 标记来自子页面
-        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+        fromSubpage: true,
+        dashboardTab: location.state?.dashboardTab
       },
-      replace: true  // 替换当前历史记录
+      replace: true
     });
   };
 
+  // 标记为已读处理
+  const handleMarkAsRead = async (id) => {
+    try {
+      const result = await notificationApi.markNotificationAsRead(id);
+      
+      if (result.success) {
+        // 使用后端返回的更新后通知替换本地状态
+        setNotices(prevNotices => 
+          prevNotices.map(notice => 
+            notice.id === id ? result.notification : notice
+          )
+        );
+      } else {
+        setError(result.message || '标记为已读失败');
+      }
+    } catch (err) {
+      console.error('标记为已读失败:', err);
+      setError('标记为已读失败，请稍后重试');
+    }
+  };
+
+  const handleItemClick = (notice) => {
+    if (!notice.isRead) {
+      handleMarkAsRead(notice.id);
+    }
+    // 这里可以添加其他点击逻辑，比如展开详情等
+  };
+
   return (
     <div className="subpage-container">
-      <button className="back-button" onClick={(handleBack)}>
-        ← 返回个人中心
+      <button className="back-button" onClick={handleBack}>
+      返回个人中心
       </button>
 
       <h2 className="page-title">消息通知</h2>
       
+      {loading && <div className="loading-message">加载中...</div>}
+      {error && <div className="error-message">{error}</div>}
+      
       <div className="notice-list">
-        {notices.map(notice => (
-          <div key={notice.id} className={`list-item ${!notice.read ? 'unread' : ''}`}>
-            <div className="notice-header">
-              <h3>{notice.title}</h3>
-              <span className="notice-date">{notice.date}</span>
+        {notices.length === 0 && !loading ? (
+          <div className="empty-notice">暂无通知</div>
+        ) : (
+          notices.map(notice => (
+            <div 
+              key={notice.id} 
+              className={`list-item ${!notice.isRead ? 'unread' : ''}`}
+              onClick={() => handleItemClick(notice)}
+            >
+              <div className="notice-header">
+                <h3>{notice.title}</h3>
+                <span className="notice-date">
+                  {new Date(notice.date).toLocaleDateString()}
+                  {!notice.isRead && <span className="unread-badge">未读</span>}
+                </span>
+              </div>
+              <p className="notice-content">{notice.content}</p>
             </div>
-            <p className="notice-content">{notice.content}</p>
-          </div>
-        ))}
+          ))
+        )}
       </div>
     </div>
   );