diff --git a/src/components/Personal/Exchange.jsx b/src/components/Personal/Exchange.jsx
new file mode 100644
index 0000000..1e5b2e8
--- /dev/null
+++ b/src/components/Personal/Exchange.jsx
@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { generateInviteCode, getUserInviteCodes, exchangeUpload, getUserInfo } from '../../api/personal';
+import './personalSubpage.css';
+
+const Exchange = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [inviteCodes, setInviteCodes] = useState([]);
+  const [userInfo, setUserInfo] = useState(null);
+  const [magicPoints, setMagicPoints] = useState('0'); 
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // 获取用户信息和邀请码列表
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const [userData, codes] = await Promise.all([
+          getUserInfo(),
+          getUserInviteCodes()
+        ]);
+        setUserInfo(userData);
+        setInviteCodes(codes);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // 生成邀请码
+  const handleGenerateInviteCode = async () => {
+    try {
+      setLoading(true);
+      const newCode = await generateInviteCode();
+      setInviteCodes([...inviteCodes, newCode]);
+      // 刷新用户信息
+      const updatedUser = await getUserInfo();
+      setUserInfo(updatedUser);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExchangeUpload = async () => {
+    const points = Number(magicPoints);
+    if (!points || points <= 0) {
+      setError('请输入有效的魔力值');
+      return;
+    }
+    try {
+      setLoading(true);
+      await exchangeUpload(points);
+      // 刷新用户信息
+      const updatedUser = await getUserInfo();
+      setUserInfo(updatedUser);
+      setMagicPoints('0');
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBack = () => {
+    // 返回个人中心，并携带来源标记
+    navigate('/personal', { 
+      state: { 
+        fromSubpage: true,  // 标记来自子页面
+        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+      },
+      replace: true  // 替换当前历史记录
+    });
+  };
+
+  if (loading) {
+    return <div className="subpage-container">加载中...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="subpage-container">
+        <button className="back-button" onClick={handleBack}>
+          ← 返回个人中心
+        </button>
+        <div className="error">错误: {error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="subpage-container">
+      <button className="back-button" onClick={handleBack}>
+        ← 返回个人中心
+      </button>
+
+      <h2 className="page-title">兑换区</h2>
+      
+      <div className="exchange-section">
+        <h3>当前魔力值: {userInfo?.magicPoints || 0}</h3>
+        
+        <div className="exchange-card">
+          <h4>兑换邀请码</h4>
+          <p>消耗10魔力值兑换一个邀请码</p>
+          <button 
+            className="exchange-btn"
+            onClick={handleGenerateInviteCode}
+            disabled={!userInfo || userInfo.magicPoints < 10}
+          >
+            兑换邀请码
+          </button>
+        </div>
+
+        <div className="exchange-card">
+          <h4>兑换上传量</h4>
+          <p>1魔力值 = 1GB上传量</p>
+          <div className="exchange-input-group">
+          <input
+            type="number"
+            value={magicPoints}
+            onChange={(e) => {
+              // 允许空字符串或有效数字
+              const value = e.target.value;
+              if (value === '' || !isNaN(value)) {
+                setMagicPoints(value);
+              }
+            }}
+            min="1"
+            max={userInfo?.magicPoints || 0}
+            placeholder="输入要兑换的魔力值"
+          />
+
+          <button 
+            className="exchange-btn"
+            onClick={handleExchangeUpload}
+            disabled={
+              !magicPoints || 
+              Number(magicPoints) <= 0 || 
+              !userInfo || 
+              Number(magicPoints) > userInfo.magicPoints
+            }
+          >
+            兑换上传量
+          </button>
+          </div>
+        </div>
+
+        {inviteCodes.length > 0 && (
+          <div className="invite-code-list">
+            <h4>我的邀请码</h4>
+            <ul>
+              {inviteCodes.map((code, index) => (
+                <li key={index}>
+                  <span className="code">{code.code}</span>
+                  <span className={`status ${code.isUsed ? 'used' : 'available'}`}>
+                    {code.isUsed ? '已使用' : '可用'}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Exchange;
\ No newline at end of file
diff --git a/src/components/Personal/Exchange.test.jsx b/src/components/Personal/Exchange.test.jsx
new file mode 100644
index 0000000..20fe641
--- /dev/null
+++ b/src/components/Personal/Exchange.test.jsx
@@ -0,0 +1,196 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter, useNavigate, useLocation } from 'react-router-dom';
+import Exchange from './Exchange';
+import { 
+  generateInviteCode, 
+  getUserInviteCodes, 
+  exchangeUpload, 
+  getUserInfo 
+} from '../../api/personal';
+
+// Mock API 调用
+jest.mock('../../api/personal', () => ({
+  generateInviteCode: jest.fn(),
+  getUserInviteCodes: jest.fn(),
+  exchangeUpload: jest.fn(),
+  getUserInfo: jest.fn()
+}));
+
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useLocation: jest.fn()
+}));
+
+describe('Exchange Component', () => {
+  const mockNavigate = jest.fn();
+  const mockLocation = {
+    pathname: '/personal/exchange',
+    state: { dashboardTab: 'exchange' }
+  };
+
+  const mockUserInfo = {
+    magicPoints: 100,
+    username: 'testuser'
+  };
+
+  const mockInviteCodes = [
+    { code: 'ABCD-1234', isUsed: false },
+    { code: 'EFGH-5678', isUsed: true }
+  ];
+
+  beforeEach(() => {
+    useNavigate.mockReturnValue(mockNavigate);
+    useLocation.mockReturnValue(mockLocation);
+    jest.clearAllMocks();
+    
+    // 设置默认 mock 返回值
+    getUserInfo.mockResolvedValue(mockUserInfo);
+    getUserInviteCodes.mockResolvedValue(mockInviteCodes);
+    generateInviteCode.mockResolvedValue({ code: 'NEW-CODE', isUsed: false });
+    exchangeUpload.mockResolvedValue({ success: true });
+  });
+
+  it('应该正确加载并显示用户信息和邀请码', async () => {
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    // 初始加载状态
+    expect(screen.getByText('加载中...')).toBeInTheDocument();
+
+    // 等待数据加载完成
+    await waitFor(() => {
+      expect(screen.getByText('兑换区')).toBeInTheDocument();
+      expect(screen.getByText('当前魔力值: 100')).toBeInTheDocument();
+      expect(screen.getByText('ABCD-1234')).toBeInTheDocument();
+      expect(screen.getByText('EFGH-5678')).toBeInTheDocument();
+      expect(screen.getByText('可用')).toBeInTheDocument();
+      expect(screen.getByText('已使用')).toBeInTheDocument();
+    });
+  });
+
+  it('应该处理生成邀请码操作', async () => {
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      // 使用更精确的选择器定位按钮
+      const generateButtons = screen.getAllByRole('button', { name: '兑换邀请码' });
+      // 选择第一个按钮（或根据实际情况选择正确的按钮）
+      fireEvent.click(generateButtons[0]);
+    });
+
+    expect(generateInviteCode).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(getUserInfo).toHaveBeenCalledTimes(2); // 初始加载 + 生成后刷新
+    });
+  });
+
+  it('应该处理兑换上传量操作', async () => {
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const input = screen.getByPlaceholderText('输入要兑换的魔力值');
+      const exchangeButton = screen.getByRole('button', { name: '兑换上传量' });
+      
+      // 输入有效值
+      fireEvent.change(input, { target: { value: '50' } });
+      fireEvent.click(exchangeButton);
+    });
+
+    expect(exchangeUpload).toHaveBeenCalledWith(50);
+    await waitFor(() => {
+      expect(getUserInfo).toHaveBeenCalledTimes(2); // 初始加载 + 兑换后刷新
+    });
+  });
+  
+
+  it('应该处理返回按钮点击', async () => {
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const backButton = screen.getByText(/← 返回个人中心/);
+      fireEvent.click(backButton);
+      
+      expect(mockNavigate).toHaveBeenCalledWith('/personal', {
+        state: {
+          fromSubpage: true,
+          dashboardTab: 'exchange'
+        },
+        replace: true
+      });
+    });
+  });
+
+  it('应该显示错误信息当API调用失败', async () => {
+    getUserInfo.mockRejectedValueOnce(new Error('获取用户信息失败'));
+
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('错误: 获取用户信息失败')).toBeInTheDocument();
+    });
+  });
+
+  it('应该禁用兑换按钮当魔力值不足', async () => {
+    getUserInfo.mockResolvedValueOnce({ magicPoints: 5 }); // 设置魔力值不足
+
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const inviteButtons = screen.getAllByRole('button', { name: '兑换邀请码' });
+      expect(inviteButtons[0]).toBeDisabled();
+    });
+  });
+
+  it('应该正确处理空邀请码列表', async () => {
+    getUserInviteCodes.mockResolvedValueOnce([]);
+
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByText('我的邀请码')).not.toBeInTheDocument();
+    });
+  });
+
+  it('应该显示加载状态', async () => {
+    // 延迟API响应以测试加载状态
+    getUserInfo.mockImplementation(() => new Promise(() => {}));
+
+    render(
+      <MemoryRouter>
+        <Exchange />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('加载中...')).toBeInTheDocument();
+  });
+});
\ No newline at end of file
diff --git a/src/components/Personal/Favorite.jsx b/src/components/Personal/Favorite.jsx
deleted file mode 100644
index 97aa1e6..0000000
--- a/src/components/Personal/Favorite.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import ActionCard from './ActionCard';
-import './personalSubpage.css';
-
-const Favorites = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  // 模拟数据
-  const [favorites] = React.useState([
-    { id: 1, name: '盗梦空间', type: 'movie', added: '2023-10-01' },
-    { id: 2, name: '权力的游戏', type: 'tv', added: '2023-09-15' }
-  ]);
-
-  const handleBack = () => {
-    // 返回个人中心，并携带来源标记
-    navigate('/personal', { 
-      state: { 
-        fromSubpage: true,  // 标记来自子页面
-        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
-      },
-      replace: true  // 替换当前历史记录
-    });
-  };
-
-  return (
-    <div className="personal-page">
-      <button className="back-button" onClick={(handleBack)}>
-        &larr; 返回个人中心
-      </button>
-
-      <h2>我的收藏</h2>
-      <div className="resource-grid">
-        {favorites.map(item => (
-          <ActionCard 
-            key={item.id}
-            title={item.name}
-            subtitle={`收藏于 ${item.added}`}
-            onClick={() => console.log('查看详情', item.id)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Favorites;
\ No newline at end of file
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
index c087ac6..28a1adb 100644
--- a/src/components/Personal/Personal.css
+++ b/src/components/Personal/Personal.css
@@ -159,4 +159,63 @@
     margin-top: 20px;
     border-top: 1px solid #f0f0f0;
     padding-top: 20px;
-  }
\ No newline at end of file
+  }
+
+
+  /* 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);
+}
+
+.download-task {
+  margin-bottom: 15px;
+}
+
+.task-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+}
+
+.task-id {
+  font-size: 14px;
+  color: #666;
+}
+
+.task-progress {
+  font-size: 14px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.progress-bar {
+  height: 8px;
+  background: #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #1890ff;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+
+.user-meta span {
+  margin-right: 15px;
+  color: #666;
+}
+
+.user-meta span:last-child {
+  color: #ff9800;
+  font-weight: bold;
+}
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
index 033952d..8c60baf 100644
--- a/src/components/Personal/Personal.jsx
+++ b/src/components/Personal/Personal.jsx
@@ -1,34 +1,91 @@
-import React from 'react';
-import { useNavigate,useLocation, Outlet } from 'react-router-dom';
+// Personal.jsx
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation, Outlet } from 'react-router-dom';
+import { getUserInfo, getDownloadQuota, getDownloadProgress } from '../../api/personal';
 import './Personal.css';
 import ActionCard from './ActionCard';
 
 const Personal = () => {
   const navigate = useNavigate();
-  const location = useLocation(); // 获取路由信息
-  
-  // 模拟用户数据
-  const userData = {
-    username: 'PT爱好者',
-    avatar: 'https://via.placeholder.com/150',
-    joinDate: '2023-01-15',
-    level: '中级会员',
-    points: 1250,
-    upload: '3.2TB',
-    download: '1.5TB',
-    ratio: '2.13',
-    downloadQuota: {
-      total: 10,  // 10GB
-      used: 3.7,  // 已使用3.7GB
-      remaining: 6.3  // 剩余6.3GB
+  const location = useLocation();
+  const [userData, setUserData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState({});
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // 并行获取用户信息和下载额度
+        const [userInfo, downloadQuota] = await Promise.all([
+          getUserInfo(),
+          getDownloadQuota()
+        ]);
+        
+        setUserData({
+          username: userInfo.username,
+          avatar: 'https://via.placeholder.com/150',
+          joinDate: userInfo.registTime,
+          level: userInfo.level, // 可以根据userInfo.level设置不同等级
+          points: userInfo.magicPoints,
+          upload: userInfo.upload,
+          download: userInfo.download,
+          ratio: userInfo.shareRate,
+          downloadQuota: {
+            total: downloadQuota.total,
+            used: downloadQuota.used,
+            remaining: downloadQuota.remaining
+          }
+        });
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // 获取下载进度数据
+  const fetchDownloadProgress = async () => {
+    try {
+      const progressData = await getDownloadProgress();
+      setDownloadProgress(progressData);
+    } catch (err) {
+      console.error('获取下载进度失败:', err);
     }
   };
 
+  useEffect(() => {
+    // 初始获取下载进度
+    fetchDownloadProgress();
+    
+    // 设置定时器，每10秒获取一次下载进度
+    const intervalId = setInterval(fetchDownloadProgress, 10000);
+    
+    // 组件卸载时清除定时器
+    return () => clearInterval(intervalId);
+  }, []);
+
+
+  if (loading) {
+    return <div className="loading">加载中...</div>;
+  }
+
+  if (error) {
+    return <div className="error">错误: {error}</div>;
+  }
+
+  if (!userData) {
+    return <div className="error">未获取到用户数据</div>;
+  }
+
   const features = [
     { 
-      title: '我的收藏', 
-      description: '查看收藏的资源',
-      path: '/personal/Favorite' // 相对路径
+      title: '兑换区', 
+      description: '下载量/邀请码',
+      path: '/personal/Exchange' // 相对路径
     },
     { 
       title: '上传记录', 
@@ -63,6 +120,23 @@
     }
   };
 
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    const kb = bytes / 1024;
+    if (kb < 1024) return `${kb.toFixed(2)} KB`;
+    const mb = kb / 1024;
+    if (mb < 1024) return `${mb.toFixed(2)} MB`;
+    const gb = mb / 1024;
+    return `${gb.toFixed(2)} GB`;
+  };
+
+  // 添加进度条颜色函数
+  const getProgressColor = (percentage) => {
+    if (percentage < 0.3) return '#4CAF50'; // 绿色
+    if (percentage < 0.7) return '#FFC107'; // 黄色
+    return '#F44336'; // 红色
+  };
+
   return (
     <div className="personal-container">
       {/* 返回按钮 */}
@@ -82,7 +156,7 @@
             <h2 className="username">{userData.username}</h2>
             <div className="user-meta">
               <span>加入时间: {userData.joinDate}</span>
-              <span>等级: {userData.level}</span>
+              <span>会员等级: Lv.{userData.level}</span> 
             </div>
           </div>
         </div>
@@ -90,16 +164,16 @@
         {/* 用户数据统计 */}
         <div className="stats-grid">
           <div className="stat-item">
-            <div className="stat-label">积分</div>
+            <div className="stat-label">保种积分</div>
             <div className="stat-value">{userData.points}</div>
           </div>
           <div className="stat-item">
             <div className="stat-label">上传量</div>
-            <div className="stat-value">{userData.upload}</div>
+            <div className="stat-value">{formatSize(userData.upload)}</div>
           </div>
           <div className="stat-item">
             <div className="stat-label">下载量</div>
-            <div className="stat-value">{userData.download}</div>
+            <div className="stat-value">{formatSize(userData.download)}</div>
           </div>
           <div className="stat-item">
             <div className="stat-label">分享率</div>
@@ -112,17 +186,46 @@
       <div className="quota-card">
         <h3>下载额度</h3>
         <div className="quota-info">
-          <span className="quota-used">{userData.downloadQuota.used}GB 已使用</span>
-          <span className="quota-remaining">{userData.downloadQuota.remaining}GB 剩余</span>
+          <span className="quota-used">
+            {formatSize(userData.downloadQuota.used)} 已使用
+          </span>
+          <span className="quota-remaining">
+            {formatSize(userData.downloadQuota.remaining)} 剩余
+          </span>
         </div>
         <div className="progress-bar">
           <div 
             className="progress-fill"
-            style={{ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%` }}
+            style={{ 
+              width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%`,
+              backgroundColor: getProgressColor(userData.downloadQuota.used / userData.downloadQuota.total)
+            }}
           ></div>
         </div>
-        <div className="quota-total">总额度: {userData.downloadQuota.total}GB</div>
+        <div className="quota-total">
+          总额度: {formatSize(userData.downloadQuota.total)}
+        </div>
       </div>
+
+      {Object.keys(downloadProgress).length > 0 && (
+        <div className="progress-card">
+          <h3>当前下载进度</h3>
+          {Object.entries(downloadProgress).map(([taskId, progress]) => (
+            <div key={taskId} className="download-task">
+              <div className="task-info">
+                <span className="task-id">任务: {taskId.substring(0, 8)}...</span>
+                <span className="task-progress">{Math.round(progress * 100)}%</span>
+              </div>
+              <div className="progress-bar">
+                <div 
+                  className="progress-fill"
+                  style={{ width: `${progress * 100}%` }}
+                ></div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
       
       {/* 功能卡片区 */}
       <div className="action-cards">
diff --git a/src/components/Personal/Personal.test.jsx b/src/components/Personal/Personal.test.jsx
new file mode 100644
index 0000000..ef6bad8
--- /dev/null
+++ b/src/components/Personal/Personal.test.jsx
@@ -0,0 +1,209 @@
+// Personal.test.jsx
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
+import Personal from './Personal';
+import { getUserInfo, getDownloadQuota, getDownloadProgress } from '../../api/personal';
+
+// Mock API 调用
+jest.mock('../../api/personal', () => ({
+  getUserInfo: jest.fn(),
+  getDownloadQuota: jest.fn(),
+  getDownloadProgress: jest.fn()
+}));
+
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useLocation: jest.fn()
+}));
+
+describe('Personal Component', () => {
+  const mockNavigate = jest.fn();
+  const mockLocation = {
+    pathname: '/personal',
+    state: null
+  };
+
+  beforeEach(() => {
+    useNavigate.mockReturnValue(mockNavigate);
+    useLocation.mockReturnValue(mockLocation);
+    
+    // 重置所有 mock
+    jest.clearAllMocks();
+    
+    // 设置默认 mock 返回值
+    getUserInfo.mockResolvedValue({
+      username: 'testuser',
+      registTime: '2023-01-01',
+      level: 2,
+      magicPoints: 1000,
+      upload: 1024 * 1024 * 5, // 5MB
+      download: 1024 * 1024 * 2, // 2MB
+      shareRate: 2.5
+    });
+    
+    getDownloadQuota.mockResolvedValue({
+      total: 1024 * 1024 * 10, // 10MB
+      used: 1024 * 1024 * 3,   // 3MB
+      remaining: 1024 * 1024 * 7 // 7MB
+    });
+    
+    getDownloadProgress.mockResolvedValue({
+      'task1': 0.25,
+      'task2': 0.75
+    });
+  });
+
+  it('应该正确加载并显示用户数据', async () => {
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    // 初始加载状态
+    expect(screen.getByText('加载中...')).toBeInTheDocument();
+
+    // 等待数据加载完成
+    await waitFor(() => {
+      expect(screen.getByText('testuser')).toBeInTheDocument();
+      expect(screen.getByText(/加入时间: 2023-01-01/)).toBeInTheDocument();
+      expect(screen.getByText(/会员等级: Lv.2/)).toBeInTheDocument();
+      expect(screen.getByText('1000')).toBeInTheDocument(); // 保种积分
+      expect(screen.getByText('5.00 MB')).toBeInTheDocument(); // 上传量
+      expect(screen.getByText('2.00 MB')).toBeInTheDocument(); // 下载量
+      expect(screen.getByText('2.5')).toBeInTheDocument(); // 分享率
+    });
+  });
+
+  it('应该显示下载额度信息', async () => {
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/3.00 MB 已使用/)).toBeInTheDocument();
+      expect(screen.getByText(/7.00 MB 剩余/)).toBeInTheDocument();
+      expect(screen.getByText(/总额度: 10.00 MB/)).toBeInTheDocument();
+    });
+  });
+
+  it('应该显示下载进度', async () => {
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('当前下载进度')).toBeInTheDocument();
+      expect(screen.getByText(/任务: task1/)).toBeInTheDocument();
+      expect(screen.getByText('25%')).toBeInTheDocument();
+      expect(screen.getByText(/任务: task2/)).toBeInTheDocument();
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+  });
+
+  it('应该显示功能卡片并处理点击', async () => {
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const exchangeCard = screen.getByText('兑换区');
+      expect(exchangeCard).toBeInTheDocument();
+      
+      // 模拟点击功能卡片
+      act(() => {
+        exchangeCard.closest('.action-card').click();
+      });
+      
+      expect(mockNavigate).toHaveBeenCalledWith('/personal/Exchange');
+    });
+  });
+
+  it('应该处理返回按钮点击', async () => {
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const backButton = screen.getByText(/返回/);
+      act(() => {
+        backButton.click();
+      });
+      
+      expect(mockNavigate).toHaveBeenCalledWith(-1);
+    });
+  });
+
+  it('应该处理从子页面返回的情况', async () => {
+    useLocation.mockReturnValue({
+      pathname: '/personal',
+      state: { fromSubpage: true, dashboardTab: 'uploads' }
+    });
+
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const backButton = screen.getByText(/返回/);
+      act(() => {
+        backButton.click();
+      });
+      
+      expect(mockNavigate).toHaveBeenCalledWith('/dashboard/uploads', { replace: true });
+    });
+  });
+
+  it('应该显示错误信息当API调用失败', async () => {
+    getUserInfo.mockRejectedValue(new Error('获取用户信息失败'));
+
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/错误: 获取用户信息失败/)).toBeInTheDocument();
+    });
+  });
+
+
+  it('应该定期更新下载进度', async () => {
+    jest.useFakeTimers();
+    
+    render(
+      <MemoryRouter>
+        <Personal />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(getDownloadProgress).toHaveBeenCalledTimes(1);
+    });
+
+    // 快进时间
+    act(() => {
+      jest.advanceTimersByTime(10000);
+    });
+
+    await waitFor(() => {
+      expect(getDownloadProgress).toHaveBeenCalledTimes(2);
+    });
+
+    jest.useRealTimers();
+  });
+});
\ No newline at end of file
diff --git a/src/components/Personal/Setting.jsx b/src/components/Personal/Setting.jsx
index 967be6c..9ba07e8 100644
--- a/src/components/Personal/Setting.jsx
+++ b/src/components/Personal/Setting.jsx
@@ -1,97 +1,161 @@
-import React, { useState } from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useState,useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { getUserInfo, updatePassword } from '../../api/personal';
 import './personalSubpage.css';
 
 const Setting = ({ onLogout }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  // 模拟数据
-  const [formData, setFormData] = useState({
-    username: 'user123',
-    email: 'user@example.com',
-    notification: true
+  const [userInfo, setUserInfo] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
+  const [passwordForm, setPasswordForm] = useState({
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
   });
 
-  const handleChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData(prev => ({
+  // 获取用户信息
+  useEffect(() => {
+    const fetchUserInfo = async () => {
+      try {
+        const info = await getUserInfo();
+        setUserInfo(info);
+      } catch (err) {
+        console.error('获取用户信息失败:', err);
+      }
+    };
+    fetchUserInfo();
+  }, []);
+
+  const handleBack = () => {
+    navigate('/personal', { 
+      state: { 
+        fromSubpage: true,
+        dashboardTab: location.state?.dashboardTab
+      },
+      replace: true
+    });
+  };
+
+  const handlePasswordChange = (e) => {
+    const { name, value } = e.target;
+    setPasswordForm(prev => ({
       ...prev,
-      [name]: type === 'checkbox' ? checked : value
+      [name]: value
     }));
   };
 
-  const handleSubmit = (e) => {
+  const handlePasswordSubmit = async (e) => {
     e.preventDefault();
-    alert('设置已保存');
-  };
+    setError(null);
+    setSuccess(null);
 
-  const handleBack = () => {
-    // 返回个人中心，并携带来源标记
-    navigate('/personal', { 
-      state: { 
-        fromSubpage: true,  // 标记来自子页面
-        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
-      },
-      replace: true  // 替换当前历史记录
-    });
+    // 验证表单
+    if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
+      setError('请填写所有密码字段');
+      return;
+    }
+
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      setError('新密码与确认密码不一致');
+      return;
+    }
+
+    if (passwordForm.newPassword.length < 6) {
+      setError('新密码长度至少为6位');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await updatePassword(passwordForm.oldPassword, passwordForm.newPassword);
+      setSuccess('密码修改成功');
+      setPasswordForm({
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+      });
+    } catch (err) {
+      setError(err.message || '修改密码失败');
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <div className="subpage-container">
-      <button className="back-button" onClick={(handleBack)}>
+      <button className="back-button" onClick={handleBack}>
         ← 返回个人中心
       </button>
 
-      <h2 className="page-title">账号设置</h2>
-      
-      <form onSubmit={handleSubmit}>
-        <div className="form-group">
-          <label className="form-label">用户名</label>
-          <input
-            type="text"
-            name="username"
-            value={formData.username}
-            onChange={handleChange}
-            className="form-input"
-          />
+      <h2 className="page-title">个人设置</h2>
+
+      <div className="setting-section">
+        <div className="user-info-card">
+          <h3>账户信息</h3>
+          <div className="info-item">
+            <label>用户名:</label>
+            <span>{userInfo?.username || '加载中...'}</span>
+          </div>
+          <p className="info-note">用户名不可更改</p>
         </div>
 
-        <div className="form-group">
-          <label className="form-label">电子邮箱</label>
-          <input
-            type="email"
-            name="email"
-            value={formData.email}
-            onChange={handleChange}
-            className="form-input"
-          />
-        </div>
+        <div className="password-form-card">
+          <h3>修改密码</h3>
+          <form onSubmit={handlePasswordSubmit}>
+            <div className="form-group">
+              <label htmlFor="oldPassword">原密码:</label>
+              <input
+                type="password"
+                id="oldPassword"
+                name="oldPassword"
+                value={passwordForm.oldPassword}
+                onChange={handlePasswordChange}
+                required
+              />
+            </div>
 
-        <div className="form-group">
-          <label className="form-label">
-            <input
-              type="checkbox"
-              name="notification"
-              checked={formData.notification}
-              onChange={handleChange}
-            />
-            接收邮件通知
-          </label>
-        </div>
+            <div className="form-group">
+              <label htmlFor="newPassword">新密码:</label>
+              <input
+                type="password"
+                id="newPassword"
+                name="newPassword"
+                value={passwordForm.newPassword}
+                onChange={handlePasswordChange}
+                required
+                minLength="6"
+              />
+            </div>
 
-        <div className="form-actions">
-          <button type="submit" className="action-btn">
-            保存设置
-          </button>
-          <button 
-            type="button" 
-            className="action-btn danger-btn"
-            onClick={onLogout}
-          >
-            退出登录
-          </button>
+            <div className="form-group">
+              <label htmlFor="confirmPassword">确认新密码:</label>
+              <input
+                type="password"
+                id="confirmPassword"
+                name="confirmPassword"
+                value={passwordForm.confirmPassword}
+                onChange={handlePasswordChange}
+                required
+                minLength="6"
+              />
+            </div>
+
+            {error && <div className="error-message">{error}</div>}
+            {success && <div className="success-message">{success}</div>}
+
+            <button 
+              type="submit" 
+              className="submit-button"
+              disabled={loading}
+            >
+              {loading ? '处理中...' : '修改密码'}
+            </button>
+          </form>
         </div>
-      </form>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Personal/Setting.test.jsx b/src/components/Personal/Setting.test.jsx
new file mode 100644
index 0000000..e8b1cc0
--- /dev/null
+++ b/src/components/Personal/Setting.test.jsx
@@ -0,0 +1,195 @@
+// Setting.test.jsx
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter, useNavigate, useLocation } from 'react-router-dom';
+import Setting from './Setting';
+import { getUserInfo, updatePassword } from '../../api/personal';
+
+// Mock API 调用
+jest.mock('../../api/personal', () => ({
+  getUserInfo: jest.fn(),
+  updatePassword: jest.fn()
+}));
+
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useLocation: jest.fn()
+}));
+
+describe('Setting Component', () => {
+  const mockNavigate = jest.fn();
+  const mockLocation = {
+    pathname: '/personal/setting',
+    state: { dashboardTab: 'settings' }
+  };
+
+  beforeEach(() => {
+    useNavigate.mockReturnValue(mockNavigate);
+    useLocation.mockReturnValue(mockLocation);
+    
+    // 重置所有 mock
+    jest.clearAllMocks();
+    
+    // 设置默认 mock 返回值
+    getUserInfo.mockResolvedValue({
+      username: 'testuser',
+      email: 'test@example.com'
+    });
+    
+    updatePassword.mockResolvedValue({ success: true });
+  });
+
+  it('应该正确加载并显示用户信息', async () => {
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('个人设置')).toBeInTheDocument();
+      expect(screen.getByText('账户信息')).toBeInTheDocument();
+      expect(screen.getByText('用户名:')).toBeInTheDocument();
+      expect(screen.getByText('testuser')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: '修改密码' })).toBeInTheDocument();
+    });
+  });
+
+  it('应该处理密码修改表单提交', async () => {
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    // 填写表单
+    fireEvent.change(screen.getByLabelText('原密码:'), { 
+      target: { value: 'oldpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('确认新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    
+    // 提交表单
+    fireEvent.click(screen.getByRole('button', { name: '修改密码' }));
+
+    await waitFor(() => {
+      expect(updatePassword).toHaveBeenCalledWith('oldpassword123', 'newpassword123');
+      expect(screen.getByText('密码修改成功')).toBeInTheDocument();
+    });
+  });
+
+
+  it('应该处理API错误', async () => {
+    updatePassword.mockRejectedValue(new Error('原密码不正确'));
+
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    // 填写表单
+    fireEvent.change(screen.getByLabelText('原密码:'), { 
+      target: { value: 'wrongpassword' } 
+    });
+    fireEvent.change(screen.getByLabelText('新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('确认新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    
+    // 提交表单
+    fireEvent.click(screen.getByRole('button', { name: '修改密码' }));
+
+    await waitFor(() => {
+      expect(screen.getByText('原密码不正确')).toBeInTheDocument();
+    });
+  });
+
+  it('应该显示加载状态', async () => {
+    // 延迟API响应以测试加载状态
+    updatePassword.mockImplementation(() => new Promise(() => {}));
+
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    // 填写表单
+    fireEvent.change(screen.getByLabelText('原密码:'), { 
+      target: { value: 'oldpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('确认新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    
+    // 提交表单
+    fireEvent.click(screen.getByRole('button', { name: '修改密码' }));
+    
+    // 检查加载状态
+    expect(screen.getByText('处理中...')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '处理中...' })).toBeDisabled();
+  });
+
+  it('应该处理返回按钮点击', async () => {
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    const backButton = screen.getByText(/← 返回个人中心/);
+    fireEvent.click(backButton);
+    
+    expect(mockNavigate).toHaveBeenCalledWith('/personal', {
+      state: {
+        fromSubpage: true,
+        dashboardTab: 'settings'
+      },
+      replace: true
+    });
+  });
+
+  it('应该清空表单并显示成功消息', async () => {
+    render(
+      <MemoryRouter>
+        <Setting />
+      </MemoryRouter>
+    );
+
+    // 填写表单
+    fireEvent.change(screen.getByLabelText('原密码:'), { 
+      target: { value: 'oldpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    fireEvent.change(screen.getByLabelText('确认新密码:'), { 
+      target: { value: 'newpassword123' } 
+    });
+    
+    // 提交表单
+    fireEvent.click(screen.getByRole('button', { name: '修改密码' }));
+
+    await waitFor(() => {
+      // 检查表单是否清空
+      expect(screen.getByLabelText('原密码:')).toHaveValue('');
+      expect(screen.getByLabelText('新密码:')).toHaveValue('');
+      expect(screen.getByLabelText('确认新密码:')).toHaveValue('');
+      
+      // 检查成功消息
+      expect(screen.getByText('密码修改成功')).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/Personal/Upload.jsx b/src/components/Personal/Upload.jsx
index 4d6e934..2d91b30 100644
--- a/src/components/Personal/Upload.jsx
+++ b/src/components/Personal/Upload.jsx
@@ -1,28 +1,117 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { getUserTorrents, deleteTorrent } from '../../api/personal';
 import './personalSubpage.css';
 
 const Upload = ({ onLogout }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const [uploads] = React.useState([
-    { id: 1, name: '星际穿越', status: '已发布', date: '2023-10-15', size: '15.2GB' },
-    { id: 2, name: '黑暗骑士', status: '审核中', date: '2023-10-18', size: '12.7GB' }
-  ]);
+  const [torrents, setTorrents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [pagination, setPagination] = useState({
+    page: 1,
+    size: 5,
+    total: 0
+  });
+
+
+
+  // 格式化日期
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleString();
+  };
+
+  // 获取上传记录
+  const fetchTorrents = async () => {
+    try {
+      setLoading(true);
+      const { records, total } = await getUserTorrents(pagination.page, pagination.size);
+      setTorrents(records);
+      setPagination(prev => ({ ...prev, total }));
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  
+
+  // 删除种子
+  const handleDelete = async (id) => {
+    if (window.confirm('确定要删除这个种子吗？此操作不可撤销！')) {
+      try {
+        await deleteTorrent(id);
+        // 删除成功后刷新列表
+        fetchTorrents();
+      } catch (err) {
+        alert('删除失败: ' + err.message);
+      }
+    }
+  };
+
+  // 计算总页数
+  const totalPages = Math.ceil(pagination.total / pagination.size);
+
+  // 生成页码数组
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 5; // 最多显示5个页码
+    
+    let startPage = Math.max(1, pagination.page - Math.floor(maxVisiblePages / 2));
+    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    
+    // 调整起始页码，确保始终显示 maxVisiblePages 个页码（如果总页数足够）
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+    
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    
+    return pages;
+  };
+
+  // 直接跳转到指定页码
+  const jumpToPage = (page) => {
+    if (page >= 1 && page <= totalPages && page !== pagination.page) {
+      setPagination(prev => ({ ...prev, page }));
+    }
+  };
+
+  // 分页改变
+  const handlePageChange = (newPage) => {
+    setPagination(prev => ({ ...prev, page: newPage }));
+  };
+
+  useEffect(() => {
+    fetchTorrents();
+  }, [pagination.page]);
 
   const handleBack = () => {
-    // 返回个人中心，并携带来源标记
     navigate('/personal', { 
       state: { 
-        fromSubpage: true,  // 标记来自子页面
-        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+        fromSubpage: true,
+        dashboardTab: location.state?.dashboardTab
       },
-      replace: true  // 替换当前历史记录
+      replace: true
     });
   };
+
+  if (loading) {
+    return <div className="subpage-container">加载中...</div>;
+  }
+
+  if (error) {
+    return <div className="subpage-container">错误: {error}</div>;
+  }
+
   return (
     <div className="subpage-container">
-      <button className="back-button" onClick={(handleBack)}>
+      <button className="back-button" onClick={handleBack}>
         ← 返回个人中心
       </button>
 
@@ -33,31 +122,99 @@
           <tr>
             <th>资源名称</th>
             <th>大小</th>
-            <th>状态</th>
             <th>上传时间</th>
+            <th>下载次数</th>
             <th>操作</th>
           </tr>
         </thead>
         <tbody>
-          {uploads.map(item => (
-            <tr key={item.id} className="list-item">
-              <td>{item.name}</td>
-              <td>{item.size}</td>
+          {torrents.map(torrent => (
+            <tr key={torrent.id} className="list-item">
+              <td>{torrent.torrentName}</td>
+              <td>{torrent.formattedSize}</td>
+              <td>{formatDate(torrent.createTime)}</td>
+              <td>{torrent.downloadCount || 0}</td>
               <td>
-                <span className={`status-badge ${
-                  item.status === '已发布' ? 'published' : 'pending'
-                }`}>
-                  {item.status}
-                </span>
-              </td>
-              <td>{item.date}</td>
-              <td>
-                <button className="action-btn">详情</button>
+                <button 
+                  className="action-btn delete-btn"
+                  onClick={() => handleDelete(torrent.id)}
+                >
+                  删除
+                </button>
               </td>
             </tr>
           ))}
         </tbody>
       </table>
+
+     {/* 修改后的分页控件 */}
+     <div className="pagination">
+        <button 
+          disabled={pagination.page <= 1}
+          onClick={() => jumpToPage(1)}
+          className="page-nav"
+        >
+          首页
+        </button>
+        <button 
+          disabled={pagination.page <= 1}
+          onClick={() => jumpToPage(pagination.page - 1)}
+          className="page-nav"
+        >
+          上一页
+        </button>
+        
+        {/* 显示页码 */}
+        {getPageNumbers().map(number => (
+          <button
+            key={number}
+            onClick={() => jumpToPage(number)}
+            className={`page-number ${pagination.page === number ? 'active' : ''}`}
+          >
+            {number}
+          </button>
+        ))}
+        
+        {/* 显示省略号（如果有更多页） */}
+        {totalPages > getPageNumbers()[getPageNumbers().length - 1] && (
+          <span className="ellipsis">...</span>
+        )}
+        
+        <button 
+          disabled={pagination.page >= totalPages}
+          onClick={() => jumpToPage(pagination.page + 1)}
+          className="page-nav"
+        >
+          下一页
+        </button>
+        <button 
+          disabled={pagination.page >= totalPages}
+          onClick={() => jumpToPage(totalPages)}
+          className="page-nav"
+        >
+          末页
+        </button>
+        
+        <div className="page-info">
+          <span>共 {totalPages} 页</span>
+          <span>跳至</span>
+          <input
+            type="number"
+            min="1"
+            max={totalPages}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                const page = parseInt(e.target.value);
+                if (!isNaN(page)) {
+                  jumpToPage(Math.max(1, Math.min(page, totalPages)));
+                  e.target.value = '';
+                }
+              }
+            }}
+          />
+          <span>页</span>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Personal/Upload.test.jsx b/src/components/Personal/Upload.test.jsx
new file mode 100644
index 0000000..9c72182
--- /dev/null
+++ b/src/components/Personal/Upload.test.jsx
@@ -0,0 +1,206 @@
+// Upload.test.jsx
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter, useNavigate, useLocation } from 'react-router-dom';
+import Upload from './Upload';
+import { getUserTorrents, deleteTorrent } from '../../api/personal';
+
+// Mock API 调用
+jest.mock('../../api/personal', () => ({
+  getUserTorrents: jest.fn(),
+  deleteTorrent: jest.fn()
+}));
+
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+  useLocation: jest.fn()
+}));
+
+// Mock window.confirm
+global.confirm = jest.fn(() => true);
+
+describe('Upload Component', () => {
+  const mockNavigate = jest.fn();
+  const mockLocation = {
+    pathname: '/personal/upload',
+    state: { dashboardTab: 'uploads' }
+  };
+
+  const mockTorrents = [
+    {
+      id: 1,
+      torrentName: 'Test Torrent 1',
+      formattedSize: '1.2 GB',
+      createTime: '2023-01-01T12:00:00Z',
+      downloadCount: 10
+    },
+    {
+      id: 2,
+      torrentName: 'Test Torrent 2',
+      formattedSize: '2.5 GB',
+      createTime: '2023-01-02T12:00:00Z',
+      downloadCount: 5
+    }
+  ];
+
+  beforeEach(() => {
+    useNavigate.mockReturnValue(mockNavigate);
+    useLocation.mockReturnValue(mockLocation);
+    jest.clearAllMocks();
+    getUserTorrents.mockResolvedValue({
+      records: mockTorrents,
+      total: 10
+    });
+    deleteTorrent.mockResolvedValue({ success: true });
+  });
+
+  it('应该正确加载并显示上传记录', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    // 初始加载状态
+    expect(screen.getByText('加载中...')).toBeInTheDocument();
+
+    // 等待数据加载完成
+    await waitFor(() => {
+      expect(screen.getByText('上传记录')).toBeInTheDocument();
+      expect(screen.getByText('Test Torrent 1')).toBeInTheDocument();
+      expect(screen.getByText('Test Torrent 2')).toBeInTheDocument();
+      expect(screen.getByText('1.2 GB')).toBeInTheDocument();
+      expect(screen.getByText('2.5 GB')).toBeInTheDocument();
+      expect(screen.getAllByText('删除')).toHaveLength(2);
+    });
+  });
+
+  it('应该处理删除操作', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const deleteButtons = screen.getAllByText('删除');
+      fireEvent.click(deleteButtons[0]);
+    });
+
+    expect(global.confirm).toHaveBeenCalledWith('确定要删除这个种子吗？此操作不可撤销！');
+    await waitFor(() => {
+      expect(deleteTorrent).toHaveBeenCalledWith(1);
+      expect(getUserTorrents).toHaveBeenCalledTimes(2); // 初始加载 + 删除后刷新
+    });
+  });
+
+  it('应该处理分页变化', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const nextPageButton = screen.getByText('下一页');
+      fireEvent.click(nextPageButton);
+    });
+
+    await waitFor(() => {
+      expect(getUserTorrents).toHaveBeenLastCalledWith(2, 5);
+    });
+  });
+
+  it('应该处理直接跳转页码', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const pageInput = screen.getByRole('spinbutton');
+      fireEvent.change(pageInput, { target: { value: '2' } });
+      fireEvent.keyDown(pageInput, { key: 'Enter' });
+    });
+
+    await waitFor(() => {
+      expect(getUserTorrents).toHaveBeenLastCalledWith(2, 5);
+    }, { timeout: 1000 });
+  });
+
+  it('应该处理返回按钮点击', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const backButton = screen.getByText((content) => 
+        content.includes('返回个人中心')
+      );
+      fireEvent.click(backButton);
+      
+      expect(mockNavigate).toHaveBeenCalledWith('/personal', {
+        state: {
+          fromSubpage: true,
+          dashboardTab: 'uploads'
+        },
+        replace: true
+      });
+    });
+  });
+
+  it('应该显示错误信息当API调用失败', async () => {
+    getUserTorrents.mockRejectedValue(new Error('获取上传记录失败'));
+
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('错误: 获取上传记录失败')).toBeInTheDocument();
+    });
+  });
+
+
+  it('应该禁用分页按钮当在第一页或最后一页', async () => {
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      const prevButton = screen.getByText('上一页');
+      const firstPageButton = screen.getByText('首页');
+      
+      expect(prevButton).toBeDisabled();
+      expect(firstPageButton).toBeDisabled();
+    });
+  });
+
+  it('应该显示正确的页码导航', async () => {
+    // 模拟有更多页的情况
+    getUserTorrents.mockResolvedValue({
+      records: mockTorrents,
+      total: 50
+    });
+
+    render(
+      <MemoryRouter>
+        <Upload />
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('...')).toBeInTheDocument();
+      expect(screen.getByText('共 10 页')).toBeInTheDocument();
+    });
+  });
+});
\ No newline at end of file
diff --git a/src/components/Personal/personalSubpage.css b/src/components/Personal/personalSubpage.css
index a8e5638..2ba8687 100644
--- a/src/components/Personal/personalSubpage.css
+++ b/src/components/Personal/personalSubpage.css
@@ -1,161 +1,336 @@
-/* 基础布局 */
-.subpage-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    font-size: 16px;
-    cursor: pointer;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  
-  .back-button:hover {
-    color: #40a9ff;
-  }
-  
-  .page-title {
-    color: #333;
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 10px;
-    margin-bottom: 20px;
-  }
-  
-  /* 列表项样式 */
-  .list-item {
-    padding: 15px;
-    border-bottom: 1px solid #f5f5f5;
-    transition: background 0.3s;
-  }
-  
-  .list-item:hover {
-    background: #f9f9f9;
-  }
-  
-  /* 表单样式 */
-  .form-group {
-    margin-bottom: 20px;
-  }
-  
-  .form-label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-  }
-  
-  .form-input {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-  }
-  
-  /* 按钮样式 */
-  .action-btn {
-    padding: 8px 15px;
-    background: #1890ff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 10px;
-  }
-  
-  .action-btn:hover {
-    background: #40a9ff;
-  }
-  
-  .danger-btn {
-    background: #ff4d4f;
-  }
-  
-  .danger-btn:hover {
-    background: #ff7875;
-  }
+/* 上传记录表格样式 */
+.uploads-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
 
