diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
new file mode 100644
index 0000000..033952d
--- /dev/null
+++ b/src/components/Personal/Personal.jsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { useNavigate,useLocation, Outlet } from 'react-router-dom';
+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 features = [
+    { 
+      title: '我的收藏', 
+      description: '查看收藏的资源',
+      path: '/personal/Favorite' // 相对路径
+    },
+    { 
+      title: '上传记录', 
+      description: '管理上传的资源',
+      path: '/personal/Upload' 
+    },
+    { 
+      title: '消息通知', 
+      description: '查看系统消息',
+      path: '/personal/Notice' 
+    },
+    { 
+      title: '设置', 
+      description: '修改个人资料',
+      path: '/personal/Setting' 
+    }
+  ];
+
+  const handleCardClick = (path) => {
+    navigate(path); // 相对导航
+  };
+
+  const handleBack = () => {
+    if (location.state?.fromSubpage) {
+      // 如果是从子页面返回，则继续返回到Dashboard
+      navigate(`/dashboard/${location.state.dashboardTab || ''}`, {
+        replace: true
+      });
+    } else {
+      // 普通返回逻辑
+      navigate(-1);
+    }
+  };
+
+  return (
+    <div className="personal-container">
+      {/* 返回按钮 */}
+      <button className="back-button" onClick={handleBack}>
+        &larr; 返回
+      </button>
+      
+      {/* 用户基本信息卡片 */}
+      <div className="profile-card">
+        <div className="profile-header">
+          <img 
+            src={userData.avatar} 
+            alt={userData.username} 
+            className="profile-avatar"
+          />
+          <div className="profile-info">
+            <h2 className="username">{userData.username}</h2>
+            <div className="user-meta">
+              <span>加入时间: {userData.joinDate}</span>
+              <span>等级: {userData.level}</span>
+            </div>
+          </div>
+        </div>
+        
+        {/* 用户数据统计 */}
+        <div className="stats-grid">
+          <div className="stat-item">
+            <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>
+          <div className="stat-item">
+            <div className="stat-label">下载量</div>
+            <div className="stat-value">{userData.download}</div>
+          </div>
+          <div className="stat-item">
+            <div className="stat-label">分享率</div>
+            <div className="stat-value">{userData.ratio}</div>
+          </div>
+        </div>
+      </div>
+      
+      {/* 下载额度卡片 */}
+      <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>
+        </div>
+        <div className="progress-bar">
+          <div 
+            className="progress-fill"
+            style={{ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%` }}
+          ></div>
+        </div>
+        <div className="quota-total">总额度: {userData.downloadQuota.total}GB</div>
+      </div>
+      
+      {/* 功能卡片区 */}
+      <div className="action-cards">
+        {features.map((feature) => (
+          <div 
+            key={feature.path}
+            className="action-card"
+            onClick={() => handleCardClick(feature.path)}
+          >
+            <h3>{feature.title}</h3>
+            <p>{feature.description}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* 子路由出口 */}
+      <div className="subpage-container">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default Personal;
\ No newline at end of file