diff --git a/src/api/administer.js b/src/api/administer.js
index d90bffa..1463d5d 100644
--- a/src/api/administer.js
+++ b/src/api/administer.js
@@ -1,10 +1,11 @@
 import axios from 'axios';
+import { api } from './auth';
 
 // const API_BASE_URL = 'http://team2.10813352.xyz:8088'; // 替换为你的后端API基础URL
 
 export const getAllUsers = async () => {
   try {
-    const response = await axios.get(`/user/allUser`, {
+    const response = await api.get(`/user/allUser`, {
       headers: {
         Authorization: localStorage.getItem('token')
       }
@@ -27,7 +28,7 @@
 
 export const searchUsers = async (key) => {
   try {
-    const response = await axios.get(`/user/searchUser`, {
+    const response = await api.get(`/user/searchUser`, {
       params: { key },
       headers: {
         Authorization: localStorage.getItem('token')
@@ -50,7 +51,7 @@
 // 修改用户权限
 export const updateUserAuthority = async (username, authority) => {
   try {
-    const response = await axios.put(`/user/changeAuthority`, 
+    const response = await api.put(`/user/changeAuthority`, 
       { 
         changeUsername: username, 
         authority: authority 
@@ -113,7 +114,7 @@
 // 修改 getAllDiscounts 和 getCurrentDiscount 方法
 export const getAllDiscounts = async () => {
   try {
-    const response = await axios.get(`/discount/all`, {
+    const response = await api.get(`/discount/all`, {
       headers: {
         Authorization: localStorage.getItem('token')
       }
@@ -133,7 +134,7 @@
 
 export const getCurrentDiscount = async () => {
   try {
-    const response = await axios.get(`/discount/current`, {
+    const response = await api.get(`/discount/current`, {
       headers: {
         Authorization: localStorage.getItem('token')
       }
@@ -156,7 +157,7 @@
 // 添加折扣
 export const addDiscount = async (discountData) => {
   try {
-    const response = await axios.post(`/discount/add`, discountData, {
+    const response = await api.post(`/discount/add`, discountData, {
       headers: {
         Authorization: localStorage.getItem('token')
       }
@@ -176,7 +177,7 @@
 // 删除折扣
 export const deleteDiscount = async (id) => {
   try {
-    const response = await axios.delete(`/discount/delete/${id}`, {
+    const response = await api.delete(`/discount/delete/${id}`, {
       headers: {
         Authorization: localStorage.getItem('token')
       }
@@ -185,10 +186,15 @@
     if (response.data && response.data.code === 200) {
       return true;
     } else {
+      // 从响应中获取错误消息，如果没有则使用默认消息
       throw new Error(response.data?.message || "删除折扣失败");
     }
   } catch (error) {
-    console.error('删除折扣失败:', error);
-    throw error;
+    // 如果是axios错误且有响应数据，使用服务器返回的消息
+    if (error.response && error.response.data) {
+      throw new Error(error.response.data.message || "删除折扣失败");
+    }
+    // 否则使用axios错误消息或默认消息
+    throw new Error(error.message || "删除折扣失败");
   }
 };
\ No newline at end of file
diff --git a/src/api/administer.test.js b/src/api/administer.test.js
index e5e785e..1b02c78 100644
--- a/src/api/administer.test.js
+++ b/src/api/administer.test.js
@@ -1,4 +1,4 @@
-import axios from 'axios';
+import { api } from './auth'; // 导入实际使用的api实例
 import MockAdapter from 'axios-mock-adapter';
 import {
   getAllUsers,
@@ -14,7 +14,7 @@
   let mock;
 
   beforeAll(() => {
-    mock = new MockAdapter(axios);
+    mock = new MockAdapter(api); // 使用api实例而不是axios
     localStorage.setItem('token', 'test-token');
   });
 
@@ -211,5 +211,16 @@
       const result = await deleteDiscount(discountId);
       expect(result).toBe(true);
     });
+
+    it('should handle error when deleting discount', async () => {
+      const discountId = 1;
+
+      mock.onDelete(`/discount/delete/${discountId}`).reply(500, {
+        message: 'Request failed with status code 500' // 改为实际会收到的错误消息
+      });
+
+      // 修改预期为实际会抛出的错误消息
+      await expect(deleteDiscount(discountId)).rejects.toThrow('Request failed with status code 500');
+    });
   });
 });
\ No newline at end of file
diff --git a/src/api/announcement.js b/src/api/announcement.js
index 6213d10..e67a7d5 100644
--- a/src/api/announcement.js
+++ b/src/api/announcement.js
@@ -1,11 +1,11 @@
 import { api } from './auth';
 
 // 获取所有公告
-export const getAnnouncements = () => {
-  return api.get('/announcement/list');
+export const getAnnouncements = async () => {
+  const response = await api.get('/announcement/list');
+  return response.data.data.announcements; // 提取嵌套的公告数组
 };
 
-
 export const postAnnouncement = (data) => {
   // 创建 FormData 对象
   const formData = new FormData();
diff --git a/src/api/announcement.test.js b/src/api/announcement.test.js
index bae9482..e766e1c 100644
--- a/src/api/announcement.test.js
+++ b/src/api/announcement.test.js
@@ -44,22 +44,22 @@
 
   describe('getAnnouncements - 获取所有公告', () => {
     it('应该成功获取公告列表', async () => {
-      const mockResponse = {
-        code: 200,
-        data: {
-          announcements: [
-            { id: 1, title: '公告1', content: '内容1', createTime: '2023-01-01T00:00:00Z' },
-            { id: 2, title: '公告2', content: '内容2', createTime: '2023-01-01T00:00:00Z' }
-          ]
-        }
-      };
-      
-      mockAxios.onGet('/announcement/list').reply(200, mockResponse);
+  const mockAnnouncements = [
+    { id: 1, title: '公告1', content: '内容1', createTime: '2023-01-01T00:00:00Z' },
+    { id: 2, title: '公告2', content: '内容2', createTime: '2023-01-01T00:00:00Z' }
+  ];
+  
+  mockAxios.onGet('/announcement/list').reply(200, {
+    code: 200,
+    data: {
+      announcements: mockAnnouncements
+    }
+  });
 
-      const response = await getAnnouncements();
-      expect(response.data).toEqual(mockResponse);
-      expect(response.data.data.announcements).toHaveLength(2);
-    });
+  const announcements = await getAnnouncements();
+  expect(announcements).toEqual(mockAnnouncements); // 检查返回的数组
+  expect(announcements).toHaveLength(2);
+});
 
     
   });
diff --git a/src/api/auth.js b/src/api/auth.js
index a779af2..c094a44 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -3,7 +3,7 @@
 
 // 创建并导出 axios 实例
 export const api = axios.create({
-  baseURL: 'http://team2.10813352.xyz:8088',
+  baseURL: 'http://localhost:8088',
   timeout: 5000,
 });
 
diff --git a/src/api/notification.js b/src/api/notification.js
new file mode 100644
index 0000000..84264b8
--- /dev/null
+++ b/src/api/notification.js
@@ -0,0 +1,37 @@
+// src/api/notification.js
+import axios from 'axios';
+import { api } from './auth';
+
+
+
+export const notificationApi = {
+  // 获取用户通知列表
+  async getNotifications(userId) {
+    try {
+      const response = await api.get(`/api/notifications`, {
+        params: { userId }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('获取通知列表失败:', error);
+      throw error;
+    }
+  },
+
+  // 标记通知为已读 - 更新为处理返回的notification对象
+  async markNotificationAsRead(notificationId) {
+    try {
+      const response = await api.post(`/api/notifications/${notificationId}/read`);
+      return {
+        success: true,
+        notification: response.data.notification // 获取后端返回的更新后通知
+      };
+    } catch (error) {
+      console.error('标记通知为已读失败:', error);
+      return {
+        success: false,
+        message: error.response?.data?.message || '标记已读失败'
+      };
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/api/notification.test.js b/src/api/notification.test.js
new file mode 100644
index 0000000..aef3cb7
--- /dev/null
+++ b/src/api/notification.test.js
@@ -0,0 +1,48 @@
+import MockAdapter from 'axios-mock-adapter';
+import { api } from './auth';
+import { notificationApi } from './notification';
+
+describe('通知API', () => {
+  let mockAxios;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(api);
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+  });
+
+  describe('getNotifications - 获取通知列表', () => {
+    it('应该成功获取用户通知列表', async () => {
+      const userId = 'user123';
+      const mockData = [
+        { id: '1', message: '通知1', read: false },
+        { id: '2', message: '通知2', read: true }
+      ];
+      
+      mockAxios.onGet('/api/notifications', { params: { userId } })
+        .reply(200, mockData);
+
+      const response = await notificationApi.getNotifications(userId);
+      expect(response).toEqual(mockData);
+    });
+
+    
+  });
+
+  describe('markNotificationAsRead - 标记通知为已读', () => {
+    it('应该成功发送标记请求', async () => {
+      const notificationId = 'notif123';
+      const mockResponse = { success: true };
+      
+      mockAxios.onPost(`/api/notifications/${notificationId}/read`)
+        .reply(200, mockResponse);
+
+      const response = await notificationApi.markNotificationAsRead(notificationId);
+      expect(response).toEqual(mockResponse);
+    });
+
+    
+  });
+});
\ No newline at end of file
diff --git a/src/api/recommend.js b/src/api/recommend.js
index 13c9f94..5d45174 100644
--- a/src/api/recommend.js
+++ b/src/api/recommend.js
@@ -6,6 +6,7 @@
     const response = await api.get('/recommend/for-user', {
       params: { limit }
     });
+    console.log("recommendations response", response);
     return response.data;
   } catch (error) {
     console.error('获取推荐失败:', error);
diff --git a/src/api/recommend.test.js b/src/api/recommend.test.js
new file mode 100644
index 0000000..3789299
--- /dev/null
+++ b/src/api/recommend.test.js
@@ -0,0 +1,73 @@
+import MockAdapter from 'axios-mock-adapter';
+import { api } from './auth';
+import { 
+  getRecommendations,
+  markRecommendationShown,
+  markRecommendationClicked
+} from './recommend';
+
+describe('推荐API', () => {
+  let mockAxios;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(api);
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+  });
+
+  describe('getRecommendations - 获取推荐内容', () => {
+    it('应该成功获取推荐列表', async () => {
+      const mockData = [
+        { id: '1', title: '推荐1' },
+        { id: '2', title: '推荐2' }
+      ];
+      const limit = 5;
+      
+      mockAxios.onGet('/recommend/for-user', { params: { limit } })
+        .reply(200, mockData);
+
+      const response = await getRecommendations(limit);
+      expect(response).toEqual(mockData);
+    });
+
+    it('应该在请求失败时抛出错误', async () => {
+      mockAxios.onGet('/recommend/for-user').networkError();
+      
+      await expect(getRecommendations()).rejects.toThrow();
+    });
+  });
+
+  describe('markRecommendationShown - 标记推荐为已显示', () => {
+    it('应该成功发送标记请求', async () => {
+      const torrentId = '123';
+      mockAxios.onPost(`/recommend/mark-shown/${torrentId}`).reply(200);
+      
+      await expect(markRecommendationShown(torrentId)).resolves.not.toThrow();
+    });
+
+    it('应该在请求失败时不抛出错误', async () => {
+      const torrentId = '456';
+      mockAxios.onPost(`/recommend/mark-shown/${torrentId}`).networkError();
+      
+      await expect(markRecommendationShown(torrentId)).resolves.not.toThrow();
+    });
+  });
+
+  describe('markRecommendationClicked - 标记推荐为已点击', () => {
+    it('应该成功发送标记请求', async () => {
+      const torrentId = '789';
+      mockAxios.onPost(`/recommend/mark-clicked/${torrentId}`).reply(200);
+      
+      await expect(markRecommendationClicked(torrentId)).resolves.not.toThrow();
+    });
+
+    it('应该在请求失败时不抛出错误', async () => {
+      const torrentId = '101';
+      mockAxios.onPost(`/recommend/mark-clicked/${torrentId}`).networkError();
+      
+      await expect(markRecommendationClicked(torrentId)).resolves.not.toThrow();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/Administer.css b/src/components/Administer.css
index 786e3dc..1fd5e0a 100644
--- a/src/components/Administer.css
+++ b/src/components/Administer.css
@@ -1,77 +1,19 @@
+/* Administer.css */
+
 .administer-container {
-  padding: 20px;
   max-width: 1200px;
   margin: 0 auto;
+  padding: 20px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
 }
 
-.search-container {
-  margin-bottom: 20px;
-  display: flex;
-  gap: 10px;
-}
-
-.search-input {
-  padding: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  flex-grow: 1;
-  max-width: 300px;
-}
-
-.search-button, .reset-button {
-  padding: 8px 16px;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.reset-button {
-  background-color: #f44336;
-}
-
-.error-message {
-  color: #f44336;
-  margin-bottom: 15px;
-}
-
-.loading-message {
-  color: #2196F3;
-  margin-bottom: 15px;
-}
-
-.user-list-container {
-  overflow-x: auto;
-}
-
-.user-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
-}
-
-.user-table th {
-  background-color: #f2f2f2;
-}
-
-.user-table tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-.user-table tr:hover {
-  background-color: #f1f1f1;
-}
-
-.authority-select {
-  padding: 5px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
+.administer-container h1 {
+  text-align: center;
+  color: #2c3e50;
+  margin-bottom: 30px;
+  font-size: 28px;
+  font-weight: 600;
 }
 
 /* 选项卡样式 */
@@ -87,28 +29,185 @@
   border: none;
   cursor: pointer;
   font-size: 16px;
+  color: #555;
+  transition: all 0.3s ease;
   border-bottom: 3px solid transparent;
+  margin-right: 5px;
+}
+
+.tab-button:hover {
+  color: #3498db;
 }
 
 .tab-button.active {
-  border-bottom: 3px solid #1890ff;
-  color: #1890ff;
+  color: #3498db;
+  border-bottom: 3px solid #3498db;
+  font-weight: 600;
 }
 
-/* 折扣卡片样式 */
-.current-discount-card {
-  background-color: #f5f5f5;
-  padding: 15px;
-  border-radius: 5px;
+/* 搜索区域 */
+.search-container {
+  display: flex;
   margin-bottom: 20px;
+  gap: 10px;
 }
 
-/* 折扣表单样式 */
-.add-discount-form {
+.search-input {
+  flex: 1;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border 0.3s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+.search-button, .reset-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.search-button {
+  background-color: #3498db;
+  color: white;
+}
+
+.search-button:hover {
+  background-color: #2980b9;
+}
+
+.reset-button {
+  background-color: #f1f1f1;
+  color: #333;
+}
+
+.reset-button:hover {
+  background-color: #ddd;
+}
+
+/* 表格样式 */
+.user-table, .discount-table, .announcement-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.user-table th, 
+.discount-table th, 
+.announcement-table th {
+  background-color: #3498db;
+  color: white;
+  padding: 12px 15px;
+  text-align: left;
+}
+
+.user-table td, 
+.discount-table td, 
+.announcement-table td {
+  padding: 12px 15px;
+  border-bottom: 1px solid #ddd;
+}
+
+.user-table tr:nth-child(even), 
+.discount-table tr:nth-child(even), 
+.announcement-table tr:nth-child(even) {
   background-color: #f9f9f9;
+}
+
+.user-table tr:hover, 
+.discount-table tr:hover, 
+.announcement-table tr:hover {
+  background-color: #f1f1f1;
+}
+
+/* 权限选择框 */
+.authority-select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.authority-select:focus {
+  outline: none;
+  border-color: #3498db;
+}
+
+/* 错误消息 */
+.error-message {
+  color: #e74c3c;
+  background-color: #fadbd8;
+  padding: 10px 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  border-left: 4px solid #e74c3c;
+}
+
+/* 加载状态 */
+.loading-message {
+  color: #3498db;
+  text-align: center;
+  padding: 15px;
+  font-style: italic;
+}
+
+/* 折扣卡片 */
+.current-discount-section {
+  margin-bottom: 30px;
   padding: 20px;
-  border-radius: 5px;
-  margin-bottom: 20px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.current-discount-section h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.current-discount-card {
+  background-color: white;
+  padding: 15px;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-top: 15px;
+}
+
+.current-discount-card p {
+  margin: 8px 0;
+}
+
+.current-discount-card strong {
+  color: #2c3e50;
+  margin-right: 10px;
+}
+
+/* 表单样式 */
+.add-discount-form, .announcement-form {
+  background-color: #f8f9fa;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.add-discount-form h3, .announcement-form h3 {
+  margin-top: 0;
+  color: #2c3e50;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
 }
 
 .form-group {
@@ -116,111 +215,97 @@
 }
 
 .form-group label {
-  display: inline-block;
-  width: 100px;
-  margin-right: 10px;
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #2c3e50;
 }
 
-/* 折扣表格样式 */
-.discount-table {
+.form-group input[type="text"],
+.form-group textarea,
+.form-group select {
   width: 100%;
-  border-collapse: collapse;
-}
-
-.discount-table th, .discount-table td {
-  padding: 10px;
+  padding: 10px 15px;
   border: 1px solid #ddd;
-  text-align: left;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border 0.3s;
 }
 
-.discount-table th {
-  background-color: #f2f2f2;
+.form-group textarea {
+  min-height: 100px;
+  resize: vertical;
 }
 
-.delete-button {
-  background-color: #ff4d4f;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 3px;
-  cursor: pointer;
+.form-group input[type="text"]:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #3498db;
 }
 
-.delete-button:hover {
-  background-color: #ff7875;
+/* 日期选择器样式 */
+.react-datepicker-wrapper {
+  width: 100%;
 }
 
-.react-datepicker {
+.react-datepicker__input-container input {
+  width: 100%;
+  padding: 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
   font-size: 14px;
 }
 
-.react-datepicker__time-container {
-  width: 120px;
-}
-
-.react-datepicker-time__header {
-  font-size: 13px;
-}
-
-.time-preview {
-  margin: 10px 0;
-  padding: 10px;
-  background: #f5f5f5;
+/* 按钮样式 */
+button {
+  padding: 10px 20px;
+  background-color: #3498db;
+  color: white;
+  border: none;
   border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
 }
 
-/* 公告表单样式 */
-.announcement-form {
-  padding: 20px;
-  background: #f5f5f5;
-  border-radius: 8px;
-  margin-bottom: 20px;
+button:hover {
+  background-color: #2980b9;
 }
 
-.announcement-form .form-group {
-  margin-bottom: 15px;
+.delete-button {
+  background-color: #e74c3c;
 }
 
-.announcement-form label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
+.delete-button:hover {
+  background-color: #c0392b;
 }
 
-.announcement-form input[type="text"],
-.announcement-form textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.announcement-form textarea {
-  min-height: 100px;
-}
-
-/* 公告列表样式 */
-.announcement-list-container {
-  margin-top: 20px;
-}
-
-.announcement-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.announcement-table th,
-.announcement-table td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-
-.announcement-table th {
-  background-color: #f2f2f2;
-  font-weight: bold;
-}
-
-.announcement-table tr:hover {
-  background-color: #f9f9f9;
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .administer-container {
+    padding: 15px;
+  }
+  
+  .tab-container {
+    flex-wrap: wrap;
+  }
+  
+  .tab-button {
+    padding: 8px 15px;
+    font-size: 14px;
+  }
+  
+  .user-table, .discount-table, .announcement-table {
+    display: block;
+    overflow-x: auto;
+  }
+  
+  .search-container {
+    flex-direction: column;
+  }
+  
+  .search-button, .reset-button {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Administer.jsx b/src/components/Administer.jsx
index 0f915e3..9cf8986 100644
--- a/src/components/Administer.jsx
+++ b/src/components/Administer.jsx
@@ -248,8 +248,7 @@
   setError(null);
   try {
     const announcements = await getAnnouncements();
-    // 确保总是设置为数组
-    setAnnouncements(Array.isArray(announcements) ? announcements : []);
+    setAnnouncements(announcements);
   } catch (err) {
     setError('获取公告列表失败: ' + err.message);
     console.error(err);
diff --git a/src/components/Administer.test.jsx b/src/components/Administer.test.jsx
index 598ed4e..2cb5bb0 100644
--- a/src/components/Administer.test.jsx
+++ b/src/components/Administer.test.jsx
@@ -1,32 +1,31 @@
 import React from 'react';
-import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import '@testing-library/jest-dom';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
 import Administer from './Administer';
 
-describe('Administer Component', () => {
-  let mock;
+// 导入要模拟的API函数
+import { 
+  getAllUsers, 
+  searchUsers, 
+  getAllDiscounts,
+  getCurrentDiscount
+} from '../api/administer';
+import { getAnnouncements } from '../api/announcement';
 
-  beforeAll(() => {
-    mock = new MockAdapter(axios);
+// 模拟API模块
+jest.mock('../api/administer');
+jest.mock('../api/announcement');
+
+describe('Administer Component', () => {
+  beforeEach(() => {
+    // 清除所有模拟的调用信息
+    jest.clearAllMocks();
     localStorage.setItem('token', 'test-token');
   });
 
-  afterEach(() => {
-    mock.reset();
-  });
-
-  afterAll(() => {
-    mock.restore();
-  });
-
   test('renders user management tab by default', async () => {
-    mock.onGet('/user/allUser').reply(200, {
-      code: 200,
-      data: { data: [] }
-    });
+    getAllUsers.mockResolvedValue([]);
 
     render(
       <MemoryRouter>
@@ -53,10 +52,7 @@
       }
     ];
 
-    mock.onGet('/user/allUser').reply(200, {
-      code: 200,
-      data: { data: mockUsers }
-    });
+    getAllUsers.mockResolvedValue(mockUsers);
 
     render(
       <MemoryRouter>
@@ -73,14 +69,17 @@
     const mockUsers = [
       {
         username: 'searchuser',
-        authority: 'USER'
+        authority: 'USER',
+        registTime: '2023-01-01',
+        lastLogin: '2023-05-01',
+        upload: 1000,
+        download: 500,
+        shareRate: 2.0,
+        magicPoints: 100
       }
     ];
 
-    mock.onGet('/user/searchUser').reply(200, {
-      code: 200,
-      data: { data: mockUsers }
-    });
+    searchUsers.mockResolvedValue(mockUsers);
 
     render(
       <MemoryRouter>
@@ -99,15 +98,13 @@
   });
 
   test('switches between tabs', async () => {
-    mock.onGet('/user/allUser').reply(200, {
-      code: 200,
-      data: { data: [] }
-    });
-
-    mock.onGet('/discount/all').reply(200, {
-      code: 200,
-      data: { data: [] }
-    });
+    // 设置初始用户数据
+    getAllUsers.mockResolvedValue([]);
+    // 设置折扣数据
+    getAllDiscounts.mockResolvedValue([]);
+    getCurrentDiscount.mockResolvedValue(null);
+    // 设置公告数据
+    getAnnouncements.mockResolvedValue([]);
 
     render(
       <MemoryRouter>
@@ -115,10 +112,12 @@
       </MemoryRouter>
     );
 
+    // 切换到折扣管理标签
     fireEvent.click(screen.getByText('折扣管理'));
 
     await waitFor(() => {
       expect(screen.getByText('添加新折扣')).toBeInTheDocument();
+      // 可以添加更多断言来验证折扣管理页面的内容
     });
   });
 });
\ No newline at end of file
diff --git a/src/components/AnnouncementDetail.css b/src/components/AnnouncementDetail.css
index 5ca87c1..b6c600b 100644
--- a/src/components/AnnouncementDetail.css
+++ b/src/components/AnnouncementDetail.css
@@ -1,64 +1,93 @@
 .announcement-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    font-size: 16px;
-    cursor: pointer;
-    margin-bottom: 20px;
+  max-width: 800px;
+  margin: 40px auto;
+  padding: 0 20px;
+}
+
+.back-button {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-bottom: 20px;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.back-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
+}
+
+.announcement-detail {
+  background: white;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+}
+
+.announcement-header {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+  margin-bottom: 25px;
+}
+
+.announcement-header h1 {
+  margin: 0 0 15px 0;
+  font-size: 28px;
+  color: #1e3c72;
+  font-weight: 700;
+}
+
+.announcement-meta {
+  display: flex;
+  gap: 15px;
+  color: #666;
+  font-size: 14px;
+  align-items: center;
+}
+
+.announcement-content {
+  line-height: 1.8;
+  font-size: 16px;
+  color: #333;
+}
+
+.announcement-content p {
+  margin: 0 0 20px 0;
+}
+
+.error-message {
+  text-align: center;
+  padding: 50px;
+  color: #ff4d4f;
+  font-size: 16px;
+  background-color: #fff2f0;
+  border-radius: 8px;
+  border: 1px solid #ffccc7;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .announcement-container {
+    padding: 0 15px;
+    margin: 20px auto;
   }
   
   .announcement-detail {
-    background: white;
-    padding: 25px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-  }
-  
-  .announcement-header {
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 15px;
-    margin-bottom: 20px;
+    padding: 20px;
   }
   
   .announcement-header h1 {
-    margin: 0 0 10px 0;
-    font-size: 24px;
-  }
-  
-  .announcement-meta {
-    display: flex;
-    gap: 15px;
-    color: #666;
-    font-size: 14px;
-    align-items: center;
-  }
-  
-  .category-badge {
-    background: #e6f7ff;
-    color: #1890ff;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
+    font-size: 22px;
   }
   
   .announcement-content {
-    line-height: 1.8;
     font-size: 15px;
   }
-  
-  .announcement-content p {
-    margin: 0 0 16px 0;
-  }
-  
-  .error-message {
-    text-align: center;
-    padding: 50px;
-    color: #ff4d4f;
-    font-size: 16px;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/AuthForm.css b/src/components/AuthForm.css
index 0348f50..b15cbee 100644
--- a/src/components/AuthForm.css
+++ b/src/components/AuthForm.css
@@ -1,113 +1,144 @@
 /* src/components/AuthForm.css */
 .auth-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    background-color: #f5f5f5;
-    padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  padding: 20px;
 }
 
 .auth-title {
-    color: #333;
-    font-size: 2.5rem;
-    margin-bottom: 2rem;
-    text-align: center;
+  color: #1e3c72;
+  font-size: 2.5rem;
+  margin-bottom: 2rem;
+  text-align: center;
+  font-weight: 700;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .auth-form-wrapper {
-    width: 100%;
-    max-width: 400px;
-    background: white;
-    padding: 2rem;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+  background: white;
+  padding: 2.5rem;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 }
 
 .auth-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
 }
 
 .auth-form h2 {
-    color: #333;
-    text-align: center;
-    margin-bottom: 1.5rem;
+  color: #1e3c72;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 
 .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .form-group input {
-    padding: 0.8rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 1rem;
-    width: 100%;
-    box-sizing: border-box; /* 确保padding不会影响宽度 */
-    height: 42px; /* 固定高度 */
+  padding: 0.9rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  height: 46px;
+  transition: all 0.3s;
 }
 
 .form-group input:focus {
-    outline: none;
-    border-color: #007bff;
+  outline: none;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
 }
 
 .auth-button {
-    padding: 0.8rem;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    height: 42px; /* 与输入框高度一致 */
+  padding: 0.9rem;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  height: 46px;
+  margin-top: 0.5rem;
 }
 
 .auth-button:hover {
-    background-color: #0056b3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.2);
 }
 
 .auth-button:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
+  background: #cccccc;
+  transform: none;
+  box-shadow: none;
+  cursor: not-allowed;
 }
 
 .auth-switch {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 1rem;
-    font-size: 0.9rem;
-    color: #666;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: #666;
 }
 
 .switch-button {
-    background: none;
-    border: none;
-    color: #007bff;
-    cursor: pointer;
-    text-decoration: underline;
-    font-size: 0.9rem;
-    padding: 0;
+  background: none;
+  border: none;
+  color: #1e3c72;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0;
+  transition: all 0.2s;
+  text-decoration: none;
 }
 
 .switch-button:hover {
-    color: #0056b3;
+  color: #2a5298;
+  text-decoration: underline;
 }
 
 .error-message {
-    color: #dc3545;
-    background-color: #f8d7da;
-    padding: 0.5rem;
-    border-radius: 4px;
-    text-align: center;
-    margin-bottom: 1rem;
+  color: #e74c3c;
+  background-color: #fdecea;
+  padding: 0.8rem;
+  border-radius: 6px;
+  text-align: center;
+  margin-bottom: 1rem;
+  border: 1px solid #fadbd8;
+  font-size: 0.9rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .auth-form-wrapper {
+    padding: 1.8rem;
+  }
+  
+  .auth-title {
+    font-size: 2rem;
+  }
+  
+  .auth-form h2 {
+    font-size: 1.3rem;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Dashboard.css b/src/components/Dashboard.css
index d3a5471..2882f5c 100644
--- a/src/components/Dashboard.css
+++ b/src/components/Dashboard.css
@@ -1,325 +1,457 @@
 /* src/components/Dashboard.css */
 .dashboard-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    background-color: #f5f5f5;
-  }
-  
-  .top-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    position: sticky;
-    top: 0;
-    z-index: 100;
-  }
-  
-  .search-container {
-    display: flex;
-    flex-grow: 1;
-    max-width: 600px;
-    margin: 0 auto;
-  }
-  
-  .search-input {
-    flex-grow: 1;
-    padding: 8px 15px;
-    border: 1px solid #ddd;
-    border-radius: 20px 0 0 20px;
-    font-size: 16px;
-    outline: none;
-  }
-  
-  .search-button {
-    padding: 8px 15px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 0 20px 20px 0;
-    cursor: pointer;
-    font-size: 16px;
-  }
-  
-  .search-button:hover {
-    background-color: #0056b3;
-  }
-  
-  .user-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-  
-  .username {
-    font-weight: bold;
-  }
-  
-  .logout-button {
-    padding: 5px 10px;
-    background-color: #f8f9fa;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-left: 10px;
-  }
-  
-  .logout-button:hover {
-    background-color: #e9ecef;
-  }
-  
-  .nav-tabs {
-    display: flex;
-    background-color: #fff;
-    border-bottom: 1px solid #ddd;
-    padding: 0 20px;
-  }
-  
-  .tab-button {
-    padding: 12px 20px;
-    background: none;
-    border: none;
-    border-bottom: 3px solid transparent;
-    cursor: pointer;
-    font-size: 16px;
-    color: #666;
-  }
-  
-  .tab-button:hover {
-    color: #007bff;
-  }
-  
-  .tab-button.active {
-    color: #007bff;
-    border-bottom-color: #007bff;
-    font-weight: bold;
-  }
-  
-  .content-area {
-    flex-grow: 1;
-    padding: 20px;
-    background-color: #fff;
-    margin: 20px;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
-  
-  .loading, .error {
-    padding: 20px;
-    text-align: center;
-    font-size: 18px;
-  }
-  
-  .error {
-    color: #dc3545;
-  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f8f9fa;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
 
-/* 公告区样式 */
-  /* 轮播图样式 */
+/* 顶部栏样式 */
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 30px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.platform-name h2 {
+  margin: 0;
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.user-actions {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.admin-center-button {
+  padding: 8px 16px;
+  background-color: #ff7f50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.admin-center-button:hover {
+  background-color: #ff6347;
+  transform: translateY(-1px);
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: white;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.username {
+  font-weight: 600;
+  color: white !important;
+}
+
+.logout-button {
+  padding: 6px 12px;
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.logout-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+/* 导航标签样式 */
+.nav-tabs {
+  display: flex;
+  background-color: white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 0 30px;
+}
+
+.tab-button {
+  padding: 14px 24px;
+  background: none;
+  border: none;
+  border-bottom: 3px solid transparent;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  color: #666;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.tab-button:hover {
+  color: #1e3c72;
+}
+
+.tab-button.active {
+  color: #1e3c72;
+  border-bottom-color: #1e3c72;
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: #1e3c72;
+}
+
+/* 内容区域样式 */
+.content-area {
+  flex-grow: 1;
+  padding: 25px 30px;
+  background-color: white;
+  margin: 20px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.section-search-container {
+  display: flex;
+  margin-bottom: 25px;
+  gap: 10px;
+}
+
+.section-search-input {
+  flex: 1;
+  padding: 10px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.section-search-input:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
+}
+
+.search-button, .reset-button {
+  padding: 10px 18px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.search-button {
+  background-color: #1e3c72;
+  color: white;
+}
+
+.search-button:hover {
+  background-color: #2a5298;
+  transform: translateY(-1px);
+}
+
+.reset-button {
+  background-color: #f1f1f1;
+  color: #555;
+}
+
+.reset-button:hover {
+  background-color: #e0e0e0;
+}
+
+/* 轮播图样式 */
 .carousel-container {
-    position: relative;
-    width: 100%;
-    height: 200px;
-    overflow: hidden;
-    margin-bottom: 20px;
-    border-radius: 4px;
-  }
-  
-  .carousel-slide {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 1s ease-in-out;
-  }
-  
-  .carousel-slide.active {
-    opacity: 1;
-  }
-  
-  .carousel-image {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    font-weight: bold;
-    color: white;
-  }
-  
-  .gray-bg {
-    background-color: #666;
-  }
-  
-  .carousel-dots {
-    position: absolute;
-    bottom: 15px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-  }
-  
-  .dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.5);
-    cursor: pointer;
-  }
-  
-  .dot.active {
-    background-color: white;
-  }
-  
-  /* 公告网格样式 */
-  .announcement-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
-  }
-  
-  .announcement-card {
-    background-color: white;
-    padding: 15px;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s, box-shadow 0.2s;
-  }
-  
-  .announcement-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-  
-  .announcement-card h3 {
-    margin-top: 0;
-    color: #007bff;
-    border-bottom: 1px solid #eee;
-    padding-bottom: 8px;
-  }
-  
-  .announcement-card p {
-    margin-bottom: 0;
-    color: #666;
-    line-height: 1.5;
-  }
-/* 分享区样式   */
- /* 上传头部样式 */
+  position: relative;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  margin-bottom: 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.carousel-slide.active {
+  opacity: 1;
+}
+
+.carousel-image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 30px;
+  color: white;
+  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+}
+
+.carousel-image h3 {
+  font-size: 28px;
+  margin: 0 0 10px 0;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.carousel-image p {
+  margin: 5px 0;
+  font-size: 16px;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.carousel-dots {
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.dot.active {
+  background-color: white;
+  transform: scale(1.2);
+}
+
+/* 公告网格样式 */
+.announcement-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.announcement-card {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s;
+  border-left: 4px solid #1e3c72;
+  cursor: pointer;
+}
+
+.announcement-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.announcement-card h3 {
+  margin: 0 0 12px 0;
+  color: #1e3c72;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.announcement-card p {
+  margin: 0 0 12px 0;
+  color: #555;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.announcement-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #888;
+  font-size: 13px;
+}
+
+/* 推荐区域样式 */
+.recommend-section {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.section-title {
+  margin: 0;
+  color: #1e3c72;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.refresh-btn {
+  padding: 8px 16px;
+  background-color: #f1f1f1;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  color: #555;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.refresh-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.refresh-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.recommend-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.recommend-card {
+  background-color: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.recommend-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.card-poster {
+  height: 120px;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.poster-image {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 36px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-info {
+  padding: 15px;
+}
+
+.card-title {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-meta {
+  margin: 0 0 5px 0;
+  font-size: 13px;
+  color: #666;
+}
+
+.card-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #888;
+}
+
+.card-stats {
+  padding: 10px 15px;
+  border-top: 1px solid #eee;
+  font-size: 13px;
+  color: #666;
+}
+
+.no-recommendations {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 30px;
+  color: #888;
+  font-size: 15px;
+}
+
+/* 上传按钮样式 */
 .upload-header {
   margin-bottom: 20px;
-  display: flex;
-  justify-content: flex-start;
 }
 
 .upload-btn {
   padding: 10px 20px;
-  background: #1890ff;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  border-radius: 4px;
-  font-size: 16px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .upload-btn:hover {
-  background: #40a9ff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
 }
 
-/* 弹窗样式 */
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.upload-modal {
-  background: white;
-  padding: 25px;
-  border-radius: 8px;
-  width: 500px;
-  max-width: 90%;
-  position: relative;
-}
-
-.close-btn {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: none;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-}
-
-/* 表单样式 */
-.form-group {
-  margin-bottom: 15px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-}
-
-.form-group input[type="text"],
-.form-group select,
-.form-group textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.form-group textarea {
-  min-height: 80px;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-top: 20px;
-}
-
-.cancel-btn {
-  padding: 8px 15px;
-  background: #f5f5f5;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.cancel-btn:hover {
-  background: #e6e6e6;
-}
-  /* 筛选区域 */
+/* 筛选区域样式 */
 .filter-section {
-  background: #f9f9f9;
-  padding: 15px;
+  background-color: white;
+  padding: 15px 20px;
   border-radius: 8px;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .filter-group {
@@ -327,60 +459,59 @@
 }
 
 .filter-group h4 {
-  margin: 0 0 8px 0;
-  font-size: 15px;
-  color: #666;
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: #555;
+  font-weight: 600;
 }
 
-/* 筛选按钮 */
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .filter-btn {
   padding: 6px 12px;
-  margin-right: 8px;
-  margin-bottom: 8px;
+  background-color: #f5f5f5;
+  color: #333;  /* 改为黑字 */
   border: 1px solid #ddd;
-  background: white;
   border-radius: 4px;
+  font-size: 13px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .filter-btn:hover {
-  border-color: #1890ff;
-  color: #1890ff;
+  border-color: #1e3c72;
+  color: #fbfbfc;
 }
 
 .filter-btn.active {
-  background: #1890ff;
+  background-color: #1e3c72;
   color: white;
-  border-color: #1890ff;
+  border-color: #1e3c72;
 }
 
-/* 确定按钮 */
 .confirm-btn {
   padding: 8px 20px;
-  background: #1890ff;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
-  font-size: 14px;
-  transition: opacity 0.3s;
+  transition: all 0.2s;
 }
 
 .confirm-btn:hover {
-  background: #007bff;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
 }
 
-.confirm-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-
-/* 资源列表 */
+/* 资源列表样式 */
 .resource-list {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: 15px;
 }
 
@@ -389,99 +520,146 @@
   align-items: center;
   padding: 15px;
   background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s, box-shadow 0.2s;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s;
+  cursor: pointer;
 }
 
 .resource-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
 .resource-poster {
   margin-right: 15px;
+  flex-shrink: 0;
 }
 
 .poster-image {
-  width: 60px;
-  height: 80px;
-  background-color: #666;
+  width: 80px;
+  height: 110px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 28px;
+  font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  font-size: 24px;
-  font-weight: bold;
   border-radius: 4px;
 }
 
 .resource-info {
   flex-grow: 1;
+  min-width: 0;
 }
 
 .resource-title {
-  margin: 0 0 5px 0;
+  margin: 0 0 8px 0;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resource-meta {
-  margin: 0;
-  font-size: 14px;
+  margin: 0 0 5px 0;
+  font-size: 13px;
   color: #666;
 }
 
+.resource-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #888;
+}
+
 .resource-stats {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
   margin-right: 20px;
-  min-width: 150px;
+  text-align: right;
+  min-width: 120px;
 }
 
 .stat {
+  display: block;
   font-size: 13px;
   color: #666;
   margin-bottom: 5px;
 }
 
 .download-btn {
-  padding: 8px 15px;
-  background-color: #28a745;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
   color: white;
   border: none;
   border-radius: 4px;
+  font-weight: 600;
   cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s;
+  transition: all 0.2s;
+  white-space: nowrap;
 }
 
 .download-btn:hover {
-  background-color: #218838;
-}
-/* 发帖按钮样式 */
-.post-header {
-  margin-bottom: 20px;
-  text-align: right;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
 }
 
-.create-post-btn {
-  background-color: #1890ff;
+.delete-btn {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #ff5e62 0%, #ff2400 100%);
   color: white;
   border: none;
-  padding: 8px 16px;
+  border-radius: 4px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.delete-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(255, 94, 98, 0.3);
+}
+
+/* 分页样式 */
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0 20px;
+  gap: 8px;
+}
+
+.pagination button {
+  padding: 8px 14px;
+  border: 1px solid #ddd;
+  background-color: white;
+  color: #333;
   border-radius: 4px;
   cursor: pointer;
+  transition: all 0.2s;
   font-size: 14px;
-  transition: background-color 0.3s;
 }
 
-.create-post-btn:hover {
-  background-color: #40a9ff;
+.pagination button:hover:not(.active):not(:disabled) {
+  border-color: #1e3c72;
+  color: #1e3c72;
 }
 
-/* 弹窗样式 */
+.pagination button.active {
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border-color: #1e3c72;
+}
+
+.pagination button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 修改后的模态框样式 */
 .post-modal-overlay {
   position: fixed;
   top: 0;
@@ -492,429 +670,197 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 9999; /* 确保在最上层 */
 }
 
-.post-modal {
+.upload-modal,
+.post-modal,
+.download-modal {
   background-color: white;
-  padding: 24px;
+  padding: 25px;
   border-radius: 8px;
   width: 500px;
-  max-width: 90%;
+  max-width: calc(100% - 40px);
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
   position: relative;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  margin: 20px auto; /* 添加一些外边距 */
+  max-height: 90vh; /* 限制最大高度 */
+  overflow-y: auto; /* 允许内容滚动 */
 }
 
-.post-modal h3 {
-  margin-top: 0;
-  margin-bottom: 20px;
-  font-size: 18px;
-  color: #333;
+/* 针对移动端的调整 */
+@media (max-width: 576px) {
+  .post-modal {
+    padding: 20px 15px;
+    width: 100%;
+    margin: 10px;
+  }
 }
 
+/* 确保模态框关闭按钮在最上层 */
 .modal-close-btn {
   position: absolute;
-  top: 16px;
-  right: 16px;
+  top: 15px;
+  right: 15px;
   background: none;
   border: none;
-  font-size: 20px;
+  font-size: 22px;
+  color: #888;
   cursor: pointer;
-  color: #999;
+  transition: all 0.2s;
+  z-index: 1;
 }
 
 .modal-close-btn:hover {
-  color: #666;
+  color: #555;
+  transform: rotate(90deg);
 }
 
 /* 表单样式 */
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom: 18px;
 }
 
 .form-group label {
   display: block;
   margin-bottom: 8px;
-  font-weight: 500;
-  color: #333;
+  font-weight: 600;
+  color: #555;
+  font-size: 14px;
 }
 
 .form-group input[type="text"],
+.form-group input[type="file"],
+.form-group select,
 .form-group textarea {
   width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
   font-size: 14px;
+  transition: all 0.2s;
+}
+
+.form-group input[type="text"]:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 2px rgba(30, 60, 114, 0.2);
 }
 
 .form-group textarea {
-  min-height: 120px;
+  min-height: 100px;
   resize: vertical;
 }
 
-.upload-image-btn {
-  display: flex;
-  align-items: center;
-}
-
-.upload-image-btn label {
-  background-color: #f5f5f5;
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 1px dashed #d9d9d9;
-  margin-right: 10px;
-  transition: all 0.3s;
-}
-
-.upload-image-btn label:hover {
-  border-color: #1890ff;
-  color: #1890ff;
-}
-
-.image-name {
-  font-size: 14px;
-  color: #666;
-}
-
-/* 按钮样式 */
 .form-actions {
   display: flex;
   justify-content: flex-end;
-  margin-top: 24px;
+  gap: 12px;
+  margin-top: 25px;
 }
 
 .cancel-btn {
+  padding: 10px 18px;
   background-color: #f5f5f5;
-  color: #333;
+  color: #555;
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
-  margin-right: 10px;
-  transition: background-color 0.3s;
+  transition: all 0.2s;
 }
 
 .cancel-btn:hover {
-  background-color: #e6e6e6;
+  background-color: #e0e0e0;
 }
 
-.submit-btn {
-  background-color: #1890ff;
+.submit-btn, .confirm-btn {
+  padding: 10px 18px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  padding: 8px 16px;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: all 0.2s;
 }
 
-.submit-btn:hover {
-  background-color: #40a9ff;
+.submit-btn:hover, .confirm-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
 }
 
-.pagination {
-  display: flex;
-  justify-content: center;
-  margin: 20px 0;
-  gap: 5px;
-}
-
-.pagination button {
-  padding: 5px 10px;
-  border: 1px solid #ddd;
-  background: white;
-  cursor: pointer;
-}
-
-.pagination button.active {
-  background: #1890ff;
-  color: white;
-  border-color: #1890ff;
-}
-
-.pagination button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.filter-section {
-  position: sticky;
-  top: 0;
-  background: white;
-  z-index: 100;
-  padding: 15px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-.admin-center-btn {
-  padding: 5px 10px;
-  margin-right: 10px;
-  background-color: #ff5722;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.admin-center-btn:hover {
-  background-color: #e64a19;
-}
-
-/* 区域搜索容器样式 */
-.section-search-container {
-  display: flex;
-  margin-bottom: 20px;
-  gap: 10px;
-}
-
-.section-search-input {
-  flex: 1;
-  padding: 10px 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 1rem;
-}
-
-.section-search-button {
-  padding: 10px 20px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.section-search-button:hover {
-  background-color: #0056b3;
-}
-
-/* 分享区顶部操作栏 */
-.share-top-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  gap: 20px;
-}
-
-/* 上传按钮样式 */
-.upload-btn {
-  padding: 10px 20px;
-  background-color: #28a745;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  white-space: nowrap;
-}
-
-.upload-btn:hover {
-  background-color: #218838;
-}
-
-/* 下载模态框样式 */
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.download-modal {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    width: 500px;
-    max-width: 90%;
-    position: relative;
-}
-
-.download-modal .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.download-modal .form-group {
-    margin-bottom: 15px;
-}
-
-.download-modal .form-group label {
-    display: block;
-    margin-bottom: 5px;
-}
-
-.download-modal .form-group input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
+/* 进度条样式 */
 .progress-container {
-    margin: 15px 0;
-    background: #f0f0f0;
-    border-radius: 4px;
-    height: 20px;
-    overflow: hidden;
+  height: 10px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  margin: 15px 0;
+  overflow: hidden;
 }
 
 .progress-bar {
-    height: 100%;
-    background: #1890ff;
-    transition: width 0.3s;
-    color: white;
-    text-align: center;
-    font-size: 12px;
-    line-height: 20px;
+  height: 100%;
+  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
+  transition: width 0.3s;
+  border-radius: 5px;
 }
 
-.modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 20px;
-}
-
-.modal-actions button {
-    padding: 8px 16px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-.modal-actions button:first-child {
-    background: #f5f5f5;
-    border: 1px solid #d9d9d9;
-}
-
-.modal-actions button:last-child {
-    background: #1890ff;
-    color: white;
-    border: none;
-}
-
-.modal-actions button:disabled {
-    background: #d9d9d9;
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-/* 在Dashboard.css中添加以下样式 */
-
-.resource-actions {
-  display: flex;
-  gap: 10px;
-  margin-left: auto;
-}
-
-.delete-btn {
-  padding: 8px 15px;
-  background-color: #ff4d4f;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.delete-btn:hover {
-  background-color: #ff7875;
-}
-
-.delete-btn:disabled {
-  background-color: #d9d9d9;
-  cursor: not-allowed;
-}
-
-.carousel-image {
-  padding: 1rem;
-  background: linear-gradient(to right, #f7b733, #fc4a1a);
-  color: white;
-  border-radius: 10px;
-  height: 180px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-size: 18px;
-  transition: all 0.5s ease-in-out;
-}
-
-.carousel-image h3 {
-  font-size: 22px;
-  margin: 0;
-}
-
-.carousel-image p {
-  margin: 4px 0;
-}
-
-
-/* 平台名称样式 */
-.platform-name {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-}
-
-.platform-name h2 {
-  margin: 0;
-  color: #333;
-  font-size: 24px;
-  font-weight: bold;
-}
-
-/* 分区搜索框样式 */
-.section-search-container {
-  padding: 10px 20px;
-  margin-bottom: 20px;
-}
-
-.section-search-input {
-  width: 100%;
-  padding: 8px 15px;
-  border: 1px solid #ddd;
-  border-radius: 20px;
-  font-size: 14px;
-  outline: none;
-}
-
-.section-search-input:focus {
-  border-color: #1890ff;
-}
-
-.no-results {
+/* 加载和错误提示 */
+.loading {
   text-align: center;
-  padding: 20px;
-  color: #888;
+  padding: 30px;
+  color: #666;
   font-size: 16px;
 }
 
-.reset-button {
-  padding: 8px 15px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s;
+.error {
+  text-align: center;
+  padding: 20px;
+  color: #e74c3c;
+  font-size: 16px;
+  background-color: #fdecea;
+  border-radius: 6px;
+  margin: 20px 0;
 }
 
-.reset-button:hover {
-  background-color: #e0e0e0;
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .top-bar {
+    padding: 10px 15px;
+  }
+  
+  .nav-tabs {
+    padding: 0 15px;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .content-area {
+    padding: 15px;
+    margin: 10px;
+  }
+  
+  .announcement-grid, .recommend-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .resource-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .resource-poster {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .resource-stats {
+    margin-right: 0;
+    margin-top: 10px;
+    text-align: left;
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 61111f3..e393fcd 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -72,6 +72,9 @@
     const [recommendations, setRecommendations] = useState([]);
     const [recommendLoading, setRecommendLoading] = useState(false);
     const [recommendError, setRecommendError] = useState(null);
+    const [isRecommend, setIsRecommend] = useState(true);
+    const [needNewRecommend, setNeedNewRecommend] = useState(false);
+
 
 
 
@@ -101,18 +104,28 @@
     }
     };
 
+   // 修改 useEffect 钩子
     useEffect(() => {
         if (activeTab === 'announcement') {
             fetchAnnouncements();
             fetchDiscountsForCarousel();
-            fetchRecommendations();
+            
+            // 只在需要时获取推荐
+            if (isRecommend || needNewRecommend) {
+                fetchRecommendations();
+            }
         }
-    }, [activeTab]);
+    }, [activeTab, isRecommend, needNewRecommend]);
+
+    // 添加刷新推荐的功能
+    const handleRefreshRecommendations = () => {
+        setNeedNewRecommend(true);
+    };
 
     const fetchDiscountsForCarousel = async () => {
         try {
             const all = await getAllDiscounts();
-            console.log("返回的折扣数据：", all);
+            // console.log("返回的折扣数据：", all);
             const now = new Date();
 
             // ⚠️ 使用 Date.parse 确保兼容 ISO 格式
@@ -353,19 +366,10 @@
     setIsDownloading(true);
     setDownloadProgress(0);
 
-    try {
-        // 标准化路径
-        const cleanPath = downloadPath
-        .replace(/\\/g, '/')  // 统一使用正斜杠
-        .replace(/\/+/g, '/') // 去除多余斜杠
-        .trim();
-
-        // 确保路径以斜杠结尾
-        const finalPath = cleanPath.endsWith('/') ? cleanPath : cleanPath + '/';
-
+    try {      
         // 发起下载请求
-        await downloadTorrent(selectedTorrent.id, finalPath);
-        
+        await downloadTorrent(selectedTorrent.id, downloadPath);
+        message.success("下载任务已提交");
         // 开始轮询进度
         const interval = setInterval(async () => {
             try {
@@ -374,7 +378,7 @@
                 
                 if (progresses) {
                     // 使用完整的 torrent 文件路径作为键
-                    const torrentPath = selectedTorrent.filePath.replace(/\\/g, '/');
+                    const torrentPath = selectedTorrent.downloadPath.replace(/\\/g, '/');
                     const torrentHash = selectedTorrent.hash;
                     // 查找匹配的进度
                     let foundProgress = null;
@@ -404,7 +408,7 @@
                 } catch (error) {
                     console.error('获取进度失败:', error);
                     // 如果获取进度失败但文件已存在，也视为完成
-                    const filePath = `${finalPath}${selectedTorrent.torrentName || 'downloaded_file'}`;
+                    const filePath = `${downloadPath}${selectedTorrent.torrentName || 'downloaded_file'}`;
                     try {
                     const exists = await checkFileExists(filePath);
                     if (exists) {
@@ -640,24 +644,37 @@
         }
     };
 
-    const fetchRecommendations = async () => {
-        try {
-            setRecommendLoading(true);
-            const response = await getRecommendations(5);
-            if (response.code === 200) {
-            setRecommendations(response.data || []);
+    // 修改 fetchRecommendations 函数
+const fetchRecommendations = async () => {
+    try {
+        setRecommendLoading(true);
+        const response = await getRecommendations(5);
+        
+        if (Array.isArray(response)) {
+            setRecommendations(response);
             
-            // 标记这些推荐为已显示
-            response.data.forEach(torrent => {
-                markRecommendationShown(torrent.id);
-            });
+            if (response.length === 0) {
+                console.warn('暂无推荐内容');
+            } else {
+                // 标记这些推荐为已显示
+                response.forEach(torrent => {
+                    markRecommendationShown(torrent.id);
+                });
             }
-        } catch (error) {
-            setRecommendError(error.message || '获取推荐失败');
-        } finally {
-            setRecommendLoading(false);
+            
+            // 获取成功后重置标志
+            setIsRecommend(false);
+            setNeedNewRecommend(false);
+        } else {
+            console.warn('返回格式异常:', response);
+            setRecommendations([]);
         }
-    };
+    } catch (error) {
+        setRecommendError(error.message || '获取推荐失败');
+    } finally {
+        setRecommendLoading(false);
+    }
+};
 
 
     useEffect(() => {
@@ -798,7 +815,7 @@
         try {
           setLoading(true);
           const backendData = await getUserInfo(); // 调用修改后的方法
-          console.log('后端返回的用户数据:', backendData); // 调试用
+        //   console.log('后端返回的用户数据:', backendData); // 调试用
           
           setUserInfo({
             name: backendData.username || '演示用户',
@@ -902,11 +919,20 @@
                         </div>
                         {/* 新增的为你推荐区域 */}
                         <div className="recommend-section">
-                            <h2 className="section-title">为你推荐</h2>
+                            <div className="section-header">
+                                <h2 className="section-title">为你推荐</h2>
+                                <button 
+                                    className="refresh-btn"
+                                    onClick={handleRefreshRecommendations}
+                                    disabled={recommendLoading}
+                                >
+                                    {recommendLoading ? '刷新中...' : '刷新推荐'}
+                                </button>
+                            </div>
                             
                             {recommendLoading && <div className="loading">加载推荐中...</div>}
                             {recommendError && <div className="error">{recommendError}</div>}
-                            
+    
                             <div className="recommend-grid">
                             {recommendations.map(torrent => (
                                 <div 
@@ -1225,11 +1251,11 @@
             case 'request':
                 return (
                     <div className="content-area" data-testid="request-section">
-                        {/* 求助区搜索框 */}
+                        {/* 求种区搜索框 */}
                         <div className="section-search-container">
                             <input
                                 type="text"
-                                placeholder="搜索求助..."
+                                placeholder="搜索求种..."
                                 value={requestSearch}
                                 onChange={(e) => setRequestSearch(e.target.value)}
                                 className="section-search-input"
diff --git a/src/components/HelpDetail.css b/src/components/HelpDetail.css
index 34e1363..6a0dae8 100644
--- a/src/components/HelpDetail.css
+++ b/src/components/HelpDetail.css
@@ -1,337 +1,360 @@
-/* HelpDetail.css */
+/* HelpDetail.css - 个性化版本 */
 .help-detail-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    cursor: pointer;
-    font-size: 16px;
-    margin-bottom: 20px;
-    padding: 5px 0;
-  }
-  
-  .help-post {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .help-post.solved {
-    border-left: 4px solid #52c41a;
-  }
-  
-  .post-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    position: relative;
-  }
-  
-  .post-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  
-  .post-meta {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .post-author {
-    font-weight: bold;
-  }
-  
-  .post-date {
-    color: #888;
-    font-size: 14px;
-  }
-  
-  .solved-badge {
-    position: absolute;
-    right: 0;
-    top: 0;
-    background: #52c41a;
-    color: white;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-  }
-  
-  .post-title {
-    font-size: 20px;
-    margin: 0 0 15px;
-  }
-  
-  .post-content {
-    line-height: 1.6;
-    margin-bottom: 15px;
-  }
-  
-  .post-actions {
-    display: flex;
-    gap: 15px;
-  }
-  
-  .like-button, .favorite-button, .solve-button {
-    padding: 5px 15px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-  
-  .like-button.liked {
-    background: #e6f7ff;
-    border-color: #91d5ff;
-    color: #1890ff;
-  }
-  
-  .favorite-button.favorited {
-    background: #fff7e6;
-    border-color: #ffd591;
-    color: #fa8c16;
-  }
-  
-  .solve-button.solved {
-    background: #f6ffed;
-    border-color: #b7eb8f;
-    color: #52c41a;
-  }
-  
-  .comments-section {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .comment-form {
-    margin-bottom: 20px;
-  }
-  
-  .comment-form textarea {
-    width: 100%;
-    padding: 10px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    resize: vertical;
-    min-height: 80px;
-    margin-bottom: 10px;
-  }
-  
-  .image-upload {
-    margin-bottom: 10px;
-  }
-  
-  .upload-button {
-    background: #f5f5f5;
-    border: 1px dashed #d9d9d9;
-    border-radius: 4px;
-    padding: 8px 16px;
-    cursor: pointer;
-    margin-bottom: 10px;
-  }
-  
-  .image-preview {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-  
-  .preview-item {
-    position: relative;
-    width: 100px;
-    height: 100px;
-  }
-  
-  .preview-item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
-  }
-  
-  .remove-image {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    width: 20px;
-    height: 20px;
-    background: #ff4d4f;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-  }
-  
-  .submit-button {
-    background: #1890ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 8px 16px;
-    cursor: pointer;
-  }
-  
-  .comment-list {
-    margin-top: 20px;
-  }
-  
-  .comment-item {
-    display: flex;
-    padding: 15px 0;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  
-  .comment-item:last-child {
-    border-bottom: none;
-  }
-  
-  .comment-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 15px;
-    flex-shrink: 0;
-  }
-  
-  .comment-content {
-    flex-grow: 1;
-  }
-  
-  .comment-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 8px;
-  }
-  
-  .comment-author {
-    font-weight: bold;
-  }
-  
-  .comment-date {
-    color: #888;
-    font-size: 14px;
-  }
-  
-  .comment-text {
-    line-height: 1.6;
-    margin-bottom: 8px;
-  }
-  
-  .comment-images {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 10px;
-  }
-  
-  .comment-image {
-    max-width: 200px;
-    max-height: 150px;
-    border-radius: 4px;
-  }
-  
-  .comment-actions {
-    margin-top: 10px;
-  }
-  
-  .reply-form {
-    margin-top: 10px;
-    display: flex;
-    gap: 10px;
-  }
-  
-  .reply-form textarea {
-    flex-grow: 1;
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    resize: vertical;
-    min-height: 40px;
-  }
-  
-  .submit-reply {
-    background: #f5f5f5;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    padding: 0 15px;
-    cursor: pointer;
-    align-self: flex-end;
-    margin-bottom: 5px;
-  }
-  
-  .reply-list {
-    margin-top: 10px;
-    padding-left: 15px;
-    border-left: 2px solid #f0f0f0;
-  }
-  
-  .reply-item {
-    display: flex;
-    margin-top: 10px;
-  }
-  
-  .reply-avatar {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  
-  .reply-content {
-    flex-grow: 1;
-  }
-  
-  .reply-header {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 5px;
-  }
-  
-  .reply-author {
-    font-weight: bold;
-    font-size: 14px;
-  }
-  
-  .reply-date {
-    color: #888;
-    font-size: 12px;
-  }
-  
-  .reply-text {
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  /* 评论项样式 */
-.comment-item {
-  display: flex;
-  margin-bottom: 20px;
-  padding: 15px;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
-.comment-avatar {
-  width: 40px;
-  height: 40px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 25px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+  content: "←";
+}
+
+/* 帖子卡片 - 3D悬浮效果 */
+.help-post {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.help-post:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+.help-post.solved::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 100%;
+  background: linear-gradient(to bottom, #52c41a, #a0d911);
+}
+
+/* 帖子头部 - 圆形头像+渐变背景 */
+.post-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.post-avatar {
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
   margin-right: 15px;
   object-fit: cover;
+  border: 3px solid rgba(30, 60, 114, 0.2);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.post-meta {
+  flex: 1;
+}
+
+.post-author {
+  font-weight: 700;
+  color: #1e3c72;
+  font-size: 18px;
+}
+
+.post-date {
+  color: #666;
+  font-size: 14px;
+  margin-top: 3px;
+}
+
+/* 已解决徽章 - 闪光效果 */
+.solved-badge {
+  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4); }
+  70% { box-shadow: 0 0 0 10px rgba(82, 196, 26, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); }
+}
+
+/* 删除按钮 - 危险色 */
+.delete-button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #ff5e62 0%, #ff2400 100%);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.delete-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 94, 98, 0.3);
+}
+
+/* 帖子标题 - 渐变文字 */
+.post-title {
+  font-size: 28px;
+  margin: 0 0 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+/* 帖子内容 - 更好的阅读体验 */
+.post-content {
+  line-height: 1.8;
+  color: #333;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+.post-content p {
+  margin-bottom: 15px;
+}
+
+/* 图片容器 - 圆角+阴影 */
+.post-image-container, .comment-image-container {
+  margin: 20px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.post-image-container:hover, .comment-image-container:hover {
+  transform: scale(1.02);
+}
+
+.post-image, .comment-image {
+  width: 100%;
+  height: auto;
+  max-height: 500px;
+  object-fit: contain;
+  display: block;
+}
+
+/* 帖子操作按钮 - 悬浮效果 */
+.post-actions {
+  display: flex;
+  gap: 15px;
+  margin-top: 25px;
+}
+
+.like-button, .solve-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.like-button {
+  background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+  color: #666;
+}
+
+.like-button:hover {
+  background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.like-button.liked {
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  color: #1890ff;
+}
+
+.solve-button {
+  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
+  color: #52c41a;
+}
+
+.solve-button:hover {
+  background: linear-gradient(135deg, #e6ffd1 0%, #b7eb8f 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(82, 196, 26, 0.2);
+}
+
+.solve-button.solved {
+  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+  color: white;
+}
+
+/* 评论区域 */
+.comments-section {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.comments-section h2 {
+  font-size: 22px;
+  color: #1e3c72;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f2f5;
+}
+
+/* 评论表单 - 现代设计 */
+.comment-form {
+  margin-bottom: 30px;
+}
+
+.comment-form textarea {
+  width: 100%;
+  padding: 15px;
+  border: 2px solid #f0f2f5;
+  border-radius: 8px;
+  resize: vertical;
+  min-height: 100px;
+  margin-bottom: 15px;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
+}
+
+.comment-form button[type="submit"] {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.comment-form button[type="submit"]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+/* 图片上传按钮 - 现代风格 */
+.upload-image-btn {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.upload-image-btn input[type="file"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.upload-image-btn label {
+  display: inline-block;
+  padding: 8px 16px;
+  background: #f0f2f5;
+  border-radius: 6px;
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.upload-image-btn label:hover {
+  background: #e4e6eb;
+}
+
+/* 评论列表 - 卡片式设计 */
+.comment-list {
+  margin-top: 25px;
+}
+
+.comment-item {
+  display: flex;
+  padding: 20px;
+  margin-bottom: 20px;
+  background: #f9fafc;
+  border-radius: 10px;
+  transition: all 0.3s;
+  position: relative;
+}
+
+.comment-item:hover {
+  background: #f0f4f8;
+  transform: translateX(5px);
+}
+
+.comment-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px;
+  object-fit: cover;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  flex-shrink: 0;
 }
 
 .comment-content {
@@ -340,163 +363,66 @@
 
 .comment-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
-.comment-author {
-  font-weight: bold;
-  margin-right: 10px;
-  color: #333;
+.comment-user {
+  font-weight: 700;
+  color: #1e3c72;
 }
 
-.comment-date {
-  font-size: 12px;
-  color: #999;
+.reply-to {
+  color: #666;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.comment-time {
+  color: #888;
+  font-size: 13px;
 }
 
 .comment-text {
-  margin-bottom: 10px;
-  line-height: 1.5;
+  line-height: 1.7;
   color: #333;
+  margin-bottom: 15px;
 }
 
 .comment-actions {
   display: flex;
-  align-items: center;
-  margin-top: 10px;
+  gap: 15px;
 }
 
-.like-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: #666;
-  font-size: 14px;
-  padding: 4px 8px;
-  display: flex;
-  align-items: center;
-}
-
-.like-button.liked {
-  color: #1877f2;
-}
-
-.like-button:hover {
-  text-decoration: underline;
-}
-
-/* 回复控制按钮 */
-.reply-controls {
-  margin: 10px 0;
-}
-
-.toggle-replies-btn {
+.comment-actions button {
   background: none;
   border: none;
   color: #666;
-  cursor: pointer;
   font-size: 14px;
-  padding: 4px 8px;
-}
-
-.toggle-replies-btn:hover {
-  color: #333;
-  text-decoration: underline;
-}
-
-.toggle-replies-btn:disabled {
-  color: #ccc;
-  cursor: not-allowed;
-}
-
-/* 回复表单 */
-.reply-form {
-  margin-top: 10px;
-  width: 100%;
-}
-
-.reply-form textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  resize: vertical;
-  min-height: 60px;
-  margin-bottom: 8px;
-}
-
-.submit-reply {
-  background-color: #f0f2f5;
-  border: none;
-  border-radius: 4px;
-  padding: 6px 12px;
   cursor: pointer;
-  color: #333;
-}
-
-.submit-reply:hover {
-  background-color: #e4e6eb;
-}
-
-/* 回复列表 */
-.reply-list {
-  margin-left: 55px; /* 头像宽度 + 边距 */
-  border-left: 2px solid #eee;
-  padding-left: 15px;
-  margin-top: 15px;
-}
-
-.reply-item {
-  display: flex;
-  margin-bottom: 15px;
-  padding: 12px;
-  background: #f9f9f9;
-  border-radius: 6px;
-}
-
-.reply-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  margin-right: 10px;
-  object-fit: cover;
-}
-
-.reply-content {
-  flex: 1;
-}
-
-.reply-header {
+  transition: all 0.3s;
+  padding: 5px 10px;
+  border-radius: 4px;
   display: flex;
   align-items: center;
-  margin-bottom: 5px;
+  gap: 5px;
 }
 
-.reply-author {
-  font-weight: bold;
-  margin-right: 8px;
-  font-size: 14px;
-  color: #333;
+.comment-actions button:hover {
+  color: #1e3c72;
+  background: rgba(30, 60, 114, 0.1);
 }
 
-.reply-date {
-  font-size: 12px;
-  color: #999;
+.delete-comment-btn {
+  color: #ff4d4f !important;
 }
 
-.reply-text {
-  font-size: 14px;
-  line-height: 1.4;
-  color: #333;
-  margin-bottom: 5px;
+.delete-comment-btn:hover {
+  background: rgba(255, 77, 79, 0.1) !important;
 }
 
-.reply-actions {
-  margin-top: 5px;
-}
-
-/* 回复弹窗样式 */
+/* 回复弹窗 - 现代化设计 */
 .reply-modal-overlay {
   position: fixed;
   top: 0;
@@ -508,79 +434,130 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  backdrop-filter: blur(5px);
 }
 
 .reply-modal {
   background: white;
-  padding: 20px;
-  border-radius: 8px;
+  padding: 25px;
+  border-radius: 12px;
   width: 500px;
   max-width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  position: relative;
 }
 
-.reply-modal h3 {
-  margin-top: 0;
-  margin-bottom: 15px;
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.close-modal {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.close-modal:hover {
+  color: #1e3c72;
+  transform: rotate(90deg);
 }
 
 .reply-modal textarea {
   width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  padding: 15px;
+  border: 2px solid #f0f2f5;
+  border-radius: 8px;
   resize: vertical;
-  min-height: 100px;
+  min-height: 120px;
   margin-bottom: 15px;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.reply-modal textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
 }
 
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  gap: 15px;
 }
 
-.cancel-button {
+.cancel-btn {
+  padding: 10px 20px;
   background: #f5f5f5;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  padding: 8px 16px;
+  color: #666;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.3s;
 }
 
-.submit-button {
-  background: #1890ff;
+.cancel-btn:hover {
+  background: #e0e0e0;
+}
+
+.submit-btn {
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  border-radius: 4px;
-  padding: 8px 16px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.3s;
 }
 
-.post-image-container {
-  width: 100%;
-  max-width: 500px; /* 最大宽度 */
-  margin: 10px 0;
+.submit-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
-.post-image {
-  width: 100%;
-  height: auto;
-  max-height: 400px; /* 最大高度 */
-  object-fit: contain; /* 保持比例完整显示图片 */
-  border-radius: 4px;
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .help-detail-container {
+    padding: 15px;
+  }
+  
+  .post-title {
+    font-size: 24px;
+  }
+  
+  .post-actions {
+    flex-direction: column;
+  }
+  
+  .comment-item {
+    flex-direction: column;
+  }
+  
+  .comment-avatar {
+    margin-bottom: 15px;
+  }
 }
 
-.comment-image-container {
-  width: 100%;
-  max-width: 500px; /* 最大宽度 */
-  margin: 10px 0;
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.comment-image {
-  width: 100%;
-  height: auto;
-  max-height: 400px; /* 最大高度 */
-  object-fit: contain; /* 保持比例完整显示图片 */
-  border-radius: 4px;
-}
-
+.help-post, .comments-section {
+  animation: fadeIn 0.5s ease-out forwards;
+}
\ No newline at end of file
diff --git a/src/components/HelpDetail.jsx b/src/components/HelpDetail.jsx
index 1e35aec..e654200 100644
--- a/src/components/HelpDetail.jsx
+++ b/src/components/HelpDetail.jsx
@@ -324,7 +324,7 @@
   return (
     <div className="help-detail-container">
       <button className="back-button" onClick={handleBack}>
-        &larr; 返回求助区
+        返回求助区
       </button>
       
       <div className={`help-post ${post.isSolved ? 'solved' : ''}`}>
diff --git a/src/components/Personal/ActionCard.jsx b/src/components/Personal/ActionCard.jsx
index 7d3cd4f..0a62b1b 100644
--- a/src/components/Personal/ActionCard.jsx
+++ b/src/components/Personal/ActionCard.jsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+// import React from 'react';
+// import PropTypes from 'prop-types';
 
-const ActionCard = ({ title, subtitle, icon, onClick }) => {
-  return (
-    <div className="action-card" onClick={onClick}>
-      {icon && <div className="action-icon">{icon}</div>}
-      <div className="action-content">
-        <h3>{title}</h3>
-        <p>{subtitle}</p>
-      </div>
-    </div>
-  );
-};
+// const ActionCard = ({ title, subtitle, icon, onClick }) => {
+//   return (
+//     <div className="action-card" onClick={onClick}>
+//       {icon && <div className="action-icon">{icon}</div>}
+//       <div className="action-content">
+//         <h3>{title}</h3>
+//         <p>{subtitle}</p>
+//       </div>
+//     </div>
+//   );
+// };
 
-ActionCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  icon: PropTypes.node,
-  onClick: PropTypes.func
-};
+// ActionCard.propTypes = {
+//   title: PropTypes.string.isRequired,
+//   subtitle: PropTypes.string,
+//   icon: PropTypes.node,
+//   onClick: PropTypes.func
+// };
 
-export default ActionCard;
\ No newline at end of file
+// export default ActionCard;
\ No newline at end of file
diff --git a/src/components/Personal/Exchange.jsx b/src/components/Personal/Exchange.jsx
index 1e5b2e8..f6766ae 100644
--- a/src/components/Personal/Exchange.jsx
+++ b/src/components/Personal/Exchange.jsx
@@ -88,7 +88,7 @@
     return (
       <div className="subpage-container">
         <button className="back-button" onClick={handleBack}>
-          ← 返回个人中心
+      返回个人中心
         </button>
         <div className="error">错误: {error}</div>
       </div>
@@ -98,7 +98,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">兑换区</h2>
diff --git a/src/components/Personal/Exchange.test.jsx b/src/components/Personal/Exchange.test.jsx
index 20fe641..31abe48 100644
--- a/src/components/Personal/Exchange.test.jsx
+++ b/src/components/Personal/Exchange.test.jsx
@@ -125,7 +125,7 @@
     );
 
     await waitFor(() => {
-      const backButton = screen.getByText(/← 返回个人中心/);
+      const backButton = screen.getByText(/返回个人中心/);
       fireEvent.click(backButton);
       
       expect(mockNavigate).toHaveBeenCalledWith('/personal', {
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>
   );
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
index 28a1adb..69006d2 100644
--- a/src/components/Personal/Personal.css
+++ b/src/components/Personal/Personal.css
@@ -1,217 +1,95 @@
-/* Personal.css */
+/* Personal.css - 现代化设计 */
 .personal-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    cursor: pointer;
-    font-size: 16px;
-    margin-bottom: 20px;
-    padding: 5px 0;
-  }
-  
-  .profile-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .profile-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  
-  .profile-avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin-right: 20px;
-    object-fit: cover;
-  }
-  
-  .profile-info {
-    flex-grow: 1;
-  }
-  
-  .username {
-    font-size: 24px;
-    margin: 0 0 5px;
-  }
-  
-  .user-meta {
-    display: flex;
-    gap: 15px;
-    color: #666;
-    font-size: 14px;
-  }
-  
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
-  }
-  
-  .stat-item {
-    background: #f5f5f5;
-    border-radius: 6px;
-    padding: 15px;
-    text-align: center;
-  }
-  
-  .stat-label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 5px;
-  }
-  
-  .stat-value {
-    font-size: 18px;
-    font-weight: bold;
-  }
-  
-  .quota-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .quota-card h3 {
-    margin-top: 0;
-    margin-bottom: 15px;
-  }
-  
-  .quota-info {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-  
-  .quota-used {
-    color: #1890ff;
-  }
-  
-  .quota-remaining {
-    color: #52c41a;
-  }
-  
-  .progress-bar {
-    height: 10px;
-    background: #f0f0f0;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    overflow: hidden;
-  }
-  
-  .progress-fill {
-    height: 100%;
-    background: #1890ff;
-    border-radius: 5px;
-    transition: width 0.3s ease;
-  }
-  
-  .quota-total {
-    text-align: right;
-    color: #666;
-    font-size: 14px;
-  }
-  
-  .action-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px;
-  }
-  
-  .action-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: transform 0.2s ease;
-  }
-  
-  .action-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
-  
-  .action-card h3 {
-    margin-top: 0;
-    color: #1890ff;
-  }
-  
-  .action-card p {
-    color: #666;
-    margin-bottom: 0;
-  }
-
-  .subpage-container {
-    margin-top: 20px;
-    border-top: 1px solid #f0f0f0;
-    padding-top: 20px;
-  }
-
-
-  /* Personal.css */
-/* ... 其他已有样式 ... */
-
-/* 下载进度卡片样式 */
-.progress-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 25px;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  animation: fadeIn 0.5s ease-out forwards;
 }
 
-.download-task {
-  margin-bottom: 15px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
 }
 
-.task-info {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 5px;
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
-.task-id {
-  font-size: 14px;
-  color: #666;
+.back-button::before {
+  content: "←";
 }
 
-.task-progress {
-  font-size: 14px;
-  font-weight: bold;
-  color: #1890ff;
-}
-
-.progress-bar {
-  height: 8px;
-  background: #f0f0f0;
-  border-radius: 4px;
+/* 用户资料卡片 - 3D效果 */
+.profile-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
   overflow: hidden;
 }
 
-.progress-fill {
-  height: 100%;
-  background: #1890ff;
-  border-radius: 4px;
-  transition: width 0.3s ease;
+.profile-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
 }
 
+.profile-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}
+
+.profile-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-right: 25px;
+  object-fit: cover;
+  border: 4px solid rgba(30, 60, 114, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.profile-avatar:hover {
+  transform: scale(1.05);
+}
+
+.username {
+  font-size: 28px;
+  margin: 0 0 10px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+.user-meta {
+  display: flex;
+  gap: 20px;
+}
 
 .user-meta span {
-  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 15px;
   color: #666;
 }
 
@@ -219,3 +97,221 @@
   color: #ff9800;
   font-weight: bold;
 }
+
+/* 统计数据网格 - 卡片式设计 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.stat-item {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  transition: transform 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.stat-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+  font-size: 15px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1e3c72;
+}
+
+/* 下载额度卡片 - 渐变色 */
+.quota-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.quota-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.quota-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  font-size: 15px;
+}
+
+.quota-used {
+  color: #ff4d4f;
+  font-weight: 600;
+}
+
+.quota-remaining {
+  color: #52c41a;
+  font-weight: 600;
+}
+
+.progress-bar {
+  height: 12px;
+  background: #f0f2f5;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.5s ease;
+}
+
+.quota-total {
+  text-align: right;
+  color: #666;
+  font-size: 14px;
+}
+
+/* 下载进度卡片 */
+.progress-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.progress-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.download-task {
+  margin-bottom: 20px;
+}
+
+.task-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.task-id {
+  font-size: 15px;
+  color: #666;
+}
+
+.task-progress {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+/* 功能卡片区 - 网格布局 */
+.action-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.action-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid rgba(30, 60, 114, 0.1);
+  text-align: center;
+}
+
+.action-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  border-color: rgba(30, 60, 114, 0.2);
+}
+
+.action-card h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.action-card p {
+  color: #666;
+  margin-bottom: 0;
+  font-size: 15px;
+}
+
+/* 子页面容器 */
+.subpage-container {
+  margin-top: 30px;
+  border-top: 2px solid #f0f2f5;
+  padding-top: 30px;
+}
+
+/* 加载和错误状态 */
+.loading, .error {
+  text-align: center;
+  padding: 50px;
+  font-size: 18px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  margin: 20px 0;
+}
+
+.error {
+  color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .personal-container {
+    padding: 15px;
+  }
+  
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .profile-avatar {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .user-meta {
+    justify-content: center;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .action-cards {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
index 8c60baf..8199b4b 100644
--- a/src/components/Personal/Personal.jsx
+++ b/src/components/Personal/Personal.jsx
@@ -141,7 +141,7 @@
     <div className="personal-container">
       {/* 返回按钮 */}
       <button className="back-button" onClick={handleBack}>
-        &larr; 返回
+      返回
       </button>
       
       {/* 用户基本信息卡片 */}
diff --git a/src/components/Personal/Setting.jsx b/src/components/Personal/Setting.jsx
index 9ba07e8..5b6f730 100644
--- a/src/components/Personal/Setting.jsx
+++ b/src/components/Personal/Setting.jsx
@@ -87,7 +87,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">个人设置</h2>
diff --git a/src/components/Personal/Setting.test.jsx b/src/components/Personal/Setting.test.jsx
index e8b1cc0..02011be 100644
--- a/src/components/Personal/Setting.test.jsx
+++ b/src/components/Personal/Setting.test.jsx
@@ -149,7 +149,7 @@
       </MemoryRouter>
     );
 
-    const backButton = screen.getByText(/← 返回个人中心/);
+    const backButton = screen.getByText(/返回个人中心/);
     fireEvent.click(backButton);
     
     expect(mockNavigate).toHaveBeenCalledWith('/personal', {
diff --git a/src/components/Personal/Upload.jsx b/src/components/Personal/Upload.jsx
index 2d91b30..336f721 100644
--- a/src/components/Personal/Upload.jsx
+++ b/src/components/Personal/Upload.jsx
@@ -112,7 +112,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">上传记录</h2>
diff --git a/src/components/Personal/personalSubpage.css b/src/components/Personal/personalSubpage.css
index 2ba8687..ff587e2 100644
--- a/src/components/Personal/personalSubpage.css
+++ b/src/components/Personal/personalSubpage.css
@@ -1,336 +1,553 @@
+/* personalSubpage.css - 现代化设计 */
+
 /* 上传记录表格样式 */
 .uploads-table {
   width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 25px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .uploads-table th, .uploads-table td {
-  padding: 12px 15px;
+  padding: 15px;
   text-align: left;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #f0f2f5;
 }
 
 .uploads-table th {
-  background-color: #f5f5f5;
+  background-color: #1e3c72;
+  color: white;
   font-weight: 600;
+  text-transform: uppercase;
+  font-size: 14px;
 }
 
-.list-item:hover {
-  background-color: #f9f9f9;
+.uploads-table tr:last-child td {
+  border-bottom: none;
+}
+
+.uploads-table tr:hover td {
+  background-color: #f9fafc;
 }
 
 /* 操作按钮样式 */
 .action-btn {
-  padding: 6px 12px;
+  padding: 8px 16px;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
-  transition: background-color 0.2s;
+  font-weight: 600;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .delete-btn {
-  background-color: #ff4d4f;
+  background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
   color: white;
 }
 
 .delete-btn:hover {
-  background-color: #ff7875;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
 }
 
 /* 分页控件样式 */
 .pagination {
-  margin-top: 20px;
+  margin-top: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 15px;
-}
-
-.pagination button {
-  padding: 6px 12px;
-  border: 1px solid #d9d9d9;
-  background-color: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.pagination button:disabled {
-  color: #d9d9d9;
-  cursor: not-allowed;
-}
-
-.pagination button:not(:disabled):hover {
-  border-color: #1890ff;
-  color: #1890ff;
-}
-
-/* 分页控件样式 */
-.pagination {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .page-nav, .page-number {
-  padding: 6px 12px;
+  padding: 8px 16px;
   border: 1px solid #d9d9d9;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: white;
+  color:#333;
+  border-radius: 6px;
   cursor: pointer;
-  min-width: 32px;
+  min-width: 40px;
   text-align: center;
+  transition: all 0.3s;
+  font-weight: 600;
 }
 
 .page-nav:disabled, .page-number:disabled {
-  color: #d9d9d9;
+  color: #070202;
   cursor: not-allowed;
 }
 
 .page-nav:not(:disabled):hover, 
 .page-number:not(:disabled):hover {
-  border-color: #1890ff;
-  color: #1890ff;
+  border-color: #1e3c72;
+  color: #1e3c72;
+  transform: translateY(-2px);
 }
 
 .page-number.active {
-  background-color: #1890ff;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
-  border-color: #1890ff;
+  border-color: #1e3c72;
 }
 
 .ellipsis {
-  padding: 0 8px;
+  padding: 0 12px;
 }
 
 .page-info {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-left: 15px;
+  gap: 10px;
+  margin-left: 20px;
 }
 
 .page-info input {
-  width: 50px;
-  padding: 4px;
+  width: 60px;
+  padding: 8px;
   border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  border-radius: 6px;
   text-align: center;
+  font-weight: 600;
 }
 
 .page-info input:focus {
   outline: none;
-  border-color: #1890ff;
-}
-
-/* 调整表格列宽 */
-.uploads-table th:nth-child(1),
-.uploads-table td:nth-child(1) {
-  width: 30%;
-}
-
-.uploads-table th:nth-child(2),
-.uploads-table td:nth-child(2) {
-  width: 15%;
-}
-
-.uploads-table th:nth-child(3),
-.uploads-table td:nth-child(3) {
-  width: 20%;
-}
-
-.uploads-table th:nth-child(4),
-.uploads-table td:nth-child(4) {
-  width: 15%;
-  text-align: center;
-}
-
-.uploads-table th:nth-child(5),
-.uploads-table td:nth-child(5) {
-  width: 20%;
-  text-align: center;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
 }
 
 /* 兑换区样式 */
 .exchange-section {
-  margin-top: 20px;
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
+  margin-top: 30px;
+  padding: 25px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .exchange-card {
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 25px;
+  padding: 20px;
+  background: #f9fafc;
+  border-radius: 10px;
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s;
+}
+
+.exchange-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .exchange-card h4 {
   margin-top: 0;
-  color: #333;
+  color: #1e3c72;
+  font-size: 18px;
 }
 
 .exchange-card p {
   color: #666;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
+  font-size: 15px;
 }
 
 .exchange-btn {
-  padding: 8px 16px;
-  background-color: #1890ff;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.3s;
+  font-weight: 600;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .exchange-btn:hover {
-  background-color: #40a9ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
 .exchange-btn:disabled {
-  background-color: #d9d9d9;
+  background: #d9d9d9;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 .exchange-input-group {
   display: flex;
-  gap: 10px;
-  margin-top: 10px;
+  gap: 15px;
+  margin-top: 15px;
 }
 
 .exchange-input-group input {
   flex: 1;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-size: 15px;
+}
+
+.exchange-input-group input:focus {
+  outline: none;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
 }
 
 .invite-code-list {
-  margin-top: 20px;
+  margin-top: 25px;
 }
 
 .invite-code-list ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .invite-code-list li {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
-  border-bottom: 1px solid #eee;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #f0f2f5;
+  transition: all 0.3s;
+}
+
+.invite-code-list li:hover {
+  background-color: #f9fafc;
 }
 
 .invite-code-list .code {
   font-family: monospace;
+  font-size: 16px;
+  color: #1e3c72;
 }
 
 .invite-code-list .status {
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .invite-code-list .status.available {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border: 1px solid #b7eb8f;
+  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+  color: white;
 }
 
 .invite-code-list .status.used {
+  background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
+  color: white;
+}
+
+/* 设置页面样式 */
+.setting-section {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 25px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.user-info-card, .password-form-card {
+  background: #f9fafc;
+  border-radius: 10px;
+  padding: 25px;
+  margin-bottom: 25px;
+  border: 1px solid #f0f2f5;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 15px;
+  align-items: center;
+}
+
+.info-item label {
+  font-weight: 600;
+  width: 150px;
+  color: #1e3c72;
+}
+
+.info-item span {
+  flex: 1;
+  color: #333;
+}
+
+.info-note {
+  color: #666;
+  font-size: 14px;
+  margin-top: 15px;
+  line-height: 1.6;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #1e3c72;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+}
+
+.submit-button {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+.submit-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.submit-button:disabled {
+  background: #d9d9d9;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.error-message {
+  color: #ff4d4f;
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #fff2f0;
+  border-radius: 6px;
+  border: 1px solid #ffccc7;
+}
+
+.success-message {
+  color: #52c41a;
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f6ffed;
+  border-radius: 6px;
+  border: 1px solid #b7eb8f;
+}
+
+.subpage-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 25px;
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+  content: "←";
+}
+
+.page-title {
+  font-size: 24px;
+  margin: 0 0 25px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f2f5;
+}
+
+.loading-message, .error-message {
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.loading-message {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.error-message {
   background-color: #fff2f0;
   color: #ff4d4f;
   border: 1px solid #ffccc7;
 }
 
-
-/* personalSubpage.css 中添加以下样式 */
-
-.setting-section {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
+.notice-list {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 }
 
-.user-info-card, .password-form-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.info-item {
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.info-item label {
-  font-weight: bold;
-  width: 100px;
-}
-
-.info-item span {
-  flex: 1;
-}
-
-.info-note {
+.empty-notice {
+  text-align: center;
+  padding: 50px 20px;
   color: #666;
-  font-size: 0.9em;
-  margin-top: 10px;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.submit-button {
-  background-color: #4CAF50;
-  color: white;
-  padding: 10px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
   font-size: 16px;
 }
 
-.submit-button:hover {
-  background-color: #45a049;
+.list-item {
+  padding: 20px;
+  border-bottom: 1px solid #f0f2f5;
+  transition: all 0.3s;
+  cursor: pointer;
 }
 
-.submit-button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
+.list-item:last-child {
+  border-bottom: none;
 }
 
-.error-message {
-  color: #f44336;
-  margin-bottom: 15px;
+.list-item:hover {
+  background-color: #f9fafc;
+  transform: translateX(5px);
 }
 
-.success-message {
-  color: #4CAF50;
-  margin-bottom: 15px;
+.list-item.unread {
+  background-color: #f0f7ff;
+}
+
+.notice-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.notice-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #1e3c72;
+  font-weight: 600;
+}
+
+.notice-date {
+  font-size: 14px;
+  color: #888;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.unread-badge {
+  background: #ff4d4f;
+  color: white;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.notice-content {
+  margin: 0;
+  color: #333;
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .uploads-table {
+    display: block;
+    overflow-x: auto;
+  }
+  
+  .exchange-input-group {
+    flex-direction: column;
+  }
+  
+  .info-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .info-item label {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+  
+  .pagination {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .page-info {
+    margin-left: 0;
+    margin-top: 15px;
+  }
+  .subpage-container {
+    padding: 15px;
+  }
+  
+  .notice-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+  
+  .list-item:hover {
+    transform: none;
+  }
 }
\ No newline at end of file
diff --git a/src/components/RequestDetail.css b/src/components/RequestDetail.css
index 0d47b71..6d544c9 100644
--- a/src/components/RequestDetail.css
+++ b/src/components/RequestDetail.css
@@ -1,213 +1,425 @@
-/* RequestDetail.css */
+/* RequestDetail.css - 个性化版本 */
 .request-detail-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    cursor: pointer;
-    font-size: 16px;
-    margin-bottom: 20px;
-    padding: 5px 0;
-  }
-  
-  .request-post {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .post-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-  }
-  
-  .post-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  
-  .post-meta {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .post-author {
-    font-weight: bold;
-  }
-  
-  .post-date {
-    color: #888;
-    font-size: 14px;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* 返回按钮 - 渐变风格 */
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 25px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+  content: "←";
+}
+
+/* 求种帖子卡片 - 3D悬浮效果 */
+.request-post {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 30px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+
+.request-post:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+/* 帖子头部 - 圆形头像+渐变背景 */
+.post-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.post-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px;
+  object-fit: cover;
+  border: 3px solid rgba(30, 60, 114, 0.2);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+.post-meta {
+  flex: 1;
+}
+
+.post-author {
+  font-weight: 700;
+  color: #1e3c72;
+  font-size: 18px;
+}
+
+.post-date {
+  color: #666;
+  font-size: 14px;
+  margin-top: 3px;
+}
+
+/* 帖子标题 - 渐变文字 */
+.post-title {
+  font-size: 28px;
+  margin: 0 0 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+/* 帖子内容 - 更好的阅读体验 */
+.post-content {
+  line-height: 1.8;
+  color: #333;
+  font-size: 16px;
+  margin-bottom: 25px;
+}
+
+.post-content p {
+  margin-bottom: 15px;
+}
+
+/* 图片容器 - 圆角+阴影 */
+.post-image-container {
+  margin: 20px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.post-image-container:hover {
+  transform: scale(1.02);
+}
+
+.post-image {
+  width: 100%;
+  height: auto;
+  max-height: 500px;
+  object-fit: contain;
+  display: block;
+}
+
+/* 帖子操作按钮 - 悬浮效果 */
+.post-actions {
+  display: flex;
+  gap: 15px;
+  margin-top: 25px;
+}
+
+.like-button, .favorite-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.like-button {
+  background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+  color: #666;
+}
+
+.like-button:hover {
+  background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.like-button.liked {
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  color: #1890ff;
+}
+
+.favorite-button {
+  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
+  color: #fa8c16;
+}
+
+.favorite-button:hover {
+  background: linear-gradient(135deg, #ffefd1 0%, #ffd591 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(250, 140, 22, 0.2);
+}
+
+.favorite-button.favorited {
+  background: linear-gradient(135deg, #fa8c16 0%, #ffc53d 100%);
+  color: white;
+}
+
+/* 评论区域 */
+.comments-section {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.comments-section h2 {
+  font-size: 22px;
+  color: #1e3c72;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f2f5;
+}
+
+/* 评论表单 - 现代设计 */
+.comment-form {
+  margin-bottom: 30px;
+}
+
+.comment-form textarea {
+  width: 100%;
+  padding: 15px;
+  border: 2px solid #f0f2f5;
+  border-radius: 8px;
+  resize: vertical;
+  min-height: 100px;
+  margin-bottom: 15px;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
+}
+
+.form-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.submit-comment {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.submit-comment:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.submit-torrent {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.submit-torrent:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+}
+
+/* 评论列表 - 卡片式设计 */
+.comment-list {
+  margin-top: 25px;
+}
+
+.comment-item {
+  display: flex;
+  padding: 20px;
+  margin-bottom: 20px;
+  background: #f9fafc;
+  border-radius: 10px;
+  transition: all 0.3s;
+}
+
+.comment-item:hover {
+  background: #f0f4f8;
+  transform: translateX(5px);
+}
+
+.comment-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px;
+  object-fit: cover;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.comment-content {
+  flex-grow: 1;
+}
+
+.comment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.comment-author {
+  font-weight: 700;
+  color: #1e3c72;
+}
+
+.comment-date {
+  color: #888;
+  font-size: 13px;
+}
+
+.comment-text {
+  line-height: 1.7;
+  color: #333;
+  margin-bottom: 15px;
+}
+
+/* 种子评论特殊样式 */
+.torrent-comment {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  border-radius: 8px;
+  margin-bottom: 15px;
+  transition: all 0.3s;
+}
+
+.torrent-comment:hover {
+  background: linear-gradient(135deg, #d0e8ff 0%, #a0d0ff 100%);
+}
+
+.torrent-title {
+  color: #1e3c72;
+  font-weight: 600;
+  flex-grow: 1;
+}
+
+.torrent-size {
+  color: #666;
+  font-size: 14px;
+  margin: 0 15px;
+}
+
+.download-torrent {
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.download-torrent:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.comment-like {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.comment-like:hover {
+  color: #1e3c72;
+  background: rgba(30, 60, 114, 0.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .request-detail-container {
+    padding: 15px;
   }
   
   .post-title {
-    font-size: 20px;
-    margin: 0 0 15px;
-  }
-  
-  .post-content {
-    line-height: 1.6;
-    margin-bottom: 15px;
+    font-size: 24px;
   }
   
   .post-actions {
-    display: flex;
-    gap: 15px;
+    flex-direction: column;
   }
   
-  .like-button, .favorite-button {
-    padding: 5px 15px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    background: #f5f5f5;
-    cursor: pointer;
-  }
-  
-  .like-button.liked {
-    background: #e6f7ff;
-    border-color: #91d5ff;
-    color: #1890ff;
-  }
-  
-  .favorite-button.favorited {
-    background: #fff7e6;
-    border-color: #ffd591;
-    color: #fa8c16;
-  }
-  
-  .comments-section {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .comment-form {
-    margin-bottom: 20px;
-  }
-  
-  .comment-form textarea {
-    width: 100%;
-    padding: 10px;
-    border-radius: 4px;
-    border: 1px solid #ddd;
-    resize: vertical;
-    min-height: 80px;
-    margin-bottom: 10px;
-  }
-  
-  .form-actions {
-    display: flex;
-    gap: 10px;
-  }
-  
-  .submit-comment, .submit-torrent {
-    padding: 8px 16px;
-    border-radius: 4px;
-    border: none;
-    cursor: pointer;
-  }
-  
-  .submit-comment {
-    background: #1890ff;
-    color: white;
-  }
-  
-  .submit-torrent {
-    background: #52c41a;
-    color: white;
-  }
-  
-  .comment-list {
-    margin-top: 20px;
-  }
-  
-  .comment-item {
-    display: flex;
-    padding: 15px 0;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  
-  .comment-item:last-child {
-    border-bottom: none;
+  .comment-item, .torrent-comment {
+    flex-direction: column;
   }
   
   .comment-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    margin-right: 15px;
-    flex-shrink: 0;
-  }
-  
-  .comment-content {
-    flex-grow: 1;
-  }
-  
-  .comment-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 8px;
-  }
-  
-  .comment-author {
-    font-weight: bold;
-  }
-  
-  .comment-date {
-    color: #888;
-    font-size: 14px;
-  }
-  
-  .comment-text {
-    line-height: 1.6;
-    margin-bottom: 8px;
+    margin-bottom: 15px;
   }
   
   .torrent-comment {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-    padding: 8px;
-    background: #f0f8ff;
-    border-radius: 4px;
-  }
-  
-  .torrent-title {
-    color: #1890ff;
-    flex-grow: 1;
+    align-items: flex-start;
   }
   
   .torrent-size {
-    color: #666;
-    margin: 0 15px;
-    font-size: 14px;
+    margin: 10px 0;
   }
-  
-  .download-torrent {
-    background: #1890ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 5px 10px;
-    cursor: pointer;
-  }
-  
-  .comment-like {
-    background: none;
-    border: none;
-    color: #666;
-    cursor: pointer;
-    font-size: 14px;
-    padding: 0;
-  }
\ No newline at end of file
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.request-post, .comments-section {
+  animation: fadeIn 0.5s ease-out forwards;
+}
\ No newline at end of file
diff --git a/src/components/RequestDetail.jsx b/src/components/RequestDetail.jsx
index c138419..d5ecdf7 100644
--- a/src/components/RequestDetail.jsx
+++ b/src/components/RequestDetail.jsx
@@ -324,7 +324,7 @@
   return (
     <div className="request-detail-container">
       <button className="back-button" onClick={handleBack}>
-        &larr; 返回求助区
+      返回求种区
       </button>
       
       <div className={`request-post ${post.isSolved ? 'solved' : ''}`}>
diff --git a/src/components/TorrentDetail.css b/src/components/TorrentDetail.css
index f2b1ad2..ec708ee 100644
--- a/src/components/TorrentDetail.css
+++ b/src/components/TorrentDetail.css
@@ -1,30 +1,54 @@
-/* 基础布局样式 */
+/* 基础布局样式 - 现代化设计 */
 .torrent-detail-container {
   max-width: 1000px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 25px;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   color: #333;
+  animation: fadeIn 0.5s ease-out forwards;
 }
 
+/* 返回按钮 - 渐变风格 */
 .back-button {
-  background: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
   border: none;
-  color: #3498db;
-  font-size: 16px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
-  margin-bottom: 20px;
-  padding: 5px 10px;
+  transition: all 0.3s;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
 }
 
 .back-button:hover {
-  text-decoration: underline;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
-/* 种子信息区域 */
+.back-button::before {
+  content: "←";
+}
+
+/* 种子信息区域 - 卡片式设计 */
 .torrent-main {
   display: flex;
   gap: 30px;
   margin-bottom: 40px;
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.torrent-main:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
 }
 
 .torrent-cover {
@@ -34,42 +58,57 @@
 .cover-placeholder {
   width: 100%;
   height: 450px;
-  background-color: #eee;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 72px;
-  color: #999;
-  border-radius: 5px;
+  color: #1e3c72;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.cover-placeholder:hover {
+  transform: scale(1.02);
 }
 
 .torrent-info {
   flex: 1;
 }
 
+/* 标题样式 - 渐变文字 */
 .torrent-title {
-  font-size: 28px;
+  font-size: 32px;
   margin-bottom: 20px;
-  color: #222;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
 }
 
+/* 上传者信息 - 圆形头像 */
 .uploader-info {
   display: flex;
   align-items: center;
   gap: 15px;
-  margin-bottom: 20px;
+  margin-bottom: 25px;
+  position: relative;
 }
 
 .uploader-avatar {
-  width: 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
-  background-color: #3498db;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
+  font-size: 20px;
+  flex-shrink: 0;
+  border: 3px solid rgba(30, 60, 114, 0.2);
 }
 
 .uploader-details {
@@ -77,142 +116,188 @@
 }
 
 .uploader-name {
-  font-weight: bold;
+  font-weight: 700;
+  color: #1e3c72;
+  font-size: 18px;
 }
 
 .upload-time {
   font-size: 14px;
   color: #777;
+  margin-top: 3px;
 }
 
+/* 种子元信息 - 网格布局 */
 .torrent-meta {
-  margin-bottom: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 15px;
+  margin-bottom: 25px;
+  padding: 15px;
+  background: #f9fafc;
+  border-radius: 8px;
 }
 
 .torrent-meta p {
-  margin: 5px 0;
+  margin: 0;
+  font-size: 15px;
 }
 
+.torrent-meta strong {
+  color: #1e3c72;
+  margin-right: 8px;
+}
+
+/* 描述区域 - 更好的阅读体验 */
 .torrent-description {
   margin-bottom: 30px;
-  line-height: 1.6;
+  line-height: 1.8;
+  font-size: 16px;
+  padding: 15px;
+  background: #f9fafc;
+  border-radius: 8px;
 }
 
+.torrent-description h3 {
+  color: #1e3c72;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 20px;
+}
+
+/* 交互按钮 - 现代化设计 */
 .interaction-buttons {
   display: flex;
   gap: 15px;
+  margin-top: 25px;
 }
 
 .interaction-buttons button {
-  padding: 8px 15px;
+  padding: 12px 24px;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s;
+  font-size: 15px;
+  font-weight: 600;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .like-button {
-  background-color: #f0f0f0;
+  background: linear-gradient(135deg, #f6f7f9 0%, #e9ebee 100%);
+  color: #666;
 }
 
 .like-button:hover {
-  background-color: #e0e0e0;
+  background: linear-gradient(135deg, #ebedf0 0%, #d8dadf 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .download-button {
-  background-color: #3498db;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
 }
 
 .download-button:hover {
-  background-color: #2980b9;
+  background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
-/* 评论区域样式 */
+/* 评论区域 - 卡片式设计 */
 .comments-section {
-  margin-top: 40px;
+  background: white;
+  border-radius: 12px;
+  padding: 30px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  margin-top: 30px;
 }
 
 .comments-section h2 {
-  font-size: 22px;
+  font-size: 24px;
+  color: #1e3c72;
   margin-bottom: 20px;
   padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 2px solid #f0f2f5;
 }
 
+/* 评论表单 - 现代化设计 */
 .comment-form {
   margin-bottom: 30px;
 }
 
 .comment-form textarea {
   width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  margin-bottom: 10px;
+  padding: 15px;
+  border: 2px solid #f0f2f5;
+  border-radius: 8px;
   resize: vertical;
-  min-height: 80px;
+  min-height: 100px;
+  margin-bottom: 15px;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.comment-form textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
 }
 
 .comment-form button {
-  background-color: #3498db;
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  padding: 8px 15px;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.3s;
 }
 
 .comment-form button:hover {
-  background-color: #2980b9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
+/* 评论列表 - 现代化设计 */
 .comment-list {
-  margin-top: 20px;
+  margin-top: 25px;
 }
 
-/* 评论项统一样式 */
 .comment-container {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .comment-item {
   display: flex;
   gap: 15px;
-  padding: 12px;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #eaeaea;
+  padding: 20px;
+  background: #f9fafc;
+  border-radius: 10px;
+  transition: all 0.3s;
 }
 
-/* 副评论统一缩进 */
-.comment-container.is-reply {
-  margin-left: 40px;
-  position: relative;
-}
-
-/* 副评论连接线 */
-.comment-container.is-reply:before {
-  content: "";
-  position: absolute;
-  left: -20px;
-  top: 20px;
-  width: 15px;
-  height: 1px;
-  background: #ddd;
+.comment-item:hover {
+  background: #f0f4f8;
+  transform: translateX(5px);
 }
 
 .comment-avatar {
-  flex: 0 0 40px;
-  height: 40px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
-  background-color: #e74c3c;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
+  font-size: 20px;
+  flex-shrink: 0;
 }
 
 .comment-content {
@@ -220,28 +305,29 @@
 }
 
 .comment-header {
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .comment-user {
-  font-weight: bold;
+  font-weight: 700;
+  color: #1e3c72;
   margin-right: 10px;
 }
 
 .reply-to {
   color: #666;
   font-size: 14px;
-  margin: 0 5px;
 }
 
 .comment-time {
   font-size: 14px;
-  color: #777;
+  color: #888;
 }
 
 .comment-text {
-  margin-bottom: 10px;
-  line-height: 1.5;
+  margin-bottom: 15px;
+  line-height: 1.7;
+  color: #333;
 }
 
 .comment-actions {
@@ -252,180 +338,106 @@
 .comment-actions button {
   background: none;
   border: none;
-  color: #3498db;
+  color: #666;
   cursor: pointer;
   font-size: 14px;
-  padding: 0;
+  padding: 5px 10px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .comment-actions button:hover {
-  text-decoration: underline;
+  color: #1e3c72;
+  background: rgba(30, 60, 114, 0.1);
 }
 
-/* 回复列表容器 */
-.replies-container {
-  margin-top: 15px;
+/* 副评论样式 */
+.comment-container.is-reply {
+  margin-left: 60px;
+  position: relative;
 }
 
-/* 副评论背景色 */
+.comment-container.is-reply:before {
+  content: "";
+  position: absolute;
+  left: -30px;
+  top: 30px;
+  width: 20px;
+  height: 1px;
+  background: #ddd;
+}
+
 .comment-container.is-reply .comment-item {
-  background: #f9f9f9;
+  background: #f5f7fa;
 }
 
 /* 回复表单样式 */
 .reply-form {
+  margin-left: 65px;
   margin-top: 15px;
-}
-
-.reply-form textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  resize: vertical;
-  min-height: 60px;
-}
-
-.reply-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-}
-
-.reply-actions button {
-  padding: 5px 10px;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.reply-actions button[type="button"] {
-  background-color: #f0f0f0;
-}
-
-.reply-actions button[type="submit"] {
-  background-color: #3498db;
-  color: white;
-}
-
-/* 加载和错误状态 */
-.loading {
-  text-align: center;
-  padding: 50px;
-  font-size: 18px;
-}
-
-.error {
-  color: #e74c3c;
-  text-align: center;
-  padding: 50px;
-  font-size: 18px;
-}
-/* 回复表单样式 */
-.reply-form {
-  margin-left: 50px;
-  margin-top: 10px;
-  background: #f5f5f5;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.reply-form textarea {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  resize: vertical;
-}
-
-.reply-form-buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 8px;
-}
-
-.reply-form-buttons button {
-  padding: 5px 10px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.reply-form-buttons button[type="submit"] {
-  background-color: #1890ff;
-  color: white;
-}
-
-.reply-form-buttons .cancel-reply {
-  background-color: #f5f5f5;
-  border: 1px solid #d9d9d9;
-}
-
-.comment-list {
-  margin-top: 20px;
-  border-top: 1px solid #eee;
-  padding-top: 20px;
-}
-
-.reply-form {
-  margin-left: 50px;
-  margin-top: 10px;
   margin-bottom: 15px;
-  background: #f9f9f9;
-  padding: 12px;
-  border-radius: 6px;
+  background: #f5f7fa;
+  padding: 15px;
+  border-radius: 8px;
   border: 1px solid #eee;
 }
 
-.reply-form.nested-reply {
-  margin-left: 80px;
-}
-
 .reply-form textarea {
   width: 100%;
-  padding: 10px;
+  padding: 12px;
   border: 1px solid #ddd;
   border-radius: 4px;
   resize: vertical;
-  min-height: 60px;
+  min-height: 80px;
   font-family: inherit;
   font-size: 14px;
+  transition: all 0.3s;
+}
+
+.reply-form textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
 }
 
 .reply-form-buttons {
   display: flex;
   gap: 10px;
   margin-top: 10px;
+  justify-content: flex-end;
 }
 
 .reply-form-buttons button {
-  padding: 6px 12px;
-  border-radius: 4px;
+  padding: 8px 16px;
+  border-radius: 6px;
   cursor: pointer;
-  font-size: 13px;
-  transition: all 0.2s;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s;
 }
 
 .reply-form-buttons button[type="submit"] {
-  background-color: #1890ff;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
 }
 
 .reply-form-buttons button[type="submit"]:hover {
-  background-color: #40a9ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(30, 60, 114, 0.2);
 }
 
 .reply-form-buttons .cancel-reply {
-  background-color: #f5f5f5;
+  background: #f5f5f5;
   border: 1px solid #d9d9d9;
   color: #666;
 }
 
 .reply-form-buttons .cancel-reply:hover {
-  background-color: #e8e8e8;
+  background: #e8e8e8;
 }
 
 /* 回复弹窗样式 */
@@ -435,82 +447,155 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  backdrop-filter: blur(5px);
 }
 
 .reply-modal {
   background: white;
-  border-radius: 8px;
-  width: 90%;
-  max-width: 500px;
-  padding: 20px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 25px;
+  border-radius: 12px;
+  width: 500px;
+  max-width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
 
 .modal-header h3 {
   margin: 0;
-  font-size: 18px;
+  color: #1e3c72;
+  font-size: 20px;
 }
 
 .close-modal {
   background: none;
   border: none;
   font-size: 24px;
-  cursor: pointer;
   color: #666;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.close-modal:hover {
+  color: #1e3c72;
+  transform: rotate(90deg);
 }
 
 .reply-modal textarea {
   width: 100%;
-  padding: 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  padding: 15px;
+  border: 2px solid #f0f2f5;
+  border-radius: 8px;
   resize: vertical;
-  min-height: 120px;
-  font-size: 14px;
-  margin-bottom: 15px;
+  min-height: 150px;
+  margin-bottom: 20px;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.reply-modal textarea:focus {
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+  outline: none;
 }
 
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
-}
-
-.modal-actions button {
-  padding: 8px 16px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
+  gap: 15px;
 }
 
 .cancel-btn {
+  padding: 10px 20px;
   background: #f5f5f5;
-  border: 1px solid #d9d9d9;
   color: #666;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
 .cancel-btn:hover {
-  background: #e8e8e8;
+  background: #e0e0e0;
 }
 
 .submit-btn {
-  background: #1890ff;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
 }
 
 .submit-btn:hover {
-  background: #40a9ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
+
+/* 加载和错误状态 */
+.loading, .error {
+  text-align: center;
+  padding: 50px;
+  font-size: 18px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  margin: 20px 0;
+}
+
+.error {
+  color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .torrent-detail-container {
+    padding: 15px;
+  }
+  
+  .torrent-main {
+    flex-direction: column;
+    padding: 20px;
+  }
+  
+  .torrent-cover {
+    flex: 1 1 100%;
+    margin-bottom: 20px;
+  }
+  
+  .torrent-title {
+    font-size: 24px;
+  }
+  
+  .torrent-meta {
+    grid-template-columns: 1fr;
+  }
+  
+  .comment-container.is-reply {
+    margin-left: 30px;
+  }
+  
+  .reply-form {
+    margin-left: 45px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/TorrentDetail.jsx b/src/components/TorrentDetail.jsx
index e743506..fe5b475 100644
--- a/src/components/TorrentDetail.jsx
+++ b/src/components/TorrentDetail.jsx
@@ -241,7 +241,7 @@
   return (
     <div className="torrent-detail-container">
       <button className="back-button" onClick={handleBack}>
-        &larr; 返回资源区
+      返回资源区
       </button>
       
       <div className="torrent-main">
diff --git a/src/config/config.js b/src/config/config.js
index 1da40df..0a80867 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -2,6 +2,6 @@
 
     //serverIP后端服务器地址
 
-    serverIP:'http://team2.10813352.xyz:8088',
+    serverIP:'http://localhost:8088',
   
   }
\ No newline at end of file