-  /* 收藏列表 */
-.favorite-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .item-header {
-    margin-bottom: 8px;
-  }
-  
-  .item-meta {
-    color: #666;
-    font-size: 14px;
-  }
-  
-  .item-actions {
-    display: flex;
-    gap: 10px;
-    margin-top: 10px;
-  }
-  
-  /* 上传表格 */
-  .uploads-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  
-  .uploads-table th, .uploads-table td {
-    padding: 12px 15px;
-    text-align: left;
-  }
-  
-  .status-badge {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-  }
-  
-  .status-badge.published {
-    background: #f6ffed;
-    color: #52c41a;
-  }
-  
-  .status-badge.pending {
-    background: #fff7e6;
-    color: #fa8c16;
-  }
-  
-  /* 消息通知 */
-  .notice-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 5px;
-  }
-  
-  .notice-date {
-    color: #999;
-    font-size: 14px;
-  }
-  
-  .notice-content {
-    color: #666;
-    margin: 0;
-  }
-  
-  .unread {
-    background: #f0f7ff;
-  }
-  
-  /* 设置表单 */
-  .form-actions {
-    margin-top: 30px;
-    display: flex;
-    gap: 15px;
-  }
\ No newline at end of file
+.uploads-table th, .uploads-table td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.uploads-table th {
+  background-color: #f5f5f5;
+  font-weight: 600;
+}
+
+.list-item:hover {
+  background-color: #f9f9f9;
+}
+
+/* 操作按钮样式 */
+.action-btn {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.2s;
+}
+
+.delete-btn {
+  background-color: #ff4d4f;
+  color: white;
+}
+
+.delete-btn:hover {
+  background-color: #ff7875;
+}
+
+/* 分页控件样式 */
+.pagination {
+  margin-top: 20px;
+  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;
+  flex-wrap: wrap;
+}
+
+.page-nav, .page-number {
+  padding: 6px 12px;
+  border: 1px solid #d9d9d9;
+  background-color: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  min-width: 32px;
+  text-align: center;
+}
+
+.page-nav:disabled, .page-number:disabled {
+  color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.page-nav:not(:disabled):hover, 
+.page-number:not(:disabled):hover {
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.page-number.active {
+  background-color: #1890ff;
+  color: white;
+  border-color: #1890ff;
+}
+
+.ellipsis {
+  padding: 0 8px;
+}
+
+.page-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 15px;
+}
+
+.page-info input {
+  width: 50px;
+  padding: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.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;
+}
+
+/* 兑换区样式 */
+.exchange-section {
+  margin-top: 20px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+}
+
+.exchange-card {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.exchange-card h4 {
+  margin-top: 0;
+  color: #333;
+}
+
+.exchange-card p {
+  color: #666;
+  margin-bottom: 15px;
+}
+
+.exchange-btn {
+  padding: 8px 16px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.exchange-btn:hover {
+  background-color: #40a9ff;
+}
+
+.exchange-btn:disabled {
+  background-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.exchange-input-group {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.exchange-input-group input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.invite-code-list {
+  margin-top: 20px;
+}
+
+.invite-code-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.invite-code-list li {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+}
+
+.invite-code-list .code {
+  font-family: monospace;
+}
+
+.invite-code-list .status {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.invite-code-list .status.available {
+  background-color: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.invite-code-list .status.used {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+
+/* personalSubpage.css 中添加以下样式 */
+
+.setting-section {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.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 {
+  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;
+}
+
+.submit-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.error-message {
+  color: #f44336;
+  margin-bottom: 15px;
+}
+
+.success-message {
+  color: #4CAF50;
+  margin-bottom: 15px;
+}
\ No newline at end of